Step.8 見出しとアウトラインについてとCSS縦横幅の最小値最大値の設定とページ内リンクについて
見出しをつけよう
種類分けをしたならせっかくだし見出しつけたほうがもっとわかりやすいじゃない。
パソコンを使用するのに、タイピングは必要不可欠です。このタイピングは練習すればするほど早くなりますが、その上でいくつかのコツがあります。
キーボード一つ一つのキーに、それぞれ左右どちらの手のどの指で押すと良い、といったポジションが存在します。人差し指一本や人差し指と中指だけで十分タイピングが速い人も中にはいますが、このポジションを守れば、不必要に手が動くことなくタイピングができるので、手が疲れづらく、またスピーディーにタイピングが行えます。
日本語には変換がほぼ必要となります。この変換をスムーズに行えるかどうかも文字を早く打つコツの一つです。変換をスピーディーにする方法として、辞書機能の有効活用も良いのですが、ここではあえて辞書にデフォルトで設定されている自動学習機能をOFFにすることを勧めます……
パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは….
<h1>要素が一番大きな見出しで、<h2>が1つ下のレベルの見出し。といった感じに「h」の横の数値が減るごとにレベルが下がって、<h6>まで存在するよ
<h1>パソコン操作のスピードアップ指南</h1> <h2>タイピングを早くするためのコツ</h2> <p>パソコンを使用するのに、タイピングは必要不可欠です。このタイピングは練習すればするほど早くなりますが、その上でいくつかのコツがあります。</p> <h3>ポジションを守ろう。</h3> <p>キーボード一つ一つのキーに、それぞれ左右どちらの手のどの指で押すと良い、といったポジションが存在します。人差し指一本や人差し指と中指だけで十分タイピングが速い人も中にはいますが、このポジションを守れば、不必要に手が動くことなくタイピングができるので、手が疲れづらく、またスピーディーにタイピングが行えます。</p> <h3>変換を覚えよう。</h3> <p>日本語には変換がほぼ必要となります。この変換をスムーズに行えるかどうかも文字を早く打つコツの一つです。変換をスピーディーにする方法として、辞書機能の有効活用も良いのですが、ここではあえて辞書にデフォルトで設定されている自動学習機能をOFFにすることを勧めます......</p> <h2>パソコンの操作で覚えておくべきショートカットキー</h2> <p>パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは....</p>
メルちゃんのページでは<h1>に「レシピ一覧」として、<h2>に「デザート」とか「煮物類」とかいったように分けたらいいんじゃない?
あとは適当にそれぞれの見出しにCSSで装飾を付ければいいよ。
<!doctype html> <html> <head> <title>メルちゃんの素敵なサイト★</title> <link rel="stylesheet" href="style.css"> </head> <body> <header><p>メルちゃんの素敵なサイト★</p></header> <main> <h1>レシピ一覧</h1> <h2>オムライス</h2> <a href=""><img src="image/demo3.jpg"></a> <h2>パスタ</h2> <a href=""><img src="image/demo6.jpg"></a> <a href=""><img src="image/demo4.jpg"></a> <h2>添え物</h2> <a href=""><img src="image/demo5.jpg"></a> <h2>デザート</h2> <a href=""><img src="image/demo1.jpg"></a> <a href=""><img src="image/demo2.jpg"></a> </main> <footer id="main1"><p>コピーライト</p></footer> </body> </html>
header,main,footer { display:block; width:1000px; margin:0px auto; } header { background:#ffb0c6; height:180px; font-size:20px; font-weight:bold; } main { background:#ffffff; height:400px; } footer { background:#ffb0c6; height:50px; } body { margin:0px; color:#9e2634; font-size:14px; line-height:23px; background:#fff7de; font-family:'MS ゴシック'; } p { padding:10px; margin:0px; }
一番上の変な余白は margin の相殺とやらとして、下側おかしくない?
じゃなくて!下側なんなの?突き出ちゃってるんだけど!何がおかしいの?私何か変なことした?
見出しはちゃんと問題なくできているよ。
CSSの縦幅横幅の中身が飛び出る対処・最少or最大幅の指定をしよう
最初に縦幅400pxに指定したのは<main>要素がある程度縦幅ないとデザイン的におかしいと思ったから入れただけなんだ。高さ指定を一切なくしてしまえばこれは解決するよ。
header,main,footer { display:block; width:1000px; margin:0px auto; } header { background:#ffb0c6; height:180px; font-size:20px; font-weight:bold; } main { background:#ffffff; } footer { background:#ffb0c6; height:50px; } body { margin:0px; color:#9e2634; font-size:14px; line-height:23px; background:#fff7de; font-family:'MS ゴシック'; } p { padding:10px; margin:0px; }
header,main,footer { display:block; width:1000px; margin:0px auto; } header { background:#ffb0c6; height:180px; font-size:20px; font-weight:bold; } main { background:#ffffff; min-height:400px; } footer { background:#ffb0c6; height:50px; } body { margin:0px; color:#9e2634; font-size:14px; line-height:23px; background:#fff7de; font-family:'MS ゴシック'; } p { padding:10px; margin:0px; }
あと、反対に縦幅横幅の最大値を指定しておけるプロパティが max-width と max-height だよ。最小値のほうと併用もできるからね。
あとで好きなCSSに変えればいいよ。
アウトラインとセクショニングについて
パソコンを使用するのに、タイピングは必要不可欠です。このタイピングは練習すればするほど早くなりますが、その上でいくつかのコツがあります。
キーボード一つ一つのキーに、それぞれ左右どちらの手のどの指で押すと良い、といったポジションが存在します。人差し指一本や人差し指と中指だけで十分タイピングが速い人も中にはいますが、このポジションを守れば、不必要に手が動くことなくタイピングができるので、手が疲れづらく、またスピーディーにタイピングが行えます。
日本語には変換がほぼ必要となります。この変換をスムーズに行えるかどうかも文字を早く打つコツの一つです。変換をスピーディーにする方法として、辞書機能の有効活用も良いのですが、ここではあえて辞書にデフォルトで設定されている自動学習機能をOFFにすることを勧めます……
パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは….
1.パソコン操作のスピードアップ指南(<h1>) 1.タイピングを早くするためのコツ(<h2>) 1.ポジションを守ろう(<h3>) 2.変換を覚えよう(<h3>) 2.パソコンの操作で覚えておくべきショートカットキー(<h2>)
で、このアウトラインに関わってくる要素がいくつかあるわけなのね。その一つが<section>要素なの。
これを使うことによって見出しタグが、どこからどこまでの内容に対しての見出しなのかっていうのを明確にさせることで、アウトラインをしっかり作ってくれるよ。
<section> <h1>パソコン操作のスピードアップ指南</h1> <section> <h2>タイピングを早くするためのコツ</h2> <p>パソコンを使用するのに、タイピングは必要不可欠です。このタイピングは練習すればするほど早くなりますが、その上でいくつかのコツがあります。</p> <section> <h3>ポジションを守ろう。</h3> <p>キーボード一つ一つのキーに、それぞれ左右どちらの手のどの指で押すと良い、といったポジションが存在します。人差し指一本や人差し指と中指だけで十分タイピングが速い人も中にはいますが、このポジションを守れば、不必要に手が動くことなくタイピングができるので、手が疲れづらく、またスピーディーにタイピングが行えます。</p> </section> <section> <h3>変換数を覚えよう。</h3> <p>日本語には変換がほぼ必要となります。この変換をスムーズに行えるかどうかも文字を早く打つコツの一つです。変換をスピーディーにする方法として、辞書機能の有効活用も良いが、ここではあえて辞書にデフォルトで設定されている自動学習機能をOFFにすることを勧めます......</p> </section> </section> <section> <h2>パソコンの操作で覚えておくべきショートカットキー</h2> <p>パソコンのソフトウェアの殆どにショートカットキーというものが存在します。これらは....</p> </section> </section>
あと、アウトラインは見出しタグを使えば暗黙で作られるから<section>要素を使用しなくても大丈夫らしいけど、あんまり過信しすぎるのもよくないとか色んな意見あるからもうどうでもよくなったよ
<article>とかね。これは一つの記事ですよ。といった意味になるんだ。
ブログとかだったら1つ分の記事がこれになるね。
普通のサイトならば<main>要素とほぼ一緒かな。サイトのメイン内容の部分になるよ。ただ、<main>要素はアウトラインに関わり持たないから<article>と併用して使わないとだけどね。
はて、メルちゃんのサイトでとりあえずやってみようか。あと、ついでにサイトのタイトルは<h1>要素使って書くことが多いから<h1>要素に変えておくね。
<!doctype html> <html> <head> <title>メルちゃんの素敵なサイト★</title> <link rel="stylesheet" href="style.css"> </head> <body> <header><h1>メルちゃんの素敵なサイト★</h1></header> <main> <article> <h1>レシピ一覧</h1> <section> <h2>オムライス</h2> <a href=""><img src="image/demo3.jpg"></a> </section> <section> <h2>パスタ</h2> <a href=""><img src="image/demo6.jpg"></a> <a href=""><img src="image/demo4.jpg"></a> </section> <section> <h2>添え物</h2> <a href=""><img src="image/demo5.jpg"></a> </section> <section> <h2>デザート</h2> <a href=""><img src="image/demo1.jpg"></a> <a href=""><img src="image/demo2.jpg"></a> </section> </article> </main> <footer id="main1"><p>コピーライト</p></footer> </body> </html>
しっかし、画像のサイズ揃ってないなぁ。こういう並べる画像は横幅縦幅きれいにそろえた方がステキよ?
id属性を使ったページ内リンク
メルちゃんはページ内リンクって見たことある?
リンクされているテキストとか画像をクリックしたら、同じページ内のスクロールされた下部のほうに飛ぶ、みたいな
一番上の目次をクリックしたらそれぞれの見出しのところへ勝手にスクロールされるようになっているよ。
これがページ内リンクって言うんだ。
メルちゃんそれぞれの<h2>要素にID名を付けて行って。
覚えてるかな?IDは同じ名前を使っちゃだめだからね。
<!doctype html> <html> <head> <title>メルちゃんの素敵なサイト★</title> <link rel="stylesheet" href="style.css"> </head> <body> <header><h1>メルちゃんの素敵なサイト★</h1></header> <main> <article> <h1>レシピ一覧</h1> <section> <h2 id="omurice">オムライス</h2> <a href=""><img src="image/demo3.jpg"></a> </section> <section> <h2 id="pasta">パスタ</h2> <a href=""><img src="image/demo6.jpg"></a> <a href=""><img src="image/demo4.jpg"></a> </section> <section> <h2 id="garnish">添え物</h2> <a href=""><img src="image/demo5.jpg"></a> </section> <section> <h2 id="desert">デザート</h2> <a href=""><img src="image/demo1.jpg"></a> <a href=""><img src="image/demo2.jpg"></a> </section> </article> </main> <footer id="main1"><p>コピーライト</p></footer> </body> </html>
リンクの方は<a>要素を使うよ。
<a href=”#omurice”>オムライス一覧へ</a>といったように、URLのところに#を頭につけてID名を入れるんだ。
<!doctype html> <html> <head> <title>メルちゃんの素敵なサイト★</title> <link rel="stylesheet" href="style.css"> </head> <body> <header><h1>メルちゃんの素敵なサイト★</h1></header> <main> <article> <h1>レシピ一覧</h1> <p><a href="#omurice">オムライス一覧へ</a></p> <p><a href="#pasta">パスタ一覧へ</a></p> <p><a href="#garnish">添え物一覧へ</a></p> <p><a href="#desert">デザート一覧へ</a></p> <section> <h2 id="omurice">オムライス</h2> <a href=""><img src="image/demo3.jpg"></a> </section> <section> <h2 id="pasta">パスタ</h2> <a href=""><img src="image/demo6.jpg"></a> <a href=""><img src="image/demo4.jpg"></a> </section> <section> <h2 id="garnish">添え物</h2> <a href=""><img src="image/demo5.jpg"></a> </section> <section> <h2 id="desert">デザート</h2> <a href=""><img src="image/demo1.jpg"></a> <a href=""><img src="image/demo2.jpg"></a> </section> </article> </main> <footer id="main1"><p>コピーライト</p></footer> </body> </html>
さて、次回はページを量産する前にページのデザインを決め終えてしまおうか。
次回はCSS回だよ。メルちゃん大歓喜だね。