CSS入門を果たすために知るべき、たった3つの重要ポイント

css3_taxonomy_and_status_by_sergey_mavrody-svg_

ホームページ制作の勉強をし始めたけど、なかなか思い通りのデザインが作れるようにならない・・・。そんなお悩みはありませんか?実際CSSは、思ったより複雑な点が多く、仕組みも理解したはずなのになぜか動かないことがとても多いです。

でも実は、あるコツを掴めば、誰でもCSSを使いこなしてカッコイイデザインが作れるようになるんです!是非あなたもコツを掴んで、あなただけのかっこいいホームページを作ってみてください!

目次

基本はこれだけ!まずは「セレクタ」の使い方を覚えよう!

「セレクタ」とは、<div class="container"></div> のようなhtmlタグにおける、「class="container"」の部分のことです。

基本的にCSSでは、この「セレクタ」に対し、各デザインの設定をしていくようなイメージです。
実際には、HTMLファイルに

<div class="container"></div>

と記述し、CSSファイルに

.container{
        color: red
}

のように設定することで、containerというclassが付けられたタグに対し、文字の色を赤にすることができます。
CSSファイルの「.(ピリオド)」は、htmlタグ内の「class」を意味し、「containerというclassを持つタグに対し、color:redを設定する」といった意味の記述になっています。

CSSの基本形はこれだけで、後はbackground-color等、各項目を設定していきます。また、そういった項目は、一つ一つ覚えるものではなく、「必要に応じて検索するもの」と覚えましょう。試しに「背景色 CSS」で検索すると、一番最初にbackground-colorの設定に関するページが見つかります。

複雑に感じるのは最初だけ!「paddingは内側」、「marginは外側」と覚えよう!

css_padding_vs_margin
CSS Margin vs Padding, Box Model Tutorial

こちらの画像は、paddingとmarginの説明によく使われる図です。例えば、「width:100px,height:100px」のdivisionがあったとします。その場合,
・margin:10pxと設定→その周囲との幅が10pxになる
・padding:10pxと設定→その内側に10pxが足される(横幅,縦幅ともに20pxずつ追加される計算になります)
といったことが起こります。

用途としては、marginは基本的に要素間のスペースを作るために、marginは例えばテキストが要素の外周にピッタリくっついてしまうことを防ぐために使われます。

最初の難関!「float」を使いこなせれば一人前!

2つの要素(タグ)を横に並べたいときはどのようにすればいいのでしょうか?この簡単そうな処理に初心者の方はまず苦戦することが多いようです。
まず、この「要素の横並び」に関して覚えることはこの2つ
・要素を横に並べたいときは「float:left;」を使おう!
・「float:left」を設定した要素には必ず横幅(width)を設定しよう!
です。

特に不慣れな方は、2番めを忘れがちなので注意が必要です。
せっかくfloat:left;を設定しても、横幅を設定してあげないと、要素は横並びにはなってくれません。例えば全体の横幅が1000pxで、中に2つの要素を横に並べたいときは、中の要素を500px以下に設定する必要があります。

実は厄介!文字や空間の中央揃えはやり方がある!

「float」と並んでもう一つ見かけによらず厄介なのが、「中央揃え」です。
HTMLは論文を共有するために作られた、という経緯があるため、基本的に「文字は左上から」というのが決まってしまっています。

例えば、1000pxの要素の中にある300pxの要素を中央にしたい場合は、以下のように設定します。

<div class="big">
<div class="small"></div><!– これを中央にしたい –>
</div>

.big{
width: 1000px;
}

.small{
width: 300px;
margin: auto;
}

ポイントは「margin: auto;」です。他にもやりかたはありますが、これで文字を中央に寄せることができます。

他にも、文字を縦に中央揃えしたいときがあります。例えば、50pxの縦幅をもつ要素で普通にテキストを書いてしまうと、下に余分に空白ができてしまいます。そういった場合は以下のように書きましょう。

<div class="big">
TEXT <!– これを縦に中央にしたい –>
</div>

.big{
height: 50px;
line-height: 50px;
}

ここでのポイントは「line-height」です。これを、要素のheightと同じにすることで、テキストを縦に中央に揃えることが出来ます。

車輪の再発明を避けよう!凝ったデザインもぐぐれば見つかる!

また、CSSに関する情報はいろんな人が発信してくれているので、google検索により凝ったデザインですらもやり方が見つかります。
おしゃれなボタンを作りたいときは、「CSS ボタン デザイン」等で調べればかなりいろんなボタンの作り方が出てくるし、フォームやリストに関しても同様に使えます。

以上のポイントを押さえていれば、たいていのCSSデザインは出来てしまいます!
是非皆さんもこれを気に、あなただけの素敵なホームページを作ってみてください!

【PR】もっとプログラミングが勉強したくなったら・・・

プログラミングを勉強する手段はたくさんありますが、もし「最速で」技術を習得したいのであれば、プログラミングスクールに通うことをオススメします!中でも「CodeCamp(コードキャンプ)」は受講者からの評判も大変良く、完全にオンラインであるため全国どこからでも受講することが可能で、更に今なら無料体験を受講することも可能です!
もし興味が有る場合は、下記リンクより、CodeCamp(コードキャンプ)の公式サイトにジャンプしてみてください!

「プログラミングのオンラインスクールのCodeCamp」を無料で体験しよう! >>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です