「ウェブ開発入門完全攻略コース」サポートサイト | プログラミング入門ナビ by Proglus（プログラス）

このページは、オンライン講座「Web開発入門完全攻略コース」のサポートサイトです。

1 セクション7 「実践：Webサイトのコーディング」
- 1.1 サンプルコード
  - 1.1.1 HTML
  - 1.1.2 CSS
2 注意事項

セクション7 「実践：Webサイトのコーディング」

サンプルコード

完成版のHTMLとCSSを掲載します。
エラーが発生した時に見比べたり、動作するコードをコピー＆ペースとして実行したいときなど、個人の学習用にご利用ください。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSS Cafe</title>
    <meta name="description" content="かわいい猫のフォトギャラリーです">
    <meta name="keywords" content="猫, フォトギャラリー">
    <link rel="stylesheet" href="css/html5reset-1.6.1.css">
    <link rel="stylesheet" href="css/base.css">
   </head>
  <body id="home">
    <!-- header begin -->
    <header id="top">
    <h1>CSS Cafe</h1>
    <nav>
      <ul class="clearfix">
        <li class="current"><a href="index.html">ホーム</a></li>
        <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>
    </header>
    <!-- header end -->
    <!-- main begin -->
    <main class="clearfix">
      <div id="main_image">
        <img src="images/cafe.jpg" alt="CSS Cafe">
      </div>
      <!-- main_content begin -->
      <div id="main_content">
        <section id="info">
          <h2>お知らせ</h2>
          <dl>
            <dt>2018年3月10日</dt>
            <dd>リニューアルオープンしました。</dd>
            <dt>2018年4月15日</dt>
            <dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
            <dt>2018年4月20日</dt>
            <dd>ゴールデンウィークは休まず営業いたします</dd>
          </dl>
        </section>
        <section id="campaign">
          <h2>キャンペーン情報</h2>
          <ul>
            <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
            <li>平日11時から14時までお得なランチタイムを実施中。</li>
            <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
          </ul>
        </section>
      </div>
      <!-- main_content end -->
      <!-- sidebar begin -->
      <aside id="sidebar">
        <ul>
          <li>
            <a href="#">
              <img src="http://via.placeholder.com/300x200" alt="バナー1">
            </a>
          </li>
          <li>
            <a href="#">
              <img src="http://via.placeholder.com/300x200" alt="バナー2">
            </a>
          </li>
        </ul>
      </aside>
      <!-- sidebar end -->
    </main>
    <!-- main end -->
    <!-- footer begin -->
    <footer>
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <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>
    <small>© 2018 CSS Cafe</small>
    </footer>
    <!-- footer end -->
  </body>
</html>

CSS


body {
  font-family: "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;
}

/* header */
header {
  border-top: 8px solid #614226;
}

header h1 {
  font-size: 2.0em;
  margin: 40px 0 30px 0;
  text-align: center;
}

header nav ul {
  width: 940px;
  margin: 0 auto 30px auto;
  padding-left: 0;
  list-style-type: none;
}

header nav ul li {
  float: left;
  width: 155px;
  margin-right: 2px;
  text-align: center;
}

header nav ul li:last-child {
  margin-right: 0;
}

.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

header nav ul li a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  color: #fff;
  background-color: #614226;
}

header nav ul li a:hover,
header nav ul li a:active,
header nav ul li.current a {
  background-color: #000;
}

/* main */
main {
  width: 940px;
  margin: 0 auto;
}

main h2 {
  font-size: 1.5em;

  margin-bottom: 50px;
  text-align: center;
}

#main_image {
  margin-bottom: 30px;
}

#main_content {
  float: left;
  width: 600px;
}

#sidebar {
  float: right;
  width: 300px;
}

#home h2 {
  font-size: 1.5em;
  margin-top: 0;
  margin-bottom: 30px;
  padding: 5px 10px;
  text-align: left;
  border-bottom: 1px solid #614226;
  border-left: 10px solid #614226;
}

#info dl {
  margin-bottom: 30px;
  margin-left: 20px;
}

#info dt {
  float: left;
  width: 8em;
}

#info dt,
#info dd {
  line-height: 1.5;
}

#campaign li {
  line-height: 1.5;
  margin-left: 20px;
  list-style-type: none;
}

/* sidebar */
#sidebar ul {
  margin: 0;
  padding: 0;
}

#sidebar ul li {
  margin-bottom: 20px;
  list-style-type: none;
}

/* footer */
footer {
  padding: 15px;
  text-align: center;
  color: #fff;
  background-color: #614226;
}

footer ul {
  margin-bottom: 20px;
/*   margin-left: 0 10px; */ /* &lt;- 訂正：この行は不要です。2018/6/29 */
}

footer ul li {
  display: inline;
/*   margin-left: 0 10px; *//* &lt;- 訂正：この行は不要です。2018/6/29 */
}

footer ul li a {
  color: #fff;
}

footer ul li a:link {
  text-decoration: none;
}

footer ul li a:hover,
footer ul li a:active {
  text-decoration: underline;
}

補足：main h2と#home h2の記述内容に重複があるため、マージすることも可能。今後のコース制作でアップデートを検討中。

注意事項

受講生の皆さんの個人的な学習にのみご利用いただけます。
営利・非営利問わず二次利用する行為を禁止します。