【html/CSS】スタンダードレイアウトの画面(ひとまず完成)
個人アプリのレイアウトがひとまず完成しました。
吹き出しを作る時、CSS理解に多くの時間をかけてしまったので、今回はコピペ多めで作成。
画面は以下のような感じです。
画面イメージ
参考にしたサイト
ポイントボックス
【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30
コード表示
CSSだけでソースコードをエディタ風に表示する方法を共有するよ - ねかつちう。
アイコン
コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
複数行まとめて<li>〜</li>にする方法
- VSCodeの場合、タグしたい内容を複数行選択
- command + shift + P
- Wrap with Abbreviationを選択
- ul>li*
VS CodeのEmmetはWrap with Abbreviationが複数行だと使用不可という誤解 | iwb.jp
擬似要素の活用
擬似要素を使ってFontAwesomeのアイコンを表示させてみたりしました。
CSSの疑似要素とは?beforeとafterの使い方まとめ
あとがき
次回はこのスタンダードレイアウトをlaravelに適用して、コンテンツも作る予定。
コンテンツは基礎カリキュラムで難しかったアソシエーション、ネスト、ルーティングあたりを解説したい。