こんにちは やはです
前回の内容は簡単でしたか？
前回のところでなんとなくホームページの構成が
頭に浮かんだ方もいらっしゃるのではないでしょうか？
先に文章を考えておくと
ホームページのデザインの際に
具体的なイメージが沸きやすくなるので
慣らし運転がてらどんどん入力していくといいですよ
- CSSを適用させよう
- ３つの適用方法
それでは今回も頑張っていきましょう
まずは前回の続きをしていきましょう
文章を追加していきます
このように少し文章を追加してみました
ウェブ上で確認してみましょう
このように表示されれば成功です
失敗例もみてみましょう
次の画像でどこが失敗しているか見てみましょう
どこが失敗しているかわかりますか？
コードを見てみましょう
この部分が間違っていますわかりますか？
</h2> → /h2>
このように「<」が消えていますね
HTMLはタグを間違えたとしても
エラーが出るわけなく
その部分をけしたり、範囲を変えたりして
表示を行なってくれます
なのでエラーが出たからといって
パソコンが壊れるなんてことはありません、安心してください
今回のようにコードを間違えた時は
うまく表記できていない場所のコードを見直すといいですよ
余裕がある時にタグの一部を消して
どのように表示されるか確認しておくといいでしょう
それでは次からはCSSと呼ばれるファイルをつけてきましょう
CSSって？
Cascading Style Sheets （カスケーディング・スタイル・シート）
の略語となります
選択したHTMLのタグにデザインを適用させます
CSSは文字のサイズや色を変えたり
背景に色をつけたり画像を入れたりすることができます
また範囲を指定してその範囲の並び方を変えたりと
様々な事が行えます
CSSは前回もお話しした通り多量な種類があります
なので少しずつ扱える範囲を広げていきましょう
CSSの適用方法は３つあります
- タグにスタイルをつけて適応させる（スタイル属性）
- <head>内にスタイルをタグを作り適応させる（スタイル要素）
- 別ファイルでCSSファイルを作成する（link要素）
１つずつみていきましょう
- タグにスタイルをつけて適応させる
HTMLで打ち込んでいただいたタグ
実はこちらにはスタイルというものを追加で打ち込む事ができます
文章ではわかりにくいので
したの<p>に実際にスタイルを適応させてみましょう
このように打ち込んでみましょう
<p> → <p style="font-size: 30px">
こちらの style~~の部分がスタイルの適応とその内容になります
<p>の文章、このスタイルを適応させる
という事です
ちなみに
font-size:30px
こちらは文字サイズを30pxを適応させるという意味です
ウェブ上に表示してみましょう
こうなります
文字がでかくなりました
このように特定HTMLタグにスタイルを適応させることを
スタイル属性
と言われます、覚えておきましょう
- <head>内にスタイルをタグを作り適応させる（スタイル要素）
次は<head>内にスタイルをタグを作るやり方です
スタイル属性は指定したタグのみの指定でした
ですが、それだと１つ１つにスタイルを適応させないとダメで
とても大変です
なので次は、HTML内全体にスタイルつけていく方法を覚えましょう
<head>内にスタイルのタグを作ります
次はこの中に適応させるスタイルを作っていきましょう
今回も同様に<p>に適応させます
このように指定するタグを書き出し
そこに{ }をつけ、中に適応させるスタイルを打ち込みます
p{ font-size:10px}
このように記入しましょう
{ }に囲まれた内容が適応範囲となります
今回は適応させる<p>の文字を小さくしてみました
確認してみましょう
こう表示されれば成功です
最初に指定したスタイル属性もpなのに大きいままですね？
これは後ほど説明しますので、このまま進めましょう
このスタイル適応方法をスタイル要素といいます
このようにHTML内の全ての<p>に適応させる事ができます
コード内で文字を追加してみましょう
ここに打ち込んでみました
確認してみましょう
このようになります
スタイルでフォントサイズを指定しているため
HTML内でかかれていく<p>は全てフォントサイズが適応されます
それでは次にいきましょう
- 別ファイルでCSSファイルを作成する（link要素）
最後はこちらです
- CSSは３つの方法で適応させる
- CSSは優先順位があるので使い方を気をつける
- CSSファイルを作って適用させるのが一般的
CSSの使い方は様々ですが
ホームページをデザインするために欠かせない機能です
しっかり学んでいきましょう
自分でどんなスタイルがあるか、どんなデザインがあるか調べると
どんどん楽しくなってきます
CSSは覚えれば覚えるほどたくさんのデザインを作るのことが
できます、自習に損はありませんので積極的に行なっていきましょう
今日もお疲れ様でした
やはでした！！
よくわかるHTML5+CSS3の教科書【第3版】
Amazon（アマゾン）
3,080〜8,927円
私はこちらの参考書を使って勉強していきました。
テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが
一番のポイントかと思います。もし自分でもどんどん学習したいのであれば
数ある参考書の１つの目安として考えてもいいかもしれません。