chasoCSSは怖くない!CSSの役割と使い方ツイートシェアはてブGoogle+Pocketハム氏HTMLとセットでCSSってやつも勉強しないといけないって聞いたんだけど、CSSってなんなの?なっちゃそcssはHTMLで書かれたコンテンツに装飾をしていくため言語だよ。ハム氏へー、それも詳しく教えてくれるの?なっちゃそそうだね、頑張って解説するね。ContentsCSSとはCSSの基礎CSSの基礎:CSSの書き方CSSの基礎:classとidについてid/classを使ってCSSを書いてみようよく使うプロパティを紹介するよ要素のレイアウトに使用するプロパティテキストをスタイリングするためのプロパティまとめCSSとはHTMLで書かれたコンテンツに装飾をするための言語です。一般的なwebサイトを見ると文字に色がついていたり、ボタンがあったりしますよね?あれらの装飾はすべてCSSによって指定された値によってできています。CSSはHTMLのファイル上に直接書き込むこともできるのですが、基本的にはHTMLファイルとは別にスタイルシート(style.css)というファイルを作ってその内容を呼び出すという方法をとります。CSSの基礎CSSの基礎:CSSの書き方CSSの書き方は1スタイルシートに書く方法2HTMLファイルのスタイルタグの間に書く方法3HTMLのタグの中に書き込む方法がありますが、基本的には1の方法でスタイルを当てていくことになります。今回は1のスタイルシートに書く方法についてがっつり、23のHTMLファイルに書く方法をさらっと解説していこうと思います。スタイルシートでCSSを書く際にはセレクタ・プロパティ・値の3要素が必要になります。セレクタにはタグ名やタグにつけられたclass名やid名(後で説明するよ)が入り、これらはCSSにHTMLのどこをスタイリングするのかを指定するために記述します。プロパティはセレクタの次の中カッコの中に書かれる何をスタイリングするのかを指定する部分。height(高さ)やcolor(文字色)みたいな指定したい要素ですね。値はどのようなスタイリングをするか、どのくらい見た目を変えるかを指定する部分です。基本的にはheightに対して100pxとか、colorに対してredといったまさに値が入ります。CSSの書き方には・プロパティと値は中カッコで囲む・プロパティと値の間にはコロンを入れる・値の後ろにはセミコロンを入れる(連続して何個も指定しない場合はいらないけど入れる癖をつけた方がいいよ)というルールがあります。なっちゃそこれらは最初のうちはややこしいかもしれないけれど慣れると無意識レベルでできるようないなるからそこまで心配いらないよ。どれか欠けるとCSSは効かなくなるので頭には入れておいてね。CSSの基礎:classとidについてハム氏セレクタに書くclass名とかid名ってなに?なっちゃそ例えば、bodyタグみたいにファイルに1個しか存在しないようなタグなら、セレクタにタグ名(この場合はbody)を入力すれば良いのだけれど、divタグみたいにファイルに何個も存在してるようなタグはどこのdivにスタイルを当てたら良いかわかるように、class名とかid名という形でタグに名前をつけるんだよ。ハム氏なるほどー、じゃあclassとidの違いはなに?なっちゃそそれも含めてclassとidについて解説していくね。classとidの役割HTMLに書かれた文書をCSSで装飾する際にはセレクタでどの部分を装飾したいかを指定する必要があります。bodyタグ、headerタグのようにファイルに1つしか存在していないタグであればセレクタにタグ名を書けば指定することができます。ファイル内に2つ以上あるタグの場合でもすべてのpタグやすべてのaタグに適応させたい装飾であればタグ名で指定する方法をとることができます。ファイル内に2つ以上あるタグで1箇所にだけ適応させたい場合はタグ名で指定することは難しくなります。そこで、タグに名前をつけてその名前をセレクタに指定して呼び出すという方法をとります。このときつける名前がclass名・id名と呼ばれるものになるわけです。classとidの違いってなに?idとclassには・id名は1つのファイルに1回しか使うことができない・class名は何回使ってもOKという決まりがあります。同じスタイルを使いまわしたい場合はclassを使用するのが一般的です。classとidの名前のつけ方class名もid名もどのタグにもつけることができて、名前も自分で決めることができます。名前をつけるときに守った方がいいルールとしては・class/id名は日本語で書かない(英数字で構成する)・class/id名は数字からスタートしないものにする・後から見てもわかるように、要素と関連性がある名前にするの3つが挙げられますかね。3つ目に関しては、Webサイトは一度デザインしたサイトを別の人が改修する可能性があるので第三者がみても関連があってわかりやすい方がいいです。id/classを使ってCSSを書いてみようではでは、実際にCSSを書いてみましょう。今回は下のHTMLの見出しとリンクにCSSで装飾をしてみましょう。今回は見出しが赤い50pxの文字になり、リンクが青いボタンになるようにCSSを指定しました。これをブラウザで表示するとこんな感じになります。※画像はイメージです。基本的にWebデザインをしていく中で実現したいデザインが出てきたら調べて試してを繰り返すことでだんだんどの指定でどんな見た目が出来上がるのかがわかってきます。最初にオブジェクトの作り方を覚える必要はないですよ。徐々にレパートリーを増やしていけばOK!よく使うプロパティを紹介するよさて、次はよく使うプロパティの名前と機能を紹介します。プロパティにもたくさんの種類がありますが、実際にWebサイトを作りながら少しづつ覚えていくようにしてくださいね。要素のレイアウトに使用するプロパティheight要素の高さを指定するプロパティwidth要素の幅を指定するプロパティmargin要素の外側の余白を指定するプロパティpadding要素の内側の余白を指定するプロパティpaddingとmarginの違いについて詳しく書いてる記事はこちら要素に余白を作るCSS、paddingとmarginの違いと使い方を徹底解説2018.04.24position要素の位置を指定するためにの配置方法について相対的か絶対的かを指定するプロパティtoppositionに従って要素を配置する際に、上辺からの距離を指定するプロパティbottompositionに従って要素を配置する際に、下辺からの距離を指定するプロパティrightpositionに従って要素を配置する際に、右辺からの距離を指定するプロパティleftpositionに従って要素を配置する際に、左辺からの距離を指定するプロパティdisplay要素の表示の仕方を指定するプロパティfloat要素を右または左へ寄せて配置するプロパティテキストをスタイリングするためのプロパティcolor文字の色を指定するプロパティfont-size文字のサイズを指定するプロパティtext-aline要素の横位置の揃え方を左揃え・中央揃え・右揃えから選び指定するプロパティline-height行の高さを指定するプロパティfont-weight文字の太さを指定するプロパティfont-family文字フォントの種類を指定するプロパティなっちゃそもちろんまだまだありますが、それはまた別の機会に紹介していきますね。まとめいかがでしたか?スタイルシートを見ると一切日本語が書いてなくて一貫性が無いように見えるCSSですが、どれもどの要素の・何を・どのようにするかを指定しているだけです。複雑に見える装飾も一つ一つのCSSの指定でできているので、少しずつ自分の好みのデザインの実現方法を探していってくださいね。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取るHTML5って何?どんな機能があるの?HTMLの特徴をまとめてみたHTMLの役割って何?どうやって使うの?HTMLの基礎を徹底的に解説しますRECOMMENDこちらの記事も人気です。Webデザイン2018.4.8HTML5って何?どんな機能があるの?HTMLの特徴をまとめてみたWebデザイン2018.4.19CSSだけでアニメーションやエフェクトがつけられるCSS3の便利な機能を...Webデザイン2018.4.9レスポンシブ対応が楽になる!BootstrapについてまとめてみたWebデザイン2018.4.24要素に余白を作るCSS、paddingとmarginの違いと使い方を徹底解説Webデザイン2018.4.7HTMLの役割って何?どうやって使うの?HTMLの基礎を徹底的に解説しますWebデザイン2018.1.9Webデザイナーって何?どんなことしてるの?Webデザイナーの仕事を徹底...なっちゃそのプロフィールWebデザイナー&グラフィックデザイナー新卒で入社した会社を半年で辞め、完全未経験から独学でフリーランスのデザイナーになった23歳。『視野を広げて正しい努力をすれば人生に我慢は必要ない』ことを証明したい。『死ぬこと以外かすり傷』のまとめをまとめてみたマレーシアに移住するメリットとデメリットを正直にまとめてみたノリと勢いでマレーシア移住を始めてしまいました自分の仕事や職場環境は今の自分の価値の鏡だぞ。