• Skip to main content
  • Skip to primary sidebar

プログラミング入門ナビ

プログラミング学習初心者のための情報メディア by Proglus(プログラス)

You are here: Home / 「ウェブ開発入門完全攻略コース」サポートサイト

「ウェブ開発入門完全攻略コース」サポートサイト

このページは、オンライン講座「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の記述内容に重複があるため、マージすることも可能。今後のコース制作でアップデートを検討中。

注意事項

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

Primary Sidebar

Proglus

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • 無料のSSL証明書Let’s Encryptを設定・更新・自動更新する方法(CentOS7, Apache2.4対応)
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchをMacにインストールする方法
  • AWS Cloud9のプレビューが上手く表示されない時の対処法
  • 初心者のプログラミング学習には13インチのMacBook Proがおすすめ!その理由も解説!
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • macOSで2つのファイルの差分を確認するには?便利なdiffツールを紹介
  • MySQL 5.7 for Windowsのアンインストール方法
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法

最近の投稿

  • 【03/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • swpファイルが作成されてvimでファイルが編集できない時の対処法とは?
  • 【無料モニター(2期生)募集!】「就職活動用のポートフォリオ制作講座」
  • フレームワークとは?開発効率UPに役立つ理由を知っておこう!
  • WordPressとは?どんなことができるの?初心者にもわかりやすく解説!

カテゴリー

  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門

タグクラウド

AI AWS AWS Cloud9 Bootstrap Cloud9 CodeWing CSS Git GitHub Heroku HTML JavaScript li Linux macOS MySQL MySQL Workbench Nuxt.js ol Proglus Python Ruby Ruby on Rails SQL Udemy vscode Vue.js Web開発 Windows インストール エラー エンジニア オンライン学習 サーバー スクリーンショット セール プログラミング プログラミング入門 プログラミング学習 ユーデミー 初心者 改行 未経験 機械学習 開発環境構築

アーカイブ

  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年11月
  • 2019年9月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月

検索

Copyright © 2021 · programmingnavi.com ・About・プライバシーポリシー