ワンカラム - コーディング例(プロフィール)
ワンカラム - コーディング例(プロフィール)
プロフィール - ワンカラム
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】ポートフォリオ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <!-- .header --> <header class="header"> <h1>山田一郎</h1> <img src="img/profile.jpg" alt="山田一郎の写真"> </header> <!-- /.header --> <!-- .main-content --> <main class="main-content"> <section class="section-wrap"> <h2>プロフィール</h2> <dl> <dt>生年月日:</dt><dd>1998.2.22</dd> <dt>出身:</dt><dd>東京都池袋</dd> <dt>趣味:</dt><dd>カメラ撮影 / 音楽を聴くこと</dd> <dt>好きな言葉:</dt><dd>想像すること できることできないことことが沢山ある 気づくことから始めよう(オノヨーコ)</dd> </dl> </section> <section class="section-wrap"> <h2>略歴</h2> <dl> <dt>1998年02月:</dt><dd>東京都池袋で産まれる</dd> <dt>2004年04月:</dt><dd>池袋の小学校に入学</dd> <dt>2016年04月:</dt><dd>写真の専門学校に入学</dd> <dt>2018年12月:</dt><dd>Webデザインスクールに入学</dd> </dl> </section> <section class="section-wrap"> <h2>私の作品</h2> <ul> <li> <p>動物園</p> <img src="img/work01.jpg" alt="動物園の写真"> </li> <li> <p>桜並木</p> <img src="img/work02.jpg" alt="桜並木の写真"> </li> <li> <p>富士山</p> <img src="img/work03.jpg" alt="富士山の写真"> </li> </ul> </section> </main> <!-- /.main-content --> <!-- .footer --> <footer class="footer"> <p><small>© 2022 山田一郎作品集</small></p> </footer> <!-- /.footer --> </div><!-- /.container --> </body> </html>
CSS Gridの場合
@charset "UTF-8"; /* ------------------------------------ reset ------------------------------------ */ * { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } /* ------------------------------------ body ------------------------------------ */ body { padding: 30px 20px; color: #333; font-size: 16px; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; line-height: 1.7; } /* ------------------------------------ layout ------------------------------------ */ .container { max-width: 760px; margin: 0 auto; background-color: #fff; border-radius: 6px; } /* ------------------------------------ head ------------------------------------ */ .header { margin-bottom: 30px; } .header h1 { margin-bottom: 20px; border-bottom: 1px solid #397cc3; text-align: center; } /* ------------------------------------ main ------------------------------------ */ .main-content { max-width: 680px; margin: 0 auto; } .section-wrap { margin-bottom: 40px; } .section-wrap h2 { margin-bottom: 20px; padding: 8px 0 6px 1em; background-color: #397cc3; color: #fff; font-size: 22px; } .section-wrap dl { display: grid; grid-template-columns: 120px 1fr; padding: 0 22px; } .section-wrap dt, .section-wrap dd { padding: 6px 0; } .section-wrap li { margin-bottom: 30px; } .section-wrap p { margin-bottom: 6px; } /* ------------------------------------ footer ------------------------------------ */ .footer { padding: 20px; border-top: 1px dotted #333; text-align: center; }
CSS Flexの場合
- 1行の場合のみ、「flex-grow: 1」の指定が可
- 複数行をwrapする場合は、Flexboxの基本原則通り「子要素の幅は必須」となります
.section-wrap dl { display: flex; flex-wrap: wrap; margin: 0 22px; } .section-wrap dt, .section-wrap dd { padding: 6px 0; } .section-wrap dt { flex-basis: 120px; font-weight: bold; } .section-wrap dd { flex-basis: calc(100% - 120px); }