• 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

人気の記事

  • ChatGPTエラーの原因別対応法: トラブルシューティングのヒント
  • VSCodeの基本~プロジェクトフォルダの設定方法について解説します!
  • VirtualBoxでNATとホストオンリーアダプターによる安全なネットワーク環境構築方法
  • 【Arduino入門】LCD(液晶ディスプレイ)に文字を表示しよう
  • Node.jsをmacOSからアンインストールする方法
  • MySQL WorkbenchからMySQLサーバーへの接続時やSQLファイルを取り込み時にエラーが発生した時の対処方法
  • Visual Studio CodeでHTMLを書くときの便利な設定方法!ミスの防止や開発効率UPに役立てよう
  • VSCodeで画像が表示されない場合の対処法
  • MySQLをXAMPPを使ってWindows環境にインストールする方法
  • 【vim】エラーメッセージ”E325: ATTENTION”の解決方法を解説します!

最近の投稿

  • 【CSS】Google Fontsの利用方法について解説します!新UIに対応2023年11月更新
  • 【SQL】XAMPPのMySQLがXAMPPがポートの競合で起動できない問題について解決方法を解説します!
  • 【Colab】–NOMAL– と表示されて、ショートカットキー(ctrl+c)でコピーができない場合の解決方法を解説します!
  • 【AWS Cloud9】ソフトウェアアップデートで警告メッセージが表示された時の対処方法
  • WindowsからSSHでサーバに接続する方法(RLogin利用)

カテゴリー

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

タグクラウド

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

アーカイブ

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