2カラムレイアウト(3)
2カラムレイアウト(3)
HI University
大学案内
学部・大学院
国際交流
入試情報
キャンパスライフ
Information
2013.10.30
オープンキャンパス11月20日 開催!
2013.09.12
【重要】男子寮の料金プラン変更について
2013.08.02
iWDC&iSFC 2013 WORKSHOPについて
2013.04.01
今年度の挨拶 —学長より
夏のトマム7ふしぎ
冬のトマム7ふしぎ
Copyright © HI University All Rights Reserved.
HTML記述例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>HI University</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- .header --> <header class="header"> <div class="container"> <h1 class="logo"><img src="img/logo.png" alt="HI University"></h1> <nav class="gnav"> <ul> <li><a href="#">大学案内</a></li> <li><a href="#">学部・大学院</a></li> <li><a href="#">国際交流</a></li> <li><a href="#">入試情報</a></li> <li><a href="#">キャンパスライフ</a></li> </ul> </nav> </div><!-- /.container --> </header> <!-- /.header --> <div class="container content"> <div class="key-Visual"> <img src="img/mainvisual.png" alt=""> </div><!-- /.key-Visual --> <main class="main-content"> <div class="news"> <h3>Information</h3> <dl> <dt>2013.10.30</dt><dd>オープンキャンパス11月20日 開催!</dd> <dt>2013.09.12</dt><dd>【重要】男子寮の料金プラン変更について</dd> <dt>2013.08.02</dt><dd>iWDC&iSFC 2013 WORKSHOPについて</dd> <dt>2013.04.01</dt><dd>今年度の挨拶 —学長より</dd> </dl> </div><!-- /.news --> <div class="wrapper"> <p class="banner"><img src="img/event_1.png" alt="夏のトマム7ふしぎ"></p> <p class="banner"><img src="img/event_2.png" alt="冬のトマム7ふしぎ"></p> </div><!-- /.wrapper --> </main><!-- /.main-content --> </div><!-- /.container --> <!-- .footer --> <footer class="footer">Copyright © HI University All Rights Reserved.</footer> <!-- /.footer --> </body> </html>
CSS記述例
@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 { color: #222; background-color: #e7f0f4; font-size: 16px; font-family: sans-serif; line-height: 1.0; border-top: 6px solid #045ed5; } /* ---------------------------------- layout ---------------------------------- */ .container { max-width: 960px; margin: 0 auto; } .content { display: flex; gap: 40px; padding: 40px 0; } /* ---------------------------------- header ---------------------------------- */ .header { padding: 40px 0 30px; background-color: #fff; } .header > .container { display: flex; align-items: center; } .header h1 { width: 132px; margin-right: auto; } /* ---------------------------------- nav ---------------------------------- */ .gnav { margin-bottom: 20px; } .gnav > ul { display: flex; gap: 40px; } /* ---------------------------------- main ---------------------------------- */ .news { margin-bottom: 40px; padding: 12px 12px 15px; background-color: #fff; } h3 { margin-bottom: 6px; padding-bottom: 6px; color: #045ed5; font-size: 18px; font-family: serif; border-bottom: 3px solid #045ed5; } dl { display: flex; flex-wrap: wrap; width: 450px; font-size: 15px; } dt { width: 8em; padding: 8px 0; border-bottom: 1px dashed #333; } dd { width: 73%; padding: 8px 0; border-bottom: 1px dashed #333; } .wrapper { display: flex; gap: 40px; margin-bottom: 20px; } /* ---------------------------------- footer ---------------------------------- */ .footer { padding: 40px 0 50px; background-color: #045ed5; color: #fff; font-size: 14px; text-align: center; }