css
帰省2日目です。
静岡らしいもの食べたよ。
生しらすや黒はんぺんとかね。
.
スマホ用ページで画像をスライドさせたいなあとおもい
参考コードを探したのだけれども
なかなかコードが長くて疲れてしまったので
JSは使わずにHTMLとCSSだけで動くものを見つけて
そちらを参考にしました。
https://codepen.io/hw/pen/biEBz
できたものがこちら
動くのでスマホから下記ページを見てみてね。
https://suwa3.github.io
.
コードをコピペして
画像をちょろっと変更しただけなので
こちらは数十分で完成したの。
.
でも、動きがあるからか
SNSへ投稿したとき
こっちのほうが10倍くらい反応あって
やはり動きがあると違うのだなあとおもった。
.
昨日の編集には3時間溶かしたわりに
反応の有無という意味では
費用対効果が少なかったかもしれない。
.
しかし、デベロッパーツールの使い方を再確認できた点では
成果が大きかったので良しだよ。
HPのスマホ用ページを編集したの。
ハンバーガーメニュー持て余していたので。
.
移動時間にスマホ用ページのデザイン集を見つつ
スプリングボードメニューが見やすそうだなあとおもい
下記ページを参考にしつつ作りました。
https://gardenplace.jp/
(実際にはリンクを並べる形なのだけれども)
.
まずデベロッパーツールの使い方を調べるのに1時間。
基本的な使い方ふわっと分かっていたので
とりあえず欲しい場所のHTMLタグから
対応しているStyleを
自分のHPの既存内容と喧嘩しないようにコピペして
ひたすら貼り付ける作業に2時間。
計3時間かけて
上画像から下画像に編集しなおしました。
.
高校生のころ、毎日
｢今日はこのHTMLタグで遊ぼう｣
ってノリでWeb編集していたけれども
当時はデベロッパーツールとかなかったの。
改めて、これめちゃ便利だね。
PCでF12押すだけで参考にできるの強い。
.
静岡に帰省しました。
1泊2日なの。
従兄弟が大学で材料系と機械系について学んでいると知り
Linuxやラズパイ周辺のことなど
いろいろと話せたので楽しかった。
スマホ用のページもかいた。
こういうタップすると見えるような
三本線のメニューって
ハンバーガーメニューっていうんだねえ。
iPhone5で見られるならOKかな。
.
JSの動画を最後まで観たの。
Rabbit-gameってファイルつくって
すわぴぴHOMEに貼ったろ。
.
ハズレはやぎで
うさぎが当たりの簡単ゲームだよ。
.
レベルアップしたら、その都度
Rabbit-gameは更新しよう。
｢なんか謎のゲームある｣
みたいな感じでいきます。
お昼休みはJSの動画を観て
夕休みにはCSSひたすらいじっていたの。
だんだん完成イメージに近づいてきた。
GitHubにupしておけば
ローカルでいくらでもいじれるの心強いねえ。
.
スマホ用のページも別途つくりたい。
それに慣れてきたらフレームワーク使ってみたいなあ。
.
今週やりたいこと盛りだくさんなの
スマホ用のWebページ組み立ててフレームワークチャレンジしたら
GitHub pagesでhome.suwa3.meのドメイン設定して
週末のオープンソースカンファレンスの予習もしたいし
Ruby on Railsで簡単なアプリつくるチュートリアルもやりたい。
.
水木金の昼休みと夕休みと夜にちょろっとやっていくᐠ( ᐛ )ᐟ♡ᐠ( ᐖ )ᐟ