むねひろ@プログラマープログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。munehiro【CSSの基礎知識】簡単なCSSでレイアウトを調整するツイートシェアはてブLINEPocketHTMLとCSSはセットで勉強しないと意味が無いほど互いに依存しています。HTMLは骨格だけでデザインは出来ない。CSSはデザインできるけど骨格は作れない。今回はCSSの基礎知識と、前回作ったHTMLの骨格にちょっとしたCSSを入れてみたいと思います。HTMLが骨格を作るとしたら、CSSはそのHTMLをどのように表示するかを定義したものです。具体的には文字の大きさや色を設定できたり、スマホ対応もCSSで行います。実はスタイルの定義はHTML内でも出来ます。h1タグの文字の大きさを変えたいとしましょう。CSSが無いと下記のようにHTML内に直接書き込むことになります。36px;">WEBプログラミングを始めるために初心者は何から勉強すればいいのか?</h1>しかしこれだとHTMLが複雑になってしまいます。複雑にならないよう骨格と装飾を別に定義し、見やすくしたものがCSSです。部分をセレクタといい、スタイルを適用する対象を定義します。ことをブロックといい、ここにスタイルを記述します。前の部分をプロパティといい、スタイルの種類を定義します。「font-size」は文字のサイズのことです。後の部分を値といい、スタイルの種類に対し値を設定します。36px」で文字サイズが36ピクセルになります。上の例では文字サイズでしたが、文字の色も同時に定義したい場合も多々あります。複数定義するには下のように書きます。#333333;}CSSはどこに書くのかスタイルはどこに書くのか?主に書く場所は3箇所あります。いうプロパティを持たせ、上記の例のように記載できます。これは上でも説明しましたが、HTMLが複雑になるためおすすめはしません。テストで一時的にスタイルを適用する場合には良いかもしれません。content="20歳の元調理師がフリーランスのエンジニアになりスキルを下にネットビジネスで安定収入を得ています。content="20歳の元調理師がフリーランスのエンジニアになりスキルを下にネットビジネスで安定収入を得ています。<style>タグを書いて、そこに定義することが出来ます。これはHTMLタグ内に書くよりは整理されますが、HTMLファイル内が複雑になることには変わりないためあまりおすすめはしません。<head>タグ内に書く場合もあります。それはPHPなどで動的にスタイルを切り替えてデザインを切り替えたい場合です。通常はそういったことはあまりありませんが、例えばWordPressのテーマを作成し、管理画面でカスタマイズした内容で表示を切り替えたい場合などにそうします。CSSファイル内これはHTMLファイルとは別にCSSファイルを作成し、それを読み込む方法です。HTMLヘッダー内で下のようなコードを書いて読み込みます。プロパティで対象のCSSファイルを読み込みます。プロパティは、読み込むファイルが何かを定義します。スタイルシートの場合は「stylesheet」と書きます。読み込むファイルがどんな形式のファイルかを定義します。スタイルシートの場合は「text/css」と書きます。この書き方が一番一般的なやり方で、骨格はHTMLで装飾はCSSときれいに分離できます。実際にCSSを当ててみる前回のHTMLに画像と文章を挿入(マークアップ)するで作成したサンプルHTMLを見てください。CSSを当てる前のサンプル全て左に寄ってしまって、画像のサイズもバラバラです。100%;}非常にシンプルですが、上記のようなコードを作成しました。HTMLは、ヘッダー内に下記コードを追記しました。href="sample004style.css">このCSSを当てたバージョンのサンプルがこちらです。画面が中央により、なんとなく整理された感が出ました♪CSSを当てたバージョンのサンプルCSSの解説は下をどうぞ。全てのタグを指します。タグ直下のHTMLタグ全てという意味です。header、nav、main、footerタグが対象となります。HTMLタグはHTMLに画像と文章を挿入(マークアップ)するの記事を参照してください。1160px;」です。