ウェブ制作でよく使うレイアウトや要素をご紹介
2024/05/12
#CSS
#HTML
まず初めに共通のHTMLとCSSをご紹介!
共通のHTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="container"> <main class="main"> <div class="main-inner"> <section class="block"> <div class="block-inner"> <div class="block-head"> <h2>タイトル</h2> </div> <div class="block-body"> ここに今回必要なコードを記述する </div> </div> </section> </div> </main> </div> </body> </html>
共通のCSS
* { box-sizing: border-box; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 400; list-style: none; margin: 0; padding: 0; } img { height: auto; max-width: 100%; } .block { padding: 65px 0; } .block-inner { margin: 0 auto; width: 92%; max-width: 800px; } .block-head { margin: 0 0 25px; } .block-head h2 { font-size: 18px; font-weight: bold; }
head内に記述するCSSとウェブフォントの呼び出しコード
※こちらEnlighter JSにてコードを記述するとエラーが発生するためCode Penの埋め込みで案内いたします。
See the Pen head内記述コード by Syo Yanai (@h1-tech) on CodePen.
こういったレイアウトは頻出する!
覚えておいて損はないレイアウト集!
PCでは2列横並び、スマホでは1列になるレイアウト
See the Pen Test by Syo Yanai (@h1-tech) on CodePen.
PCでは3列横並び、スマホでは1列になるレイアウト
See the Pen Test by Syo Yanai (@h1-tech) on CodePen.
PCでは4列横並び、スマホでは2列になるレイアウト
See the Pen 4カラムレイアウト by Syo Yanai (@h1-tech) on CodePen.
画像とテキストが横並びで交互に配置、スマホでは縦にレイアウト
See the Pen 画像とテキストの横並びレイアウト by Syo Yanai (@h1-tech) on CodePen.