HTML5&CSSで自分の城（ホームページ）を作ってみよう（手抜き講座）

まずは最低限の決まり事を覚える。

構造を把握する
HTML5では、
<head>～</head>タグで最初の決まり事を書き、
その次に<body>タグを書き、
<header>～</header>タグでページ上部に表示される方のヘッダーを書いて、
<nav>～</nav>タグでメニューを書き、
<article>～</article>タグで<section>や<div>タグも交えてメインの記事を書き、
<aside>～</aside>タグでサブ記事を書く。
で、<footer>～</footer>タグで締める。あとbodyやhtmlもちゃんと締めておく。という構造が基本です。

あと、文字の大きさも決めておく。
基本は自分で作った*.cssファイルのbody設定に書く。極めてシンプルにしたいなら1.0remでいいと思います。
font-size: 1.0rem;
レスポンシブデザインの場合は、この固定値だとデザイン的にでかすぎる場面も出てくる。ちっちゃいスマホとか。

ならどうするか。ここで出てくる式と変数が、calc(お好きな数式)とvw（ビューポート基準での横幅。viewport+width）。縦だとvh。
font-size: calc(40% + 0.5vw);
にすると、普通の時で1.0remと同じ文字サイズになります。1920x1080、FullHDのディスプレイだと。
これでブラウザの画面を小さくするとそれに合わせて文字も小さくなるので、スマホだろうが何だろうが文字が吹っ飛んでデザイン崩壊ってことは完璧になくなります。
スマホで見ると文字が小さすぎるって場合は、vwを小さくして%を大きくすれば良い。両方の数字を足して９０（vwは上記だと50%扱い）になるくらいがちょうど良さそう。

このcalc式で基準を作っておけば、後で文字の大きさを変える時に2.0em（emはremと違い相対の大きさ）とかで一部の文字調整も楽にできる。

しかし、FirefoxやsafariやChromeだとＯＫだけどIEではこのCSS認識しないっていうポンコツブラウザっぷりなので、IEの時だけの文字サイズ指定もしておく。

@media all and (-ms-high-contrast:none) {
body {
font-size: 1.0rem; /* IEには上記の式効かないのでこれ入れる */
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" media="screen" href="スタイルシートファイル（style.css）までの相対パス" />
<script type="text/javascript" src="～共通フォルダまでのパス/jquery.min.js"></script>
<script type="text/javascript" src="～共通フォルダまでのパス/header.js"></script>
<script type="text/javascript" src="～共通フォルダまでのパス/footer.js"></script>
</head>

　ヘッダーまではこんな感じで書く。
　HTML5での国際基準はShift_JISではなく、UTF-8です。ですので、保存する際もエンコードをしっかりUTF-8にしてから保存ボタンを押しましょう。
　UTF-8にすることにより、日本語読めない人が日本人のページを見ても文字化けそのものはしなくなるようです。……日本語を習得していない人には読めないことには変わりがありませんが。

　加えて、<viewport>のタグも重要。この部分の記述は、普通は１倍で表示する（initial-scale=1）けど、スマホとか小さい画面だとその画面に合わせる（width=device-width）よ。でも見る人が拡縮させるのもＯＫ（user-scalable=yes）で、１０倍までいける（maximum-scale=10）よ。という意味。
　あと、これだけ先に話しておきますが、スタイルシート用の別ファイル（style.css）に、どの位置でもいいから以下の文を入れておく。
/*スマホとかで画像横に吹っ飛んだ時に大きさを合わせる*/
img {
　　max-width: 100%;
　　height:auto;
}
　これを入れておくと、ウインドウサイズをどのように変えても、絵がはみ出して吹っ飛ぶことがなくなる。サイズや端末変更に合わせた横幅に自動的に変化するようになる。
　たったこれだけの短い文で、自分の個人サイトの全ての絵に幅合わせが適用される優れもの。

　で、javascriptの数行はDLして使わせてもらうjquryまでのパスと、自分で描いたヘッダー用のjsとフッター用のjs。
　インクルードとか使わない場合は必要ないけど、インクルード使った方が完成した後のホムペのメンテが格段に楽になる。
次に、最初にヘッダー用のhtmlファイルとフッター用のhtmlファイルを別に作成して、自分で作成して決めた共通フォルダに投げ込む。
ヘッダーとフッターはインクルードで他の全てのHTMLファイルに差し込むので、２番目の項目で言った前置き的文章（スタイルシートやJavascriptまでのパス指定）は一切書かない。

<header>
～～メニュー用の記述を自由に書く～～
（何かパス指定する際は{$root}でルートフォルダからの相対パスで書く{$root}○○.htmlとかで）
</header>

これだけ書いて*.htmlで保存して共通フォルダに置く。
フッターファイルも同様に書いて置く。

ここまで終わったら、次はヘッダーとフッターを呼び出すからくり用の*.jsファイルを自分で書く。
詳しい方法は【ヘッダーフッター js インクルード】のようなキーワードで検索するとたくさんWebデザイナーさんの解説が見られるのでここでは割愛。
jsファイルも書いたら、それも共通フォルダに置く。

これも終えたら、全てのページにヘッダーとフッター呼び出し用の記述を加える。

<script type="text/javascript">
writeHeader("../");
</script>

こんな感じで。フッター用記述も同様に。
HTML5から新登場の<header>、<nav>、<article>、<aside>、<footer>を覚える。
HTML5.1から新登場の<picture>や<details>、<summary>も覚える。
超便利。
HTML5.1とCSS3がどのくらいまで各ブラウザで対応しているかは、
Can I Useで確認できます。
で確認できます。

ディテールタグを覚えると、こんな感じのギミックが！

CSS3なしで、HTML5.1だけでできるようになりますわ。
CSS3ファイルのダイエットにもなって簡単でもあって一石二鳥ですわよ！
ここで大きなポイントになるのが、style.css。スタイルシート用のファイルで、自分で白紙の状態から作ります。
最初は面倒ですが、一度書き終えたら一気に便利になります。
複数のページの文字色や構成を、このstyle.cssをいじるだけで一気に変更できるようになります。
これは初期のhtmlで、１ページごとに背景やリンク色などをいちいち描きこんでいた時に比べたら月とスッポン！
さらに特筆すべき点は――
HTML5から新登場の<header>、<nav>、<article>、<aside>、<footer>には、htmlファイルの方でclassつけて属性指定しなくてもタグそのもののみでスタイルシートの情報を読み込んでくれるという点。<article class="スタイルシートの指定カテゴリー">とする必要がないというわけです。

style.cssの記述で、HTML5の新タグそれぞれにスタイルを設定します。
細かいところは各人の腕の見せ所。
header {
display:block;
}
nav {
display:inline;
}
article {
display:block;
float:left; /*←article（メインブロック）はfloat:leftで左に。逆にする場合はright*/
width:84%;
margin:0 -5% 0 0;
}
aside {
display:block;
float:right; /*←aside（サイドバー）はfloat:rightで右に。左にサイドバー行かせる場合はleft*/
width:15%;
}
section {
display:block;
}
footer {
display:block;
clear:both; /*←articleとasideのfloatを、これでクリア。*/
width:99%;
text-align: center;
}
でページ全体の要素をinline;からblock;に変更するとか。
body {
background-color: #000000; /* ページの背景色 */
color: #DDDDDD; /* 全体の文字色 */
font-size: 1.0rem; /* 全体の文字サイズ。これからは単位remでかくべし！*/
background-image:
url(mycg/chibi/chibi_touka001.png),/*最近のCSSでは、背景を複数設定できる*/
url(sozai1/cherry7.gif); /*ので、ちびキャラを各ページに登場させやすくなる*/
background-repeat:
no-repeat,
repeat;
background-attachment: fixed;
background-position:
bottom right,
100% 80%;
}
国際基準に合わせるために、レイアウトを好き勝手な感じにする方法を覚える。

flexboxが今は一番良さそう。Grid Layoutもすでに出ていますが、新しすぎてIEとかは切り捨てないといけないっぽい。
古いの切り捨て気にせずするって言うなら、迷いなくグリッドレイアウトで。
グリッドレイアウトは、画面全体をタイルに見立てて、上のタイル全体はヘッダー、下のタイル全ての枚数はフッター、真ん中のタイルの端っこはメニュー、真ん中のタイルのそれ以外はメインコンテンツとかそーゆー感じで記述して自由にデザインしていきます。
Grid Layoutの例を見たければ、このわたしの個人サイトのトップページを見ていただければわかります。
TOPだけグリッドレイアウトにしましたので。

しかし、グリッドレイアウトより簡単で調整も簡単なのがflexbox。これでテーブルタグを使わずにテーブルのようなレイアウトだってできます。
自分のホームページが、ＳＥＯも考えられたページと見なされるようになります。

例えば、以下がわたしのサイトのカスタムメイド3D2のMOD紹介ページのデザインを決定づけているフレックスボックスの記述なのですが――

/*flexboxでレイアウト。CSS3で書く方だよ！*/
/*カスタムメイド3D2服MODページ*/
@media screen and (min-width: 1024px) {
.flex_cm3d2modcloth1 {
display: flex;
flex-wrap: wrap;
}
.waku_cm3d2modcloth1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 50%;
box-sizing: border-box;
max-width: 100%;
height: auto;
}
}
@media screen and (max-width: 1023px) {
.flex_cm3d2modcloth1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.waku_cm3d2modcloth1 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
}


<div class="flex_cm3d2modcloth1">
<div class="waku_cm3d2modcloth1">
い
</div>
<div class="waku_cm3d2modcloth1">
ろ
</div>
<div class="waku_cm3d2modcloth1">
は
</div>
<div class="waku_cm3d2modcloth1">
に
</div>
<div class="waku_cm3d2modcloth1">
ほ
</div>
<div class="waku_cm3d2modcloth1">
へ
</div>
<div class="waku_cm3d2modcloth1">
と
</div>
</div>

HTMLの方はこれだけ単純に書いておけば、後はCSSの方だけでそれぞれのボックスの位置を上下左右変え放題！
flexboxの各要素の簡単な解説。詳しい解説が知りたい場合は、わたしのサイトのリンクのページのホームページ作成の欄から好きなサイトに飛んで勉強してください。

display: flex;
以上が、flexbox使いますよと定義する記述。

flex-direction: column;
これが、基本的な並び方をどうするか決める文章。コラムだと縦並び。rowだと横並び。

flex-wrap: wrap;
端まで行ったら折り返して次の段に行くかどうか。ラップだと行く、nowrapだと折り曲げずに意地を張る。
以上が、基本的なフレックスボックスの大外枠の記述。
以下から、小枠の方の記述に移ります。

flex-grow: 1;
このグローが、並べた後で余白が出た場合に、その余白を既存の枠におすそ分けして膨らませるかどうかの命令。
１だとおすそ分けする、０だとしない。２とかだと倍々に膨らませる。この枠だけ大きくって時に使う。

flex-shrink: 1;
このシュリンクは、画面がすごく狭くなった時に枠そのものを縮小させるかどうかの記述。
１だと画面に合わせて小さくする、０だとテコでも動かん！！　２以上だと倍々に小さくさせる。

flex-basis: 50%;
これは普通のHTMLでいうWIDTH指定。flexboxの枠の場合はこの記述で幅や高さ指定をした方がよりレスポンシブルになる！
かと言って普通にwidth: ○○％;と書いても効かないわけではない。
よく分かんなかったら、まずはflex-basis:auto;でページそのものを完成させて、そこから50%とかに変えて調整してみるとやりやすい。

height: auto;
高さ指定。

order: 9999;
枠の順番を自由に入れ替えるための記述。１番目にもっていきたいなら１を。
後は、classの属性は大半のタグに設定できるとか、<span>タグはそれ自体には意味がないけど、classで属性設定して文字の色変えたり大きさ変えたりする時に大活躍するとかを覚えておけば大体ＯＫ。
class="スタイルシート内の指定カテゴリ"には、半角スペースで間をあけることにより複数指定できることも記憶必須。class="指定A 指定B 指定C……"という風にできる。

あと、flexboxの場合は
.waku_cm3d2modcloth1:first-child {

～１番目の枠の内容を書く～

}
.waku_cm3d2modcloth1:nth-child(2) {

～２番目の枠の内容を書く～

}
.waku_cm3d2modcloth1:nth-child(even) {

～偶数枠の内容を書く～

}
.waku_cm3d2modcloth1:nth-child(odd) {

～奇数枠の内容を書く～

}

――等、チャイルド要素を覚えるとさらに柔軟にflexboxで思った通りのデザインができるようになりますよ！
完成サンプルは、このわたしの個人サイトそのものです。ソース見てくれれば理解ります。

@media all and (-ms-high-contrast: none){/*IEの時だけこれを適用するっていう囲い*/
.flex_cm3d2modcloth1 {

～ＩＥ用は別のdisplay方式に変える～

}
.waku_cm3d2modcloth1 {

～ＩＥ用は別のdisplay方式に変える～

}
}

IEはCSS3のflexboxとかでwrapの命令無視して画面を横に突き破ってデザインぶっ壊れて吹っ飛ぶ場合が多い。ちゃんと対応してくれー！
――ので、もうIEだけ全てのdivを

display: inline-block;
box-sizing: border-box;
max-width: 100%;

にした方が精神衛生上良い場合がある。四苦八苦し続けるよりは。