CSSを書きながら学ぶ！初心者でも覚えられるCSSの書き方と注意点
- コーディング
CSS(シーエスエス)は文字の大きさを変えたり、リンクの形を変えたりと文章にデザインを施して装飾することが出来る言語です。
HTMLとセットで使われる言語ですが、現在はHTMLとCSSの役割分担が明確化されており、書き方がHTMLより少し複雑です。
そのため、どうやってCSSを書けば良いのか難しくてわからない人もいるかもしれません。
ただ、CSSの書き方がわからないからといって「書き方そのものを学ぶ」「コードを覚える」ことから始めると理解するのに時間がかかるでしょう。
CSSは実際に書いてみながら覚えるのがもっとも理解しやすく、自分で書けるようになります。
そのため、この記事では初心者でもCSSが書けるように、ダウンロード出来るファイルを用意しました。
この記事を見ながらCSSを書いていけば、CSSの書き方が理解できるはずです。
1.CSSとは
CSS(シーエスエス)はカスケーディングスタイルシート(Cascading Style Sheets)の頭文字をとったものです。
カスケーディングスタイルシートは、ある要素(HTMLのタグなど)に対してどのような装飾をするのか、その装飾はどんな装飾(サイズや色など)なのかを定義する言語です。
つまり、HTMLが文書の意味付けや構造を指定するのに対して、CSSはそれらをどのように装飾するのかを指定することが出来ます。
HTMLでも文字の色を変えたり文字の大きさを変えたりすることは出来ます。
しかし、そうしてしまうと「コードが複雑になってしまう」「メンテナンスが大変になる」などの不都合が起きてしまいます。
このことから、構造とデザインを分けるためにCSSが使われています。
現在はほとんどのwebサイトでHTMLとCSSが両方使われているので、CSSは必須の言語だと言えます。
2.CSSの基本文法
CSSは下記のような基本文法があります。
「セレクタ」はCSSを適用する場所(HTMLのタグ名など)を決めるために書くものです。
そして「プロパティ」でその場所の何を変化させるかを指定します。
例えば、わかりやすいのが文字の色や文字の大きさでしょう。https://codepen.io/s-Osawa/embed/gOYMYab?height=265&theme-id=0&default-tab=css%2Cresult&user=s-Osawa&slug-hash=gOYMYab&pen-title=css01&name=cp_embed_1
どのような変化をさせるか決めたあとは「値」でどのように見た目を変えるのかを指定します。
もし文字の色を変えるのであれば値の場所には「red」と記載すれば、文字色が赤色に変わります。
ここまでお話した基本文法はCSSの基礎なので覚えておきましょう。
※セレクタ以降の「プロパティ」と「値」は波括弧{}で囲います。
.CSSを実際に書いてみる
ここからは実際に、あらかじめこちらで用意した「css_sample.zip」というファイルをダウンロードして、CSSを一緒に書いていきましょう。
「css_sample.zip」を解凍すると下記のようなフォルダ名のファイルが入っています。
◆sampleフォルダ
├index.html
├◇imgフォルダ
│├digiholly.png
│├menu.png
│└mike.png
└◇designフォルダ
├reset.css
└style.css
この中の「style.css」のフォルダを使ってCSSを書いていきます。
完成すれば下記のようなwebページが出来上がります。
HTMLは既に完成したものになっているので、CSSを書いていくだけでデザイン通りのページになります。
そのため「style.css」と書いてあるファイルを開いて、その中にこれからお話する手順でCSSを書きましょう。
1つ1つ解説しながら進めて行くので、徐々にCSSの書き方がわかってくるはずです。
CSSを書くためにはHTMLエディタがあると便利です。
HTMLエディタについて詳しく知りたい人はプロが見て優秀なHTMLエディタ6選！現在使っているプロの感想付きの記事を参考にしてください。
プロが見て優秀なHTMLエディタ6選！現在使っているプロの感想付き
3-1.body全体で使うフォントを指定
まずは「@charset “UTF-8”; 」と書いてある下に、webページ全てに共通する要素をCSSで書いていきます。
今回のwebページ全てに共通するのは「背景色が黒」なことなので、次のようなCSSを書きます。
body{
font-family: ‘Noto Sans JP’, sans-serif;
}
このCSSを書くことで全体的なフォントを「Noto Sans JP」というフォントに出来ます。
コピーして貼り付けてしまうと書き方が覚えられないので、出来ればキーボードで打ち込んでいくようにしましょう。
3-2.ヘッダーを装飾
次に下記の画像にあるヘッダーの部分を装飾していきます。
下記のCSSを順に書いていきましょう。
header{
height: 45px;
/* 高さ指定 */
position: relative;
/* 子要素(.menu)の起点を指定 */
}
.menu{
display: flex;
/* 横並びにする */
height: 30px;
/* 高さ指定 */
font-size: 14px;
/* フォントサイズ指定 */
position: absolute;
/* 絶対配置 親要素(header)を起点に配置 */
top: 15px;
/* 上からの位置指定 */
right: 0;
/* 右からの位置指定 */
}
.menu p:nth-of-type(3){
/* .menuの3番目にあるp */
height: 48px;
/* 高さ指定 */
}
.menu p:nth-of-type(3) img{
/* .menuの3番目にあるpの中にあるimg */
padding: 8px;
/* 余白上下左右指定 */
width: 16px;
/* 幅指定 */
}
.account{
background-color: #ed6d00;
/* 背景色指定 */
border-radius: 50%;
/* 角丸をまとめて指定 */
height: 30px;
/* 高さ指定 */
margin-right: 15px;
/* 余白右指定 */
text-align: center;
/* 行の揃え位置指定 */
width: 30px;
/* 幅指定 */
}
.account p{
/* .accountの中にあるp */
color: #ffffff;
/* 文字色指定 */
line-height: 30px;
/* 行の高さ指定：.account高さと合わせる */
padding: 0;
/* 余白上下左右指定 */
}
「/*」左の記号で囲われているのはそのCSSにどういう意味があるのかコメントが書いてあります。
実際に書くときは「/*」で書かれている部分は書かかなくてもよいですが、書いておくと後で見直したときにわかりやすいです。
3-3.コンテンツ全体の装飾
ヘッダーの装飾が終わったら、ヘッダーより下の全てに関係する装飾をします。
.contents{
margin: 0 auto;
/* 外余白上下0 左右自動で均等に指定 真ん中寄せ */
max-width: 560px;
/* 幅の最大値指定 */
padding-top: 150px;
/* 余白上指定 */
}
このCSSを記述することで、ヘッダーの下全体の余白や幅の指定をすることが出来ます。
3-4.h1の装飾
h1は下記の画像にあたる場所のことを指します。
h1{
padding-bottom: 30px;
/* 余白下指定 */
text-align: center;
/* 行の揃え位置指定 */
}
このCSSを書くことで「Digiholly」と書いてある場所の余白を指定して、真ん中に寄せることが出来ます。
3-5.formの装飾
formは下記の画像にあたる場所のことです。
form{
position: relative;
/* 子要素(.submit)の起点を指定 */
}
.search{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
outline: none;
/* デフォルトのスタイルをリセット */
background-color: #eeeeee;
/* 背景色指定 */
border-radius: 22px;
/* 角丸をまとめて指定 */
box-sizing: border-box;
/* padding(とborder)の幅を要素の幅と高さに含める */
font-family: ‘Noto Sans JP’, sans-serif;
/* フォント指定 */
font-size: 13px;
/* フォントサイズ指定 */
height: 45px;
/* 高さ指定 */
padding-left: 20px;
/* 余白左指定 */
width: 100%;
/* 幅指定 */
}
.submit{
background-color: transparent;
/* 背景色透明指定 */
background-image: url(../img/mike.png);
/* 背景画像 */
background-repeat: no-repeat;
/* 背景画像繰り返さない */
border: 0 solid;
/* デフォルトの線を無くす */
cursor: pointer;
/* カーソルを指に指定 */
height: 23px;
/* 高さ指定 */
padding: 0;
/* 余白上下左右指定 */
position: absolute;
/* 絶対配置 親要素(form)を起点に配置 */
right: 17px;
/* 右からの位置指定 */
top: 11px;
/* 上からの位置指定 */
width: 15px;
/* 幅指定 */
}
ここまでのCSSを全て書くことでform部分が完成します。
3-6.contents-iconの装飾
contents-iconとは下記のアイコンが10個並んでいるところのことです。
.contents-icon{
display: flex;
/* 横並びにする */
justify-content: space-around;
/* 横並びしたアイテムの両端にスペースを均等に割り付け */
padding-top: 40px;
/* 余白上指定 */
}
.contents-icon p{
background-color: #eeeeee;
/* 背景色指定 */
border-radius: 50%;
/* 角丸をまとめて指定 */
height: 48px;
/* 高さ指定 */
width: 48px;
/* 幅指定 */
}
HTMLでアイコンを10個作る記述がされているので、CSSではそのアイコンの並びや大きさなどを指定しています。
3-7.出来たデザインをweb上で確認する
最後に書いたCSSがどのように反映されるか確認しましょう。
ダウンロードしていただいフォルダの中の「index.html」ファイルをブラウザで開くと、CSSの内容が反映されて表示されます。
今回はよく使われるCSSを元にwebページを作成して、初心者でもCSSが書けるようにご紹介しました。
CSSセレクタを書いて、その中にプロパティと値を書いていくことを繰り返すことによってCSSが書けるようになるはずです。
4.CSSの書き方で注意すること
CSSは書いていくときに注意する点が大きく分けて4つあります。
特に後から見てわかりやすいCSSを書くことが重要です。
もしルール通りにCSSが書けたとしても、整理された書き方でなければ後で修正するときに時間がかかってしまいます。
CSSはあなたが後から見る以外にも、他の人が修正や更新をすることもあるのでわかりやすく書く必要があるのです。
4-1.スペルミスや書き忘れに気をつける
CSSを書くときはスペルミスが起きやすいです。
特にセミコロン(;)や閉じ括弧を忘れやすく、書き忘れてしまうとCSSが適用されません。
HTMLエディタに書く場合は、エディタによってスペルミスがあればエラーを表示してくれるものもあります。
しかし、エラーを表示してくれるエディタを使っていないと、どこにスペルミスがあるのか探すのに苦労するでしょう。
CSSを書く際は、スペルミスが起きないように同じCSSはコピーして貼り付けるなど、なるべくCSSをキーボードで打つ手間を省きましょう。
※エディタを使っていればCSSを自動で打ち込める機能(自動補完)があるので、スペルミスが起きにくいです。
4-2.リセットCSS(reset.css)を最初に読み込ませる
リセットCSSとはどのブラウザでもCSSを同じように表示させるために、ブラウザで既に設定されているCSSをリセットするものです。
ブラウザによってはそれぞれのCSSをどのように表示するのか、初めから決められているものがあります。
例えば、代表的なものでinputタグやHタグは、Microsoft EdgeとGoogle Chromeでは表示が変わります。
リセットCSSを使うことでブラウザで設定されているCSSがリセットされて、どのブラウザでも同じ表示がされるようにすることが出来るのです。
今回ダウンロードしていただいたサンプルファイル一式にも、リセットCSSというファイルが入っています。
CSSを書くときは必ずリセットCSSを適用させましょう。
4-3.HTMLで書いた順にCSSを記述する
CSSはHTMLで書いた順番通りに書いていくようにしましょう。
順番通りに書いていくと「どのHTMLのタグ」に「どのCSS」が適用されているのか一目で確認することが出来ます。
CSSを書いていくにつれて、後からどのCSSがどこに適用されているのかがわかりにくくなります。
そのため、HTMLで書いた順番通りにCSSを書いて、後から見てもわかりやすくする必要があるのです。
4-4.プロパティをアルファベット順に並べる
プロパティはアルファベット順に上から並べて書くことをおすすめします。
上から順にアルファベット順で書いていけば、プロパティを見つけやすくなるからです。
プロパティの順番に決まりはないのですが、見つけやすくするためにもアルファベット順にして書きましょう。
5.まとめ
CSSは文字の色を変えたり、背景色を変えたりと様々なことが出来る言語です。
基本文法があるので、それに沿って書いていけば初心者でもCSSが書けます。
しかし、CSSの書き方そのものを覚えようとすると、覚えることが多くてCSSが書けるようになりません。
むしろ、難しく感じてしまうでしょう。
今回のように実際にwebサイトなどを作りながら、CSSを書いていったほうがよく使うCSSの書き方を効率よく覚えることが出来ます。
そうすれば、初心者でもCSSが徐々に書けるようになるでしょう。
最後にデジタルハリウッドSTUDIO横浜についてご案内!!
STUDIO横浜は駅直結の好立地で学習ができます！
渋谷駅 – 横浜駅 約30分
茅ヶ崎駅 – 横浜駅 約25分
横須賀駅 – 横浜駅 約45分
武蔵小杉駅 – 横浜駅 約10分
川崎駅 – 横浜駅 約10分
乗り継ぎなし！駅直結で雨に濡れる心配なしの好立地はSTUDIO横浜だけ！
神奈川県初のデジタルハリウッド STUDIOへどうぞお越しください♪
