adcense*/気まま日記プログラミングHTMLCSSJavaScriptjQueryIT用語ライフMenuSidebarPrevNextSearchTwitterRSSFeedlyホーム>プログラミング>CSSCSSでできることと組み込み方【初心者向け】2020年1月7日こんにちは、Kosei(https://twitter.com/pompom_stk)です。今回はHTMLに対してスタイルを整える役割を持つ「CSS」でできること、組み込み方を初心者向けに解説していきます。「CSSは難しくない」とよく言いますが、やはり初心者のうちは理解しにくく難しいと感じます。コードを正しく記述すれば、「文字色が変わる」「文字サイズが変わる」など、体感的に理解しやすいです。Sheetsの略称CSSはスタイルを整える言語CSSはHTMLで意味付けされた文章に対してスタイルを整えることのできる言語。CSSはプログラミング言語ではないCSSはプログラミング言語ではなく、「マークアップ言語」。CSSでできること例CSSでできることの例をいくつか紹介。CSSを使用しない例HTMLだけで作ったものは、意味付けされた文字が並んだだけのもの。CSSを使用した例HTML情報を変更しなくてもCSSを付け加えれば、全く違ったデザインのものにすることができる。CSSの組み込み方CSSを使うには、HTML文書に組み込ませる必要がある。ファイルを読み込むlink要素を使用してHTMLにCSSを読み込ませることができる。head要素内にstyle要素を記述head要素内にstyle要素を追追加し、その中にCSSを記述することでCSSを読み込ませることができる。style属性を使用する適応したい要素にstyle属性を使用し、属性値にCSSプロパティを記述することでCSSを読み込ませることができる。CSSは体感的に理解しやすいCSSは文字色が変わったり文字サイズが変わったりなど、体感的に理解しやすい言語。CSSってなに?ハリボーCSSってHTMLを勉強していたらたまに聞くよね、一体何者!?CSSはHTMLで作った文章に対してデザインを付けるものだよ。Sheets(カスケーディング・スタイル・シート)」の略称で、HTMLと合わせて使用される言語です。CSSを勉強するにはHTMLを理解してからの方が、より理解しやすいです。HTMLの基本構造」の記事を先に読むことをおすすめします。CSSはスタイルを整える言語CSSと深く関わってくるHTMLは、文章の内容に対して「見出し」や「段落」といった意味付けをする言語です。CSSはその意味付けされた文章に対して、デザインやレイアウトといったスタイルを整えることができる言語です。HTMLで作成したものは文字の羅列でしかありませんが、これにCSSが加わるだけで一気にWebサイトっぽいデザインを作ることができます。HTMLで作成する見出しや段落は、見た目としては文字が大きくなったり太くなったりしか変わりません。CSSは文字の大きさや太さはもちろん、色なども変えることができます。いった点からも、個人的にはHTMLよりもCSSの方が取っ掛かりやすいかなと思っています。CSSを勉強していくと、よりHTMLを理解することもできます。以前はHTMLでデザインを整える目的で使用されるタグが使われていたようですが、現在(HTML5)は装飾目的のタグは廃止になったり非推奨とされています。HTMLは文章の内容を記述するものであり、デザインに関わることは必ずCSSで行うということを覚えておきましょう。クリックで拡大CSSはプログラミング言語ではないハリボーHTMLでDOCTYPE宣言ができたときプログラマー宣言したらばかにされたけど、CSSができたらもうプログラマー宣言してもいいよね!ごめんね、すごく言いにくいんだけどCSSもプログラミング言語じゃない、、、ヒナ「HTMLとCSSを習得してWeb系プログラマーになるぞ!」と考えている人には悲報ですが、この2つはプログラミング言語ではありません。HTMLは内容をタグで囲むことによって意味付けする「マークアップ言語」、そしてCSSはHTMLで作成した文章のスタイルを整える「スタイルシート言語」と呼ばれています。プログラミング言語とは、条件式などを記述して「入力された条件によって出力を変える」ものです。言い方は悪いかもしれませんが、HTMLは内容をタグで囲んで表示するだけのもの、CSSはそれに対してスタイルを変えるだけのものです。CSSの一部でクリックによるアクションなどを付け加えることもできますが、基本的にプログラミングでできることとは全く異なり習得難易度も低いです。ちなみにこのブログでは記事の最初に要点をまとめた目次を設置しています。この目次の見出し部分は、クリックするとボタンが押し込まれたように表示されます。あれはCSSで再現しています。クリックすると見出しに飛ぶので、わかりにくいかもしれませんが。話を戻しますが、Web系のプログラミングをするにはHTMLと今回解説していくCSSを理解していることが絶対条件です。Web系でよく使われるJavaScriptでは、HTMLに対して動きを出したり、相手によって出力内容を変更したりしてくれる「プログラミング言語」です。HTMLやCSSを理解せずに、「Web系プログラマーになりたいからJavaScriptを勉強するぞ!」といきなり始めてもほぼ確実に挫折します。考えると「HTMLとCSSを習得してプログラマーになるぞ!」という考え方は間違えていないかもしれません。CSSでできること例CSSはHTMLで作った文章に対してスタイルを整えるものだということはわかったでしょうか?ですがこれだけでは「CSSで何ができるのか」ということまではわからないと思います。この記事では深く解説しませんが、CSSでできることの例をいくつか紹介していきます。CSSを使用しない例まずはこちらのコードと処理結果をご覧ください。CodePen.上のコードは、CSSを使用していません。HTMLだけで作った「意味付けされた文字が並んだだけのもの」です。これを見てもどこが見出しでどこが内容なのか、どこが大切なポイントなのかがわかりにくいです。次はこれにCSSでデザインを付けていきましょう。上のHTMLに対してCSSを付けていきます。コンテンツ全体は目に優しい緑っぽい色を使用し、余白を付けます。中見出しは左側と下に線を引き、小見出しは少しスペースを開けて左側に四角いやつを置いてみます。これだけで、それとなく見出しっぽくなります。大切なポイントは、文字色を変えたり背景色をつけたり文字のサイズを変えたりしてみまます。上のようなCSSを指定したものが以下のコードです。ここでは「こんなことができるんだ」程度で、どんなコードが使われているかなど深く考えなくて大丈夫です。一応CSSにはコメントアウトして、「どのコードが何の役割を持っているか」をわかるようにしています。気になる人はそちらも参考にしてみてください。CodePen.これがCSSです。HTMLで書いた情報は全く変えていないのに、CSSという言語を少し付け加えるだけでここまで変わってしまいます。間違ってもコードを見て、「意味がわからない、自分にCSSは向いていないかも」とは思わないでください。僕もこれを書く2.3ヶ月前くらいまでは意味がわかりませんでした。CSSの組み込み方CSSを使うには、HTML文書に組み込ませる必要があります。組み込ませる方法は3種類あります。この項目では「要素」や「属性」といった用語がでてきます。これらについてよく知らないという方は「タグ中の要素、属性とは?HTMLの基本的な書式」の記事をご覧ください。ファイルを読み込むまずはlink要素を使用してHTMLにCSSを組み込ませる方法です。この方法を使用するには、HTMLとCSSそれぞれ別のファイルを用意する必要があります。CSSのファイル拡張子は「.css」とします。この方法でファイルを読み込むには、HTMLでlink要素を使用しCSSファイルを指定します。この記事では簡単にしか解説しませんが、link要素は外部ファイルをHTMLに読み込ませることができる要素です。以下のように記述し、hrefの属性値はCSSファイルのある場所を指定しましょう。linkファイルについてはまた、別記事で解説していきます。次はhead要素内にstyle要素を記述する方法です。head要素はhtml要素の中に入る要素で、それぞれのページに関する情報を記述する部分になります。HTMLの基本構造」の記事をご覧ください。書き方は非常に簡単で、まずhead要素内にstyle要素を追加します。style要素のタグ間にCSSを記述すればそれが適応されます。CodePen.style属性を使用する最後にstyle属性を使用する方法です。この方法は記事全体に適応するhead要素とは異なり、特定の部分にのみ適応させることができます。書き方は、適応させたい要素にstyle属性を使用し、属性値にCSSのプロパティと値を記述します。複数のプロパティを指定したい場合は、プロパティ間をセミコロン(;)で区切りましょう。CodePen.CSSは体感的に理解しやすい簡単にですがCSSでできること、組み込み方を解説していきました。CSSでできることはほんの一部しか紹介しませんでしたが、他にもいろいろなことができます。CSSはコードを正しく記述すれば文字色が変わったりサイズが大きくなったりなど、HTML以上に体感的に理解しやすいです。CSSを初めて扱う人にとったら難しく、理解しにくいかもしれません。自分で何度かコードを書いて実行していけばすぐに理解することができます。実際にコードを書いてCSSの楽しさを体感してみてください。pompom-stk関連記事タグ中の要素、属性とは?HTMLの基本的な書式こんにちは、Kosei()です。け】この記事ではCSSの基本書式について、初心者向けにわかりやすく解説しています。...初心者向けテーブル(表)の作成方法/【HTML】テーブルの作成方法を初心者向けに解説した記事です。...初心者向け段落の作成方法【HTML】ブログやWebサイトを作成する上で、段落は必須です。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。