迷い人

日々勉強。勉強の先に何か見つかるといいなぁ

【html/CSS】スタンダードレイアウトの画面(ひとまず完成)

個人アプリのレイアウトがひとまず完成しました。

 

吹き出しを作る時、CSS理解に多くの時間をかけてしまったので、今回はコピペ多めで作成。

 

画面は以下のような感じです。

 

画面イメージ

f:id:oyaoya1123:20191031223638p:plain

f:id:oyaoya1123:20191031223707p:plain

 

参考にしたサイト

ポイントボックス

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

 

コード表示

CSSだけでソースコードをエディタ風に表示する方法を共有するよ - ねかつちう。

 

アイコン

コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

Font Awesome

 

複数行まとめて<li>〜</li>にする方法
  • VSCodeの場合、タグしたい内容を複数行選択
  • command + shift + P 
  • Wrap with Abbreviationを選択
  • ul>li*

VS CodeのEmmetはWrap with Abbreviationが複数行だと使用不可という誤解 | iwb.jp

 

擬似要素の活用

擬似要素を使ってFontAwesomeのアイコンを表示させてみたりしました。

CSSの疑似要素とは?beforeとafterの使い方まとめ

 

あとがき

次回はこのスタンダードレイアウトをlaravelに適用して、コンテンツも作る予定。

コンテンツは基礎カリキュラムで難しかったアソシエーション、ネスト、ルーティングあたりを解説したい。