絶対他力

凡人の凡人による凡人のためのWebサービス開発

ボタンのCSSを作成しています_PWDD-160129

      2016/03/23

チームPocoです。
ポコ帳ワイヤーフレーム開発日記(PWDD)です。

CSSでボタンの見た目を調整しています。

今回は、一部のアイコン(メインメニュー)のボタンを作成しました。

現時点でのスクリーンショットは、↓な感じです。
※デベロッパーツールの設定:iPhone6
HTMLスクリーンショット右上の三本線のアイコンが、今回作成したボタンです。
(三本線のアイコンは、「ハンバーガーメニュー」と呼ぶらしいです)

また、矢印とコメントを変更した箇所に付けてみてました。
※Evernoteを使って編集しました

さらに、↓の通り、クリックするとX印に変わります。
HTMLスクリーンショット

CSSでのアイコンの作り方は、↓のサイトを参考にしました。

 

また、「クリック後のX印への変化」が難しく、色々と工夫しましたが…
細かい位置やサイズを手作業で調整したため、環境が変わるとズレそうで心配です。

ただ、CSSだけでボタンを実現できたので満足しています。

次回以降も、ボタンの見た目の調整を続けます。

また、CSSは↓です。
(長くなる一方なので、そろそろ何とかしたいです)

HTMLは↓です。

本日のPWDDは以上です。

 - PWDD