どうも、しだゆう(@araShidayuuKi)です！
今回はLv.1の第２弾ということで、
CSSについて
ちょー簡単に説明します！！
そもそもCSSでできることと言えば、スタイリングという部分で
文字の色を変えたり、背景色を変えるなどの
見た目の部分を変更する作業となります！
メイク(化粧)をして、おしゃれな服を着て出かけるように
HTMLで作成したコードを元に、見やすくオシャレにできるのがCSSです！
ただ派手にするのではなく、伝えたい情報をしっかりと伝わりやすく工夫すること
そういった点ではHTMLよりも難しいと私は感じます。
HTMLについても前の記事で、ちょー簡単に(しつこいっ!!)説明しております
興味ある方は下記リンクから読んでみてください↓↓
上記リンクには
- プログラミングをはじめる環境の整え方
- 使用するソフトウェアのダウンロード&設定方法
- プログラミングの勉強方法
を掲載しております！
まだ準備ができていない方は、ぜひ参考にしてみてください。
なお、この内容は「よくわかるHTML5+CSS3の教科書-第2版-」を参考に作成しておりますので、もっと深く知りたい方は読んでみることをオススメします↓↓
それでは早速、見ていきましょう！
Contents
CSSをはじめる前に
まず基本となるのは、HTMLのコードです！
そもそもHTMLなくして、CSSはありません！(きっぱり)
下記はHTMLのコードとなります↓↓
※h1タグに終了タグの意味であるスラッシュが入力されていないため、実践する際は</h1>と入力してください。
このコードでいう5行目の部分で、CSSを使うための宣言をしています！
意味合いとしては、別ファイルの「style.css」というファイルを読み込むんだな〜という程度で大丈夫です！
このコードがあってはじめて、CSSが適用されることは必要な知識となりますので理解しておきましょう(^^)
この写真上の仕様(Projectの下部をみる)としましては
デスクトップ上にblog-cssという名前のフォルダがあり、その中にHTMLファイルであるindex.htmlファイルが格納されています！
下記のような状態ですね↓↓
この状態のままだとcssファイルを指定していても読み込めるファイルが見つからないため、新しくcssファイルを作成する必要があります！
作成手順は以下の写真の通りです↓↓
①グレー枠内で右クリックし、NewFolderを選択する
※h1タグに終了タグの意味であるスラッシュが入力されていないため、実践する際は</h1>と入力してください。
②「css」と入力し、エンターキーを押すとcssフォルダが作成される
③作成が完了すると、以下のようになります
④今度はフォルダではなく、「style.css」というファイルを作成したいので、①の手順で今度は「New Folder」ではなく「New File」を選択し、style.cssと入力しエンターキーを押す
⑤そうするとcssフォルダの中ではなく、index.htmlの保管場所と同じ場所にあるのでドラッグ&ドロップでcssフォルダに移動させる
⑥新しくできたstyle.cssファイルのタブが表示されている状態だと見辛い&作業しづらいため、そのタブをドラッグ&ドロップで縦線よりも右側にもってくると、HTMLとCSSの両方の画面が見れるようになります
※h1タグに終了タグの意味であるスラッシュが入力されていないため、実践する際は</h1>と入力してください。
この状態がHTMLのコードを見ながらCSSのコードを書ける状態です！
ここまで来たら次のステップとしてCSSの基本的な使い方を見ていきましょう！
まずはHTMLのコードをブラウザで表示させる
HTMLのコードがあってはじめて、CSSのコードを使うことができると冒頭でお話ししました
CSSの使い方を知るとその意味が理解できます！
まずは最初にお見せした写真を再度見てみましょう
※h1タグに終了タグの意味であるスラッシュが入力されていないため、実践する際は</h1>と入力してください。
そしてこのコードをGoogleChromeで見てみます
- 先ほどの①で説明したように右クリックして「Show in Finder」を選択する
- その中にあるindex.htmlファイルをGoogleChromeにドラッグ&ドロップする
するとこのように表示されます↓↓
表示されている内容は、HTMLの<body></body>の中に書かれているコードです
今回はh1タグ・h2タグ・pタグをスタイリングしていきます！
- 背景色を変える方法
- 文字色を変える方法
- 文字の配置を変える方法
- 文字サイズを変える方法
それではサクッと説明していきます！
CSSの基本的な使い方
CSSの基本的な記述方法は「要素名 {何を: どうする?;}」という形となります。実際の書き方としては
h1 {color: red;}
となります
h1要素に対してcolor(色)をred(赤)にしなさい、という内容です！
この時、このcolorというのはフォントカラーの事を指します！
これをstyle.cssの中で入力し反映させると
となります！
HTML、CSSの状態はこのようになっております
※h1の終了タグに関しては訂正済みです
現状としましてはbody内には
- h1タグが１つ
- h2タグが１つ
- pタグが6つ
ある状態ですので、style.cssの内容をh1ではなくpとした場合、どうなるでしょうか？？
全てのpタグにCSSが適用されました！
はい、、これで気づいた方もいると思いますが、、
CSSはこの作業の繰り返しでして、それぞれの要素に対してどういった変化を加えていくか、という作業なのです！
ほぉ〜それなら簡単じゃんっ！！と思われたかと思いますが、
スタイリングの種類がかなりあるため、やればやるほど頭の中が混乱してしまうので焦らず少しずつ覚えていきましょう(^^)
それでは基本的な使い方は以上となります！！w
次はブラウザで表示された文字の内容ごとに変化を加えていきたいと思います！
p要素のそれぞれにスタイリングをする方法
HTMLの内容を少し変更しましたが、CSSではこのようにスタイリングできます
背景色は見分けやすいようにライトグレーにしてみました！
ではまずHTMLをどのように変更したのか見てみましょう
※実践でサイトを作成する際にこのようなスタイリングはしませんのでご了承ください
HTMLに追加した内容としましては
- 文章を少し変更
- <p></p>に内容を追加(id属性とclass属性)
id属性とclass属性とはなんぞや？？と疑問に思うかもしれません
詳しくは後の記事にて書きますので簡単に説明しますと
id属性はオンリーワンのスタイリングで、class属性は複数で使用できるスタイリングです！
学校で例えると
- id属性は個人にスタイリングを指定する
- class属性は1組、もしくは1学年にスタイリングを指定する
- idは制服やジャージのサイズ、靴のサイズといった個に対するもの
- classは制服の種類、ジャージの色(1年生は紫で2年生は緑など)と全体的に指定するもの
と理解すると区別しやすいかな〜って思いますw
詳しい人が聞くと、それは違う！！と言うかもしれませんが
あくまでザックリとした説明ですw
HTMLに書き加えた内容
HTMLに追加した内容としては、
<p>タグの中に、id=”sample1″やclass=”sample4″を加え
それぞれでスタイリングする内容を差別化できるように番号で違いをつけました
このid属性とclass属性だとcssにおいて表記の仕方が違う、という点に注目して欲しくてこのような違いにしたわけです
どう違うのか見ていきましょう！
CSSに書き加えた内容
まずはid属性とclass属性の表記の違いは
- id属性は先頭に#(シャープ)を入力して、つけた名前(sample1など)を入力
- class属性は先頭に.(ドット)を入力して、つけた名前(sample4など)を入力します
となります。
ここで書き加えた内容としては
それぞれの要素・属性に対して
- backgroud
- color
- text-align
の3つだけです
とりあえずこの３つだけしっかりと覚えていきましょう！
CSSでまず覚えるべき3つのプロパティ
- backgroud: 色指定;
- color: 色指定;
- text-align; 位置指定
backgroudプロパティの指定方法
backgroundプロパティとは、その名の通り背景の指定を意味します！
backgroud: lightgray;
と入力します
今回は色で指定していますが、イメージ画像などももちろん可能です。
今回は色の指定なので、わかりやすくlightgray,green,red,yellowなどの色を指定しています。
このように色の単語を入力することで、色を指定することも可能です
もし、backgroudを色だけの指定でいいよ、という場合はbackgroud-colorプロパティで指定も可能ですが、よく使うという点でいうとbackgroudプロパティですので、詳しい使い方はおいおいやっていきます！
※もっと細かく指定したい場合はrgba()や色の16進数表記(whiteの場合#fff)もできます
色の指定方法は、英単語での色の指定が一番わかりやすい指定方法ですので、慣れないうちはこの方法でやっていきましょう
colorプロパティの指定方法
colorプロパティに関しては、こちらは文字色に対する色の指定となります
color: red;
と入力します
backgroudプロパティ同様の色の指定方法となります！
text-alignプロパティの指定方法
text-alignプロパティとは、文字の配置を指定する意味を持ちます。
text-align: center;
と入力します！
centerは中央寄せを意味し、rightは右寄せを意味します！
中央寄せはどのサイトを見ても使用しているのでよく使う部分なのでぜひ理解しておきましょう！
さいごに
いかがでしたでしょうか？？
実際に手を動かして形にしてみることが成長の第一歩です！
知識は知るだけでなく、手を動かし実践してみることで身につきます
小さな事をコツコツと積み上げる事で後の大きな成功につながります！
ぜひ一緒に体験していきましょう！
