Zenn
🕌

WIP: HTML＆CSSとWebデザイン実践講座を読んで学んだこと

2021/05/05に公開
CSS
HTML
読書
tech

Webページを作り始める前に

CSSはリセットしよう

フォントを活用しよう

フォントアイコンを活用しよう

シングルカラムとマルチカラム

  • シングルカラム
    • メリット
      • スマホ、タブレットにおいて、デバイスごとの差を減らせる。
      • ユーザーの視線を集中させることができる
      • 画像や動画を大きく打ち出せる
    • デメリット
      • 情報量が多い場合は設計が難しい
  • マルチカラム
    • メリット
      • WEBサイト内の回遊率を向上できる
      • スペースを有効活用できる
    • デメリット
      • メインコンテンツの集中力が低下する
      • 小さいスクリーンでは文字が読みづらい

画像は圧縮しよう

Webページ内の技術要素

全画面に背景を表示する

  • 100vhを使用する
    • vh:viewport height
    • vh は viewportに対しての相対サイズ（%指定）
    • 100は表示領域の高さいっぱいに背景画像を広げると言う意味
  • viewport：表示領域の横サイズを指定するもの。デバイスごとに最適化することも可能。
	<meta name=”viewport” content=”width=device-width,initial-scale=1>

擬似要素

  • CSSによってあたらに作り出す架空の要素のこと
	h1::before{content:"テキスト"}

	h1::after{content:"テキスト"}
  • 画像も指定可能

メディアクエリー

  • 画面の横幅によってCSSを変える手法
    • CSSファイル内に直接記述
    • linkタグに記述
    • CSSファイル内で別CSSファイルを読み込む@importに記述
  • PCファースト
	@media(max-width:700px){ }
  • モバイルファースト
	@media(min-width:700px){ }

CSSスクロールスナップ

  • ピタっと各エリアを表示できる
    • scrool-snap-type: y
      • mandatory or proximity
    • overflow:autoが必要
      • overflow：要素がはみ出したときにどうするかの指定
      • autoはスクロールが表示される

Discussion