Slider

帰省2日目です。

静岡らしいもの食べたよ。

生しらすや黒はんぺんとかね。

.

スマホ用ページで画像をスライドさせたいなあとおもい

参考コードを探したのだけれども

なかなかコードが長くて疲れてしまったので

JSは使わずにHTMLとCSSだけで動くものを見つけて

そちらを参考にしました。

できたものがこちら

動くのでスマホから下記ページを見てみてね。

https://suwa3.github.io

.

コードをコピペして

画像をちょろっと変更しただけなので

こちらは数十分で完成したの。

.

でも、動きがあるからか

SNSへ投稿したとき

こっちのほうが10倍くらい反応あって

やはり動きがあると違うのだなあとおもった。

.

昨日の編集には3時間溶かしたわりに

反応の有無という意味では

費用対効果が少なかったかもしれない。

.

しかし、デベロッパーツールの使い方を再確認できた点では

成果が大きかったので良しだよ。

デベロッパーツール

HPのスマホ用ページを編集したの。

ハンバーガーメニュー持て余していたので。

.

移動時間にスマホ用ページのデザイン集を見つつ

スプリングボードメニューが見やすそうだなあとおもい

下記ページを参考にしつつ作りました。

https://gardenplace.jp/

(実際にはリンクを並べる形なのだけれども)

.

まずデベロッパーツールの使い方を調べるのに1時間。

基本的な使い方ふわっと分かっていたので

とりあえず欲しい場所のHTMLタグから

対応しているStyleを

自分のHPの既存内容と喧嘩しないようにコピペして

ひたすら貼り付ける作業に2時間。

計3時間かけて

上画像から下画像に編集しなおしました。

.

高校生のころ、毎日

「今日はこのHTMLタグで遊ぼう」

ってノリでWeb編集していたけれども

当時はデベロッパーツールとかなかったの。

改めて、これめちゃ便利だね。

PCでF12押すだけで参考にできるの強い。

.

静岡に帰省しました。

1泊2日なの。

従兄弟が大学で材料系と機械系について学んでいると知り

Linuxやラズパイ周辺のことなど

いろいろと話せたので楽しかった。

Rabbit-game

スマホ用のページもかいた。

こういうタップすると見えるような

三本線のメニューって

ハンバーガーメニューっていうんだねえ。

iPhone5で見られるならOKかな。

.

JSの動画を最後まで観たの。

Rabbit-gameってファイルつくって

すわぴぴHOMEに貼ったろ。

.

ハズレはやぎで

うさぎが当たりの簡単ゲームだよ。

.

レベルアップしたら、その都度

Rabbit-gameは更新しよう。

「なんか謎のゲームある」

みたいな感じでいきます。

Owl

お昼休みはJSの動画を観て

夕休みにはCSSひたすらいじっていたの。

だんだん完成イメージに近づいてきた。

GitHubにupしておけば

ローカルでいくらでもいじれるの心強いねえ。

.

スマホ用のページも別途つくりたい。

それに慣れてきたらフレームワーク使ってみたいなあ。

.

今週やりたいこと盛りだくさんなの

スマホ用のWebページ組み立ててフレームワークチャレンジしたら

GitHub pagesでhome.suwa3.meのドメイン設定して

週末のオープンソースカンファレンスの予習もしたいし

Ruby on Railsで簡単なアプリつくるチュートリアルもやりたい。

.

水木金の昼休みと夕休みと夜にちょろっとやっていくᐠ( ᐛ )ᐟ♡ᐠ( ᐖ )ᐟ