こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、cssの基本を分かりやすく解説したいと思います。
cssは、ホームページを作るのに必ず必要になるので、基本をしっかり身につけましょう！
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
cssとは？
cssとは、Cascading Style Sheets（カスケーディング・スタイル・シート）の略て、頭文字をとってcssと言います。
htmlのHyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）と似ていますね。
cssは、文字の大きさや色、画像のサイズや位置、ブロックの幅や高さなど、色々なスタイルを適用させることができます。
htmlだけでは、普段よく見るホームページのようなものは作れません。
htmlとcssを組み合わせることで、リッチなホームページが作れるようになります。
なので、htmlコーディングが出来るということは、cssでスタイルも適用させることが出来るということになります。
htmlとcssはセットだと思いましょう。
cssファイルの作り方
それでは早速、cssを作ってみましょう。
cssもhtmlと同様にファイルになります。
下記コードを、エディタで書いてみましょう。
@charset "utf-8";
html同様、文字コードをutf-8と定義します。
書けたら保存します。
「css」というフォルダを作り、ファイル名はstyle.cssとします。
下記のようになっていればOKです。
htmlと紐付ける
cssファイルができたら、htmlと紐付ける必要があります。
headタグの中に、下記のように記述します。
htmlは、前回の#3のソースコードを使用します。
<head>
<meta charset="utf-8">
<meta name="keywords" content="web, デザイン, xxx">
<meta name="description" content="xxxxxxx">
<title>xxxxxxx</title>
<link rel="stylesheet" href="css/style.css">
</head>6行目にlinkタグで追記しました。
rel属性でstylesheetと記述して、cssだよと定義しています。
href属性で、index.htmlのファイルからみたcssのファイルのパスを記述します。
このように記述することで、htmlとcssが紐付き、cssに記述したスタイルがhtmlに適用されるようになります。
ファイルのパスとは？
cssを書く前に、ファイルのパスについて触れておきます。
ファイルのパスとは、ファイルがある場所を表す文字列です。
パスは「フォルダ名/ファイル名」のように、スラッシュで区切ります。
上の例だと「css/style.css」これがパスになります。
index.htmlのファイルから考えて、まずcssフォルダ、その後にstyle.cssのファイル名を記述しているということです。
逆に、style.cssからindex.htmlまでのパスを考えると、「../index.html」となります。
「../」は、ひとつ上のフォルダを表しています。
最初はややこしいですが、すぐ慣れますので、今は何となく理解しておけば問題ありません。
スタイルを書いてみる
ここからが本題です。
先ほど作ったstyle.cssにスタイルを記述してみましょう。
@charset "utf-8";
h1 {
text-align: center;
}style.cssに、スタイルを記述しました。
保存したら、style.cssではなく、index.htmlをブラウザで確認しましょう。
※cssファイルはスタイルを記述するファイルで、ブラウザで表示されるのはhtmlファイルになります。
どうでしょうか？
見出しがセンター合わせになっているはずです。
では、もうひとつスタイルを追加してみます。
@charset "utf-8";
h1 {
text-align: center;
color: #ff0000;
}テキストが赤くなりましたでしょうか？
説明すると、h1タグに、
- テキストをセンターにして！（text-align: center;）
- テキストの色を赤にして！（color: #ff0000;）
と、スタイルを適用させたいタグに対して、ブラウザが理解できる言葉で記述しています。
このブラウザが理解できる言葉をスタイルと言い、このように記述することで、その通りに表現してくれます。
もう少し書いてみる
それでは、もう少し書いてみます。
@charset "utf-8";
div {
width: 90%;
max-width: 1000px;
margin: 0 auto 30px;
}
h1 {
text-align: center;
color: #ff0000;
font-size: 40px;
margin: 50px 0 30px;
padding-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
p {
font-size: 18px;
text-align: center;
}書けたら保存して確認してみましょう。
どうでしょうか？
スタイルが適用されて表示されましたでしょうか？
このように、スタイルを書くことで、色々な表現をすることができます。
最後に
以上、cssの基本を解説しました。
まとめると、cssとは、
- htmlとcssはセットで、ホームページ作成には必須
- htmlファイルとcssファイルは、パスを書いて紐付ける
- スタイルを適用させたいタグに対して、ブラウザが理解できる言葉「スタイル」を記述して表現する
です。
スタイルは本当にたくさん用意されていて、色々な表現が出来るのですが、初めは覚えるのが大変です。
ただ、よく使うスタイルはある程度決まっているので、コツを掴んでしまえば意外と書けてしまいます。
下記サイトが、目的別で一覧になっているのでおすすめです。
→★スタイルシートリファレンス（目的別）
次回は、idとclassについて解説したいと思います。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント