ページを制作する
大体の制作予定
- ページ制作１日目：ヘッダー、ナビゲーション、フッター、サイドバー
- ページ制作２日目：トップページ
- ページ制作３日目：下層コンテンツ
- ページ制作４日目：下層コンテンツ
- ページ制作５日目：下層コンテンツ
【4～８日目実習】デザインカンプからhtmlを制作する
- １．ページアドレス・ディレクトリ（フォルダー）の構成を決める
- ２．基本htmを書く（全ページ共通部分）
- ３．ヘッダー、ナビゲーション、サイドバー、フッターからhtml化する。（全ページ共通部分）
- ４．トップページを制作する
- ５．各下層ページのコンテンツ部分を制作する
１．ページアドレス・ディレクトリ（フォルダー）の構成を決める
参考ディレクトリ構成
ホームページ
├ css
│ └ 〇〇.css
├ font
│ └ 〇〇.ttf
├ image
│ └ 〇〇.jpg
├ js
│ └ 〇〇.js
├ index.html
│
├ company.html
│
└ form.html２．基本htmlを書く
参考コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width">
<!-- Bootstrap CSS(CSSフレームワーク) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- fontawesome CSS（アイコン） -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- slick CSS(スライドアニメーション) -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<!-- AOS(スクロールアニメーション)-->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<!-- Org CSS(オリジナルCSS)-->
<link rel="stylesheet" href="./css/style.css">
<title>能力開発校授業用</title>
<link rel="icon" href="./img/favicon.png" type="image/x-icon">
</head>
<body>
<section id="header">
<!--ヘッダーの内容-->
</section>
<section id="navigation">
<!--ナビゲーションの内容-->
</section>
<section id="sidebar">
<!--サイドバーの内容-->
</section>
<section id="contents">
<!--コンテンツの内容-->
</section>
<section id="footer">
<!--フッターの内容-->
</section>
</body>
<!-- ジャバスクリプトを読み込む-->
<script></script>
</html>
３．ヘッダー、ナビゲーション、サイドバー、フッターからhtml化する。（全ページ共通部分）
全ページの共通部分から制作を始める
共通部分から作ることによって見栄えがバラつくのを防いだり、全体のページ数や出来栄えを把握しやすい
〇ソースの書き方
ソースはあとで修正出来るようにわかりやすく書く→コメントを入れる。CSSのソースを分かりやすい文字列にするなど。
参考コード
<section id="header">
<!--ヘッダーの内容-->
</section>
<section id="navigation">
<!--ナビゲーションの内容-->
</section>
<section id="sidebar">
<!--サイドバーの内容-->
</section>
<section id="contents">
<!--コンテンツの内容-->
</section>
<section id="footer">
<!--フッターの内容-->
</section>
４．トップページを制作する
トップページはホームページの顔になる部分ですが、閲覧者は検索結果から閲覧しトップページから閲覧されるわけでありません。目次みたいなもの。
参考コード
<section id="contents">
<div id="top-contents">
<!--トップページコンテンツの内容-->
</div>
</section>
５．各下層ページのコンテンツ部分を制作する
参考コード
<section id="contents">
<div id="ページ名-contents">
<!--下層ページコンテンツの内容-->
</div>
</section>