『スタートHTML５＋CSS３ Vol.8』つまづきポイントID属性編

こんにちは　　やはです

前回はCSSのプロパティについてお話ししました

ちょっとずつ難しくなってきましたが、大丈夫でしょうか？

しかし安心してください

難しいのは最初の覚え始めだけで

なれてくると自然とコードを打ち込めるようになります

前にもお話しした通り

プログラミングはテストではありません

思い出せない場合

わからない場合

こういう時はウェブサイトで調べる事ができます

プロパティがあった事だけ覚えていれば何とでもなります

なので、覚えられなくて落ち込んでる方も

気にせず頑張っていきましょう

1人でホームページができるようになってくると

クリエイターの気持ちになってとても楽しくなりますよ

頑張りましょう！

それでは始めていきます

• ID属性を覚えよう

今回はこの内容でお話ししていきます

よく使います、しっかり覚えていきましょう

• ID属性を覚えよう

このID属性というものは

要素に対して固有の名前をつけていく属性になります

要素とは

<h1>

<p>

このあたりが今皆様が勉強で使ってきた要素ですね

つまり、この要素に固有の名前をつけるのがID属性というものです

言葉だけでは難しいですよね、画像を見ながら説明していきます

まずは<p>に対してスタイルをつけていきましょう

フォントの色を指定するスタイル

colorで赤色を指定します

ウェブで確認しましょう

赤色がつきましたね

ここは皆様が今まで勉強した所です

しかし、このプロパティの設定だと

全ての<p>タグに赤色が適用されてしまいます

これはとても不便です

では、どうするか？ID属性を使います

まずは先ほど書いた<p>のプロパティを消しましょう

真っ黒になりました

では,「Vol.」にID属性をつけて、そこだけ色を指定しましょう

わかりやすくするために周りの間隔を開けておきました

ID属性をつける場合はこのように記入します

わかりますか？

<p> Vol.1 </p>

この部分を

<p id="mozi"> Vol.1 </p>

と、赤文字のコードを追加しました

これで、ID属性の「mozi」というものが作成されました

ID属性をつける事により、この<p>のみにCSSを適用させる事ができます

ID属性「mozi」に色をつけてみましょう

CSSでのIDは『＃mozi』と書きます

「＃」はHTMLのIDという意味になります、覚えておきましょう

先ほどと同じ、フォントカラーを赤色に指定しています

しかし、先ほどと違う部分がありますね

<p>の部分をID属性「#mozi」と変更しました

ウェブサイトで確認してみましょう

このように表示されました

ID属性をつけた「Vol.1」のみにスタイルが適用されましたね

このように部分的にスタイルを指定したい時に、ID属性を使います

更に、ID属性は他の汎用的な指定をしている

スタイルの上から上書きをします

<p>に緑色にフォントを指定してみましょう

ウェブで確認すると？

こうなりました

これは、ID属性がかかった部分にスタイルが

適用されていないわけではなく

全体<p>のスタイルの上から

ID属性「#mozi」が適用されて上書きされているのです

打ち消してるわけではなく、上書きです

ここがわかっていないとこの先とても大変です

しっかり理解しておきましょう

このように、部分的にスタイルをつけたい場合にはID属性を使って

その場所だけに別のスタイルをつけていく事ができます

ID属性の注意点として

• 同じファイル（HTML）内で同じID属性名は付けれない
• ID属性名は英字から始まれば任意の名前をつける事ができる
• 大文字と小文字の区別があるので、しっかり合わせる
• 打ち消しではなく、上書き

です

• 同じファイル（HTML）内で同じID属性名は付けれない

同じファイルの中で同名のID属性を使う事ができません

同じスタイルを指定したい場合

次回お伝えする「CLASS属性」

こちらを使っていく事になります

なので、１つのタグに対して１度だけID属性がつけれると

覚えておいてください

ただ、同じ属性名が使えないだけで

id="mozi1"

id="mozi2"

のように

数字をつけたりして分別することは可能です

この場合、数字が違うので違うID属性という事になります

• ID属性名は英字から始まれば任意の名前をつける事ができる

ID属性の名前は任意でつける事ができます

極端な話

id="yahalife"

このようにつけることも可能です

ですが、この先たくさんのID属性を使用していきますので

できるだけ自分がわかるように名前をつけていくといいでしょう

<h1 id="title"> タイトル </h1>

こうするとわかりやすくていいですよね

• 大文字と小文字の区別があるので、しっかり合わせる

ID属性は大文字と小文字で、全く別のID名になります

id="mozi"

id="Mozi"

このように「M」が大文字になることで

全く違う属性名となります

よくこの文字列が違うことで

スタイルが適用しない時があります

文字列が間違ってないか確認してみてください

• 打ち消しではなく、上書き

これはもう少し慣れてからお伝えします

今回は同じフォントカラーなので

ID属性のカラーが優先されました

しかし、<p>が太文字を指定していた場合

#moziは<p>の太文字が適用されて

#moziのフォントカラーが適用されます

なぜかというと

#moziはID属性ですが

タグとして<p>がついているからです

難しいですよね？もう少しID属性に慣れてから覚えていきましょう

今日のまとめ

• ID属性をつけることで部分的にスタイルを適用させる事ができる
• ID名は１ファイルに１つだけ
• IDは任意の名前をつける事ができる
• 大文字、小文字の区別がある
• 打ち消しではなく、上書き

今回はいかがでしたか？

難しかったんではないでしょうか

ここは、勉強を進めていく上でつまづきポイントになります

次回お伝えするクラス属性というものが合わさると

どんどん頭がぐちゃぐちゃになっていきます

しかし、文頭でもお話しした通り

よく使う属性ですので、使っている内に勝手がわかります

安心してください

この属性を使えるようになれば

CSSのスタイルの幅がとても広がります

難しいと思っている皆様

それだけ脳が成長している証拠です

めげずにどんどん脳を成長させてあげましょう

独学で頑張っている自分をたくさん褒めてあげて

自分の人生をどんどん広めていきましょう！

今日もお疲れ様でした

やはでした！！

よくわかるHTML5+CSS3の教科書【第3版】

私はこちらの参考書を使って勉強していきました

テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが

一番のポイントかと思います

もし自分でもどんどん学習したいのであれば

数ある参考書の１つの目安として考えてもいいかもしれません

『スタートHTML５＋CSS３ Vol.7』コード覚えよう編4

こんにちは　　やはです

前回はCSSのプロパティについてお話ししました

ちょっとずつ難しくなってきましたが、大丈夫でしょうか？

しかし安心してください

難しいのは最初の覚え始めだけで

なれてくると自然とコードを打ち込めるようになります

前にもお話しした通り

プログラミングはテストではありません

思い出せない場合

わからない場合

こういう時はウェブサイトで調べる事ができます

プロパティがあった事だけ覚えていれば何とでもなります

なので、覚えられなくて落ち込んでる方も

気にせず頑張っていきましょう

1人でホームページができるようになってくると

クリエイターの気持ちになってとても楽しくなりますよ

頑張りましょう！

それでは始めていきます

• ID属性を覚えよう

今回はこの内容でお話ししていきます

よく使います、しっかり覚えていきましょう

• ID属性を覚えよう

このID属性というものは

要素に対して固有の名前をつけていく属性になります

要素とは

<h1>

<p>

このあたりが今皆様が勉強で使ってきた要素ですね

つまり、この要素に固有の名前をつけるのがID属性というものです

言葉だけでは難しいですよね、画像を見ながら説明していきます

まずは<p>に対してスタイルをつけていきましょう

フォントの色を指定するスタイル

colorで赤色を指定します

ウェブで確認しましょう

赤色がつきましたね

ここは皆様が今まで勉強した所です

しかし、このプロパティの設定だと

全ての<p>タグに赤色が適用されてしまいます

これはとても不便です

では、どうするか？ID属性を使います

まずは先ほど書いた<p>のプロパティを消しましょう

真っ黒になりました

では,「Vol.」にID属性をつけて、そこだけ色を指定しましょう

わかりやすくするために周りの間隔を開けておきました

ID属性をつける場合はこのように記入します

わかりますか？

<p> Vol.1 </p>

この部分を

<p id="mozi"> Vol.1 </p>

と、赤文字のコードを追加しました

これで、ID属性の「mozi」というものが作成されました

ID属性をつける事により、この<p>のみにCSSを適用させる事ができます

ID属性「mozi」に色をつけてみましょう

CSSでのIDは『＃mozi』と書きます

「＃」はHTMLのIDという意味になります、覚えておきましょう

先ほどと同じ、フォントカラーを赤色に指定しています

しかし、先ほどと違う部分がありますね

<p>の部分をID属性「#mozi」と変更しました

ウェブサイトで確認してみましょう

このように表示されました

ID属性をつけた「Vol.1」のみにスタイルが適用されましたね

このように部分的にスタイルを指定したい時に、ID属性を使います

更に、ID属性は他の汎用的な指定をしている

スタイルの上から上書きをします

<p>に緑色にフォントを指定してみましょう

ウェブで確認すると？

こうなりました

これは、ID属性がかかった部分にスタイルが

適用されていないわけではなく

全体<p>のスタイルの上から

ID属性「#mozi」が適用されて上書きされているのです

打ち消してるわけではなく、上書きです

ここがわかっていないとこの先とても大変です

しっかり理解しておきましょう

このように、部分的にスタイルをつけたい場合にはID属性を使って

その場所だけに別のスタイルをつけていく事ができます

ID属性の注意点として

• 同じファイル（HTML）内で同じID属性名は付けれない
• ID属性名は英字から始まれば任意の名前をつける事ができる
• 大文字と小文字の区別があるので、しっかり合わせる
• 打ち消しではなく、上書き

です

• 同じファイル（HTML）内で同じID属性名は付けれない

同じファイルの中で同名のID属性を使う事ができません

同じスタイルを指定したい場合

次回お伝えする「CLASS属性」

こちらを使っていく事になります

なので、１つのタグに対して１度だけID属性がつけれると

覚えておいてください

ただ、同じ属性名が使えないだけで

id="mozi1"

id="mozi2"

のように

数字をつけたりして分別することは可能です

この場合、数字が違うので違うID属性という事になります

• ID属性名は英字から始まれば任意の名前をつける事ができる

ID属性の名前は任意でつける事ができます

極端な話

id="yahalife"

このようにつけることも可能です

ですが、この先たくさんのID属性を使用していきますので

できるだけ自分がわかるように名前をつけていくといいでしょう

<h1 id="title"> タイトル </h1>

こうするとわかりやすくていいですよね

• 大文字と小文字の区別があるので、しっかり合わせる

ID属性は大文字と小文字で、全く別のID名になります

id="mozi"

id="Mozi"

このように「M」が大文字になることで

全く違う属性名となります

よくこの文字列が違うことで

スタイルが適用しない時があります

文字列が間違ってないか確認してみてください

• 打ち消しではなく、上書き

これはもう少し慣れてからお伝えします

今回は同じフォントカラーなので

ID属性のカラーが優先されました

しかし、<p>が太文字を指定していた場合

#moziは<p>の太文字が適用されて

#moziのフォントカラーが適用されます

なぜかというと

#moziはID属性ですが

タグとして<p>がついているからです

難しいですよね？もう少しID属性に慣れてから覚えていきましょう

今日のまとめ

• ID属性をつけることで部分的にスタイルを適用させる事ができる
• ID名は１ファイルに１つだけ
• IDは任意の名前をつける事ができる
• 大文字、小文字の区別がある
• 打ち消しではなく、上書き

今回はいかがでしたか？

難しかったんではないでしょうか

ここは、勉強を進めていく上でつまづきポイントになります

次回お伝えするクラス属性というものが合わさると

どんどん頭がぐちゃぐちゃになっていきます

しかし、文頭でもお話しした通り

よく使う属性ですので、使っている内に勝手がわかります

安心してください

この属性を使えるようになれば

CSSのスタイルの幅がとても広がります

難しいと思っている皆様

それだけ脳が成長している証拠です

めげずにどんどん脳を成長させてあげましょう

独学で頑張っている自分をたくさん褒めてあげて

自分の人生をどんどん広めていきましょう！

今日もお疲れ様でした

やはでした！！

よくわかるHTML5+CSS3の教科書【第3版】

『私の体験した投資』投資の知識をつけていこう 投資という考え方

こんにちは　　やはです

私のブログをプログラミングの勉強ブログ

そう思っている方がほぼ全員じゃないかと思います

ですが！

ここは私が勉強した事や

興味ある事を雑多に書くブログです

これからは、私が行なっている投資を

結果も交えながら記事にあげていきたいと思います

私の記事をみて、興味を持ったり

自分にもできるかと思ってもらえれば幸いです

もちろん、興味はあるけどやり方がわからない

1人で進めていくのは不安などあれば

ご連絡くださればご一緒に進めていくことも可能です

それではまず、投資について考えていきましょう

今回は投資についての記事となります

• ダブルワークという働き方、考え方
• 投資とは
• 投資の相性

政府からのダブルワーク推進を受け

現在の会社だけに依存しない収入源を

という事で

新しい稼ぎ方が世の中に普及されてきました

しかし、ダブルワークを行うにも色々と難しい部分もあります

• 本業の後に時間がない

ダブルワークでアルバイトをするには

まず時間通り本業を終わらせる必要があります

しかし、月の残業が多い仕事をされている方も

いらっしゃるんじゃないでしょうか？

そんな方にダブルワークを進めるのはかわいそう

終わるのが遅いのにそこからさらに働くなんて・・・

と、私は思います

• 本業で疲れているから辛い

このような方達もいますね

稼いでいる方達からすると甘えるなって思うかもしれません

ただ、普通に考えると労働時間を増やすのは辛い所ですよね

頑張って仕事を定時で終わらせてそこから働きに出る

別の仕事で残業するために頑張っているみたいな状態ですよね

そもそも、自分の時間を犠牲にしてまで働くものなのでしょうか？

私は、お金より時間が大事だと思っています

もちろん使えるお金は多いに越した事はありません

しかし、それは時間があってなお、お金があればというわけで

時間がある事が前提条件です

もちろん

仕事が好き！働くのが好き！

そういう方たちもいらっしゃいますね

そういった方達はとても素晴らしいと思います

自分が好きと思える仕事を見つける事ができた方達なので

そういった方達は

遅かれ早かれ、お金も時間も手に入れる事ができると思います

しかし、自分がやりたくない事を時間を使ってお金を稼ぐのであれば

それは無理にやる必要はないと思います

そういった方達にむけて、少しずつ記事を進めていきます

あくまで私的意見なので参考までに

• 投資とは

投資を行う事でお金でお金を稼ぐ事ができます

自分ではなく、お金が働いてくれるわけですね

お金でお金を稼ぐ？

どういう事でしょうか

お金は消費する物だと思っているんではないでしょうか？

その通り

お金は使うための物です

• 物を買うためにお金を消費する

これが普段の使い方ですね

このお金の使い方ができないという方はいらっしゃらないと思います

しかしお金にはまた別の使い道があるんです

• お金を使用してお金を増やす

これが冒頭にも述べた

お金でお金を稼ぐという事です

お金でどうやって稼ぐの？

そう思いますよね

これが世間でよく言われている

投資

というものになります

投資という言葉は聞いた事ありますよね

皆様、投資についてどれくらいの知識がありますか？

株式投資、FX　外貨預金、IDECO、仮想通貨、等々

今現在はたくさんの投資方法が溢れています

それ１つ１つに長所も短所もありますね

１つ１つの長所と短所を知り

自分の時間軸にあった投資を行う事が最善だと思います

• 投資の相性

１つ例を出してみましょう

今回の例は株式投資を使いますので

まず株式投資についてお話ししましょう

株式投資というのは

上場企業が持っている株を売買する株式市場で

株の取引を行うものです

投資で一番耳にする株という用語が出てきましたね

それでは、株とは何でしょうか？

簡単にいうと

会社の価値を分割した物

といった所でしょうか

１万円の価値がついた会社があるとします

その会社が１００株の発行を行いました

そうすると１枚の株は１００円ほどの価値になります

ちょっとだけわかりやすくなりました？

つまりは会社の価値を分割して持つ事ができ

それを表すために株という用語を使うわけですね

株についてはまだまだありますが

今は例題のための話なのでこれだけにしておきましょう

株の売買を行うには

株式市場の開場している時間帯で取引を行う必要があります

株式市場の開場時間は

午前9時から午後3時です

下記の就業時間で働く会社員の場合をみてみましょう

• 朝9時から夕方6時までの就業時間の方が株式投資を行なった場合

日本では一般的な就業時間ではないでしょうか？

多くの企業はこの時間での就業を規則にされてるかと思います

会社員の働く時間が午前9時から午後6時

株式市場開場時間が午前9時から午後3時

字の通り

就業時間と開場時間が被っていますね

その場合

一般的な会社員の株式取引の行える時間は昼休憩の間

くらいになりますね

そう考えると

相性がいいとは言い切れませんよね

もちろん、株式の売買は予約等々できますので

朝や夜、昼休みに入念にチェックを行い

予約機能を使って売買で利益をあげている方もたくさんいらっしゃいます

ただ一般的に考えると

というお話しになります

そうなると会社員には投資は難しいのでしょうか？

そんなことはありません

よく名前の上がる投資の１つに株とは別でFXと言われるものもあります

こちらは外貨の交換を行う投資ですが

FXは世界を対象にしているので

基本的に２４時間の取引が可能です

株式よりはまだ相性がいいですよね

このように自分にあった投資を行う事が

投資を行う上でとても大切です

後は投資を行う資金も重要です

投資を行う際に大事なのは精神性です

投資に回したお金の増減で一喜一憂してしまう

そんな投資は避けていくべきでしょう

金額を大きくかけて精神的に不安定になると

大きな損失をうける可能性があります

ここに関しては今後、私の記事の中で

少しずつ話していければと思います

今日のまとめ

• やりたい仕事ならダブルワークでもOK
• 時間を使ってお金を稼ぐだけが全てじゃない
• 自分にあった投資スタイルを考える

少しは投資について理解できました？

といっても詳しいことはまだまだ話ししていないのでわかりませんよね

本業を頑張ることはとても大事です

そこにダブルワークをかけることはとても素晴らしいことだと思います

しかし、もしそのダブルワークにかける時間が

自分が望んでいる時間でないのであれば

もしくは、お金を稼ぐだけのために仕方なく労働しているのであれば、

投資

という別の収益のあげ方もあると思っておいてください

私の情報で少しでも皆様の暮らしが豊かになれば幸いです

今日もお疲れ様でした

やはでした！！

『スタートHTML５＋CSS３ Vol.7』コード覚えよう編3

こんにちは　　やはです

CSSの使い方はなんとなく理解できましたか？

やり方は色々とありますが

基本的には１つのやり方が主流なので

迷うことなく使うことができると思います

CSSは組み合わせでたくさんの表現ができます

ぜひしっかりと勉強して使い方をマスターしていきましょう

それでは始めていきましょう

今回はこの内容です、順番に学んでいきましょう

• CSSの用語

前回何気なく使っていたCSSですが、しっかりと名称があります

画像をみながら解説していきましょう

このように名称がついています

さらに{  }にも名称があります

このような名称がついています

プロパティ名とプロパティ値を宣言

それをまとめた{  }を宣言ブロックと呼びます

１つ１つプロパティをつけていくのは非効率です

このように、宣言ブロックの中に複数の宣言を指定することで

デザインを一括で指定することができます

一括することにより、無駄なコードを増やさなくて済みます

それではCSSを適用させてウェブで確認しましょう

このように表示されます

今回は<body>にCSSを適用させています

なのでその中に入っている全てのコードに適用されました

このように<body>のなかに入っている要素を子要素と呼びます

そして、子要素を持つ要素を親要素と呼びます

この使い方はこの先も非常によく出てきます

しっかり覚えておくことでさらにコードの書き方を省略できます

• 複数のセレクタを選択

次はセレクタに関して学んでいきましょう

宣言を複数指定することにより

セレクタにデザインを一括で行える事がわかりました

実はセレクタも複数に指定する事ができます

先ほど指定したCSSのbody部分をh1に変えて

見出しにCSSを指定しましょう

宣言を横並びにしていくとわかりにくくなっていきます

このように宣言毎に段落を下げていくと

読みやすいコードになりますよ

h1に変更した後にウェブで確認してみましょう

こうなりますね

今h1に指定されているCSSは

• 背景にh1を指定
• フォントサイズが20px
• フォントカラーがトマト色

となっています

これをh3のコードに追加したい時は

このように「,」で区切りその後ろにセレクタを追加します

私は段落をつけていますが

必要なければ横並びで書いても構いません

しかし、指定するセレクタが増えていく場合は

コードを読みやすくするために

段落をつけていくといいでしょう

それではウェブで確認してみましょう

こうなりました

h2にもつけてみましょう

追加してみました、ウェブで確認しましょう

こうなりました

同プロパティを指定したい時は

１つ１つ書かずにセレクタを追加する事で

一括で適用させる事ができます

さらにHTMLの<h >のようにフォントサイズが変わっていたり

文字の太さが変わっていても

CSSのスタイルが適用されます

これにより文章の使い分けが容易になります

今日のまとめ

• CSSはプロパティを複数指定できる
• セレクタも複数指定できる
• コードはできるだけ読みやすく書いていこう

複数指定を行い、コード量を少なくする

これはとても大事な事です

慣れないうちは同じコードを何度も書いてしまいます

しかし、同じ内容をできるだけまとめる事ができれば

それだけ早く仕事を進める事ができます

また、コードは自分だけが読めればいい

というものではありません

自分一人で全てを終わらせる場合は別ですが

この先IT業界で働いていく場合

周りのメンバーと協力して仕事を行う事もあります

それ以外にも他の人の仕事を引き継いだり

自分の仕事を引き継いだり

複数人で仕事を行う事がおきてきます

その際に、読みにくいコードを書いていたらどうでしょう？

他のメンバー、引き継いだメンバーはコードを読み解く所から

始めないといけません

そうならないように、コードを読みやすくかくように心掛けておけば

作業をスムーズに行う事ができます

さらに自分で変えたい所や間違えたところを直すときも

すぐに修正箇所を発見できます

最初はガムシャラで構いませんが

慣れてきたらどうやればコードが読みやすか？

と、考えながら作業を行なっていってください

それでは今日もお疲れ様でした

やはでした！！

よくわかるHTML5+CSS3の教科書【第3版】

Amazon（アマゾン）

3,080〜8,927円

私はこちらの参考書を使って勉強していきました。

テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが

一番のポイントかと思います。もし自分でもどんどん学習したいのであれば

数ある参考書の１つの目安として考えてもいいかもしれません。

『スタートHTML５＋CSS３ Vol.6』コード覚えよう編2

こんにちは　　やはです

前回の内容は簡単でしたか？

前回のところでなんとなくホームページの構成が

頭に浮かんだ方もいらっしゃるのではないでしょうか？

先に文章を考えておくと

ホームページのデザインの際に

具体的なイメージが沸きやすくなるので

慣らし運転がてらどんどん入力していくといいですよ

• 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要素）

最後はこちらです

実際はスタイル要素と同じ書き方なのですが

こちらは別ファイルでの作成となります

同じ書き方なのにファイルを分ける必要はあるのでしょうか？

あります

先に書いてあるスタイル属性・要素

共に今開いているHTMLファイルのみに

適応されていくタグコードになります

このHTMLファイルだけで完結するホームページであれば

今の書き方でも問題はありません

しかし、ファイルが２、３つと必要な場合

同じCSSをその分だけ入力しないといけませんよね？

そうならないよう１つのファイルで終わらすために

link要素と呼ばれるものを使っていきます

link要素は、スタイル要素と同じ

<head>内にうちこみます

このように入力してください

link

このコード内のファイルを読み込みます

rel="stylesheet"

こちらはファイルの種類です

stylesheetとは、cssファイルの事です

href="style.css"

こちらはcssファイルの名前になります

relとhrefはセットになります、覚えておきましょう

こちらのコードを打ち込むことで

style.cssと呼ばれるcssファイルをこのHTMLに読み込んで適応させる

という意味になります

ですが、まだstyle.cssというファイルは作っていませんよね？

style.cssのにカーソルを合わせて

command(Ctrl) + 左クリック

をしてみてください

このような文字が出てきます

ファイルの作成を押しましょう

これで、style.cssのファイルが作成されました

HTMLファイルと同じ場所に保存させています

確認してみてください

保存されているのが確認できました？

これでcssファイルと関連づける事ができました

次は作成したcssファイルにスタイルをうちこみましょう

次はbodyに色をつけてみましょう

入力できました？

確認してみましょう

このように表示されました

簡単ですね

background-colorはタグの背景に色をつける事ができます

今回は<body>と呼ばれるHTML全体を覆っているタグに

色を指定しました

適応の仕方は同じですが

先ほどのlink要素を他のファイルに入れる事で

link要素を追加した全てのHTMLファイルに

適応させる事ができます

こちらのやり方がcssとして一般的です

それでは先ほど疑問になっていた

スタイル属性の<p>が小さくならない理由をお伝えします

cssの適応方法は３つありますが

優先順位があります

style属性＞style要素＞link要素

の順で適応される優先順位が決まります

一般的なcssが一番優先順位が低いのはなぜでしょう？

style属性、style要素はコードの確認や

一時的にスタイルの内容を変えた時のチェックに使われる事が多いからです

部分的に変えて、ホームページの適応された状態をみたいのに

ファイルを開いて直すのは大変ですよね？

逆に１つ１つに属性や、要素をつけた場合

全体を変えるとなった時は大変ですね？

そうならないように使い分けて使用できるようになっています

優先順位を見てみましょう

このように打ち込んで確認してみてください

このように

link要素よりstyle要素の方が優先されるので

色が変化しました

逆にlink要素のファイルで色を変更しても変わりません

試してみてください

それではつぎに<body>にスタイル属性をつけてみましょう

確認してみましょう

こうなります

適応の優先順位がわかりました？

この為、スタイル属性をつけた<p>は優先されて適応されるので

フォントサイズが変わらなかったというわけです

今日のまとめ

• CSSは３つの方法で適応させる
• CSSは優先順位があるので使い方を気をつける
• CSSファイルを作って適用させるのが一般的

CSSの使い方は様々ですが

ホームページをデザインするために欠かせない機能です

しっかり学んでいきましょう

自分でどんなスタイルがあるか、どんなデザインがあるか調べると

どんどん楽しくなってきます

CSSは覚えれば覚えるほどたくさんのデザインを作るのことが

できます、自習に損はありませんので積極的に行なっていきましょう

今日もお疲れ様でした

やはでした！！

よくわかるHTML5+CSS3の教科書【第3版】

Amazon（アマゾン）

3,080〜8,927円

私はこちらの参考書を使って勉強していきました。

テスト問題などもそうですが、知識０からでもわかりやすく勉強できたところが

一番のポイントかと思います。もし自分でもどんどん学習したいのであれば

数ある参考書の１つの目安として考えてもいいかもしれません。