CSSを使うと何が出来るのかCSSの書き方の基本セレクタ、プロパティ、バリューの概要など、基本的な内容が中心です。CSSの基本を超初心者向けに解説【まとめ】CSSはWebページの見た目を変えるWebページは「HTMLファイル」と「CSSファイル」の2つが合わさり、作られています。それぞれを簡単に説明するとHTMLファイル→Webページの文章&構造CSSファイル→Webページの見た目の装飾という感じです。連載第1回の記事でも触れていました↓CSSファイルに書かれている内容は「Webページの見た目を変える情報」です。文字を大きくしたり、文字色を変えたりする時に使われます。CSSファイルを使うことでWebページのデザインを設定することができます。「人に見やすいWebページ」を作るためには必須です。vol.1アルパカとにかく、見た目を変えるんだなーということを理解すればOKです!CSSで指定するとWebページの見た目はどう変わるのか?HTMLファイルに書けるのは、Webページの構造と文章でしたね。上図(左)のような感じで、これだけだとハッキリ言って味気ないです。このHTMLファイルにCSSファイルを組み合わせると上図(右)のように、見た目(例:文字の色)を変えることができます。こんな感じで、色を変えたり、大きさを変えたり、配置場所を変える対象を増やしていくと、一気にWebページっぽくなります。アルパカ今見ている東京フリーランスのWebページも場所によって文字の色や大きさが違いますが、実は裏側でCSSファイルによる指定がされています!CSSの書き方の基本は「どこの」「何を」「どうする」CSSはどのように書けばいいのでしょうか?基本は非常にシンプルで「どこの」「何を」「どうする」を書けばOKです。先程の図だとどこの→h1タグの何を→色をどうする→赤にするという指定をしています。それぞれ専門用語もあるので、覚えておきましょう。どこの→セレクタ(selector)何を→プロパティ(property)どうする→バリュー(value)です。アルパカコーディングしていて、わからないことが出たときには専門用語でググると、正解にたどり着きやすいですもしも人間のデザイナーに頼む時は「ここの色を赤にして」と口頭で依頼すればOKですよね。自分でWebページを作るときにはコンピュータに対して、コンピュータがわかる形式で依頼する必要があります。人間は、ちょっとくらい「曖昧な指示」をされても、勝手に解釈して処理ができます。コンピュータは「曖昧な指示」が大の苦手...というか、出来ません。そのため、常に「ルールに基づいた、決まった頼み方」をする必要があります。vol.2コンピュータに伝えるためのルールは簡単で、「どこの」「何を」「どうする」を記号と共に書けばOKです。})中括弧の中には「何を(プロパティ)」「どうする(バリュー)」を書く「何を(プロパティ)」の後とコロン(:)「どうする(バリュー)」の後にセミコロン(;)という感じ。図解すると以下のようなイメージです。ちなみに「インデント」もほぼ必須。インデントとは、行の開始位置をずらすもので、ファイル(ソースコード)を「人間」に見やすくするために使われています。アルパカ今後も、コーディング(プログラミング)をする時によく見ると思うので、覚えておきましょう!以下、セレクタ(どこの)、プロパティ(何を)、バリュー(どうする)で、どんなことが指定できるのかも簡単に解説していきます。セレクタ(selector)で指定する対象は3つCSSファイルのセレクタ(「どこの」)で指定する対象は主に3つありますHTMLタグidclassHTMLタグ、id、classってなんだっけ?って方は前回の記事を参照くださいね↓HTMLタグには「属性」を付けることも可能です。属性とは、簡単に言うと、HTMLタグの補足情報のこと。id属性:様々なHTMLタグで使われる。要素に好きな「固有名」を付けるclass属性:様々なHTMLタグで使われる。vol.2基本的にはHTMLタグごとにプロパティ&バリューを書いて見た目を変えるのですが「特定の場所だけ見た目を変えたい!」という時にはidやclassを指定します。いうか一番利用するのは「class」です(実際にコーディングするとわかります)。今は、書き方が違うんだなー!ということだけ理解しておけば大丈夫です。セレクタの書き方HTMLタグを指定→タグ名をそのまま書くidを指定→id名にシャープ(#)を付けるclassを指定→class名にドット(.)を付けるアルパカidとclassを指定するときには、HTMLタグと区別するために「記号」を付けているんですねプロパティで指定する対象は様々CSSファイルのプロパティ(「何を」)で指定する対象は...、色々とありすぎて紹介しきれません。「文字の見た目」と一言で言っても「色・大きさ・フォント」など様々な要素で構成されていますよね。そんな感じで、プロパティでは、見た目を形作る様々な要素を指定できます。※逆に言うと、コンピュータは細かな指定をされているから、画面上にWebページとして表現できているのですねプロパティで指定できるものを、ザックリまとめると以下の通りですテキスト関係(文字サイズ、フォント種類、文字色など)背景(背景色や背景画像など)全体の大きさや配置に関するもの(横幅や縦幅、表示形式など)要素の余白(要素の外側の余白であるマージン、要素の内側の余白であるパディングなど)例えば文字色を変えたい場合はプロパティとして「color」を指定する...と言った感じ。文字の大きさを変えたい時は「font-size」を指定すればOKです。アルパカコーディング中に、必要に応じて「どんなプロパティ」があるのかググればOKです。あと、よく使うものは自然と覚えますので無理やり暗記する必要はありませんよバリューで指定できる内容はプロパティによって決まるセレクタ(どこの)、プロパティ(何を)に続いて、バリュー(どうする)についての説明です。バリューで指定できる内容は、プロパティによって決まります。文字の大きさを赤にする前者は成り立ちますが、後者は成り立ちませんよね(人間もコンピュータも理解できない...)。いうことで、バリューは常にプロパティとセットで考えればOKです。バリューに関して注意点があるとしたら、指定する方法が色々とある(場合がある)という点。文字の大きさ(font-size)を指定するときには絶対数値で指定する(例:12px)相対数値で指定する(例:10em)パーセントで指定する(例:150%)など、様々な形式が使えます。)など、様々な形式で表現可能。この辺りは基本的な書き方だけ理解しておいて、必要に応じて違う表現を調べて使えば大丈夫です。今回はCSSの基本について、超初心者向けに解説しました。簡単にまとめると、POINTCSSでWebページの見た目を変えるためには「どこの」「何を」「どうする」を指定する覚えるべき用語は3つセレクタ(どこの)プロパティ(何を)バリュー(どうする)セレクタで指定できるのは、HTMLタグ、class、idの3種類プロパティやバリューでは色々と指定可能。いう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。投稿一覧エンジニア兼ブロガー。IT企業で5年働いた後に独立しフリーランスになる。趣味のエンタメ系ブログ「アルパカタログ」は9ヶ月目で月間100万PVを達成。初心者や未経験者向けの分かりやすい解説が得意。2019.06.04この連載では、駆け出しコーダーが実務優先で後回しにしがちな『Webにまつわる基礎』を、初心者にも分かりやすい図解を使って解説していきます。2019.04.14こんにちは、フリーランスエンジニア兼テックライターのしろ(@siro3460)です。USイメージキャラクター『Freena』フリーランスの羅針盤となるメディアサイト『東京フリーランス』。フリーランスの皆さんに役立つコンテンツを配信しています。