• 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(プログラス) 採用情報 FindU

Twitter

Follow @programmingnavi Tweets by programmingnavi

人気の記事

  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • MySQLのGPGキーの有効期限切れのためインストールに失敗する場合の対応方法
  • よくあるSQLのエラーの種類と自力でエラーを取り除く方法について説明します
  • JavaScriptの「net::ERR_FILE_NOT_FOUND」エラーが出る原因と対処方法を紹介!
  • VSCodeで画像が表示されない場合の対処法
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法
  • macOSのVirtualBoxで”Kernel driver not installed (rc=-1908)”発生時の対処方法を解説

最近の投稿

  • 【06/02更新】Udemyプログラミング入門講座等の割引クーポン配布
  • 【AWS】ApacheをEC2にインストール後、テストページが表示出来なかった時の対応方法について
  • 【新コース公開】はじめてのPythonプログラミング入門
  • 【新コース公開】ウェブ開発の概要を知ろう
  • 【新コース公開】はじめてのRuby on Rails 7入門

カテゴリー

  • Arduino入門
  • AWS
  • その他
  • エンジニアのしごと
  • エンジニアへの道
  • ツールの使い方
  • ニュース
  • プログラミング入門
  • 電子工作入門

タグクラウド

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

アーカイブ

  • 2022年6月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年6月
  • 2021年4月
  • 2021年3月
  • 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 © 2022 · programmingnavi.com ・About・プライバシーポリシー