ホームページ制作の勉強をし始めたけど、なかなか思い通りのデザインが作れるようにならない・・・。そんなお悩みはありませんか？実際CSSは、思ったより複雑な点が多く、仕組みも理解したはずなのになぜか動かないことがとても多いです。
でも実は、あるコツを掴めば、誰でもCSSを使いこなしてカッコイイデザインが作れるようになるんです！是非あなたもコツを掴んで、あなただけのかっこいいホームページを作ってみてください！
なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。
目次
「セレクタ」とは、<div class="container"></div> のようなhtmlタグにおける、「class="container"」の部分のことです。
基本的にCSSでは、この「セレクタ」に対し、各デザインの設定をしていくようなイメージです。
実際には、HTMLファイルに
と記述し、CSSファイルに
のように設定することで、containerというclassが付けられたタグに対し、文字の色を赤にすることができます。
CSSファイルの「.（ピリオド）」は、htmlタグ内の「class」を意味し、「containerというclassを持つタグに対し、color:redを設定する」といった意味の記述になっています。
CSSの基本形はこれだけで、後はbackground-color等、各項目を設定していきます。また、そういった項目は、一つ一つ覚えるものではなく、「必要に応じて検索するもの」と覚えましょう。試しに「背景色 CSS」で検索すると、一番最初にbackground-colorの設定に関するページが見つかります。
こちらの画像は、paddingとmarginの説明によく使われる図です。例えば、「width:100px,height:100px」のdivisionがあったとします。その場合,
・margin:10pxと設定→その周囲との幅が10pxになる
・padding:10pxと設定→その内側に10pxが足される（横幅,縦幅ともに20pxずつ追加される計算になります）
といったことが起こります。
用途としては、marginは基本的に要素間のスペースを作るために、marginは例えばテキストが要素の外周にピッタリくっついてしまうことを防ぐために使われます。
２つの要素（タグ）を横に並べたいときはどのようにすればいいのでしょうか？この簡単そうな処理に初心者の方はまず苦戦することが多いようです。
まず、この「要素の横並び」に関して覚えることはこの２つ
・要素を横に並べたいときは「float:left;」を使おう！
・「float:left」を設定した要素には必ず横幅（width）を設定しよう！
です。
特に不慣れな方は、２番めを忘れがちなので注意が必要です。
せっかくfloat:left;を設定しても、横幅を設定してあげないと、要素は横並びにはなってくれません。例えば全体の横幅が1000pxで、中に２つの要素を横に並べたいときは、中の要素を500px以下に設定する必要があります。
「float」と並んでもう一つ見かけによらず厄介なのが、「中央揃え」です。
HTMLは論文を共有するために作られた、という経緯があるため、基本的に「文字は左上から」というのが決まってしまっています。
例えば、1000pxの要素の中にある300pxの要素を中央にしたい場合は、以下のように設定します。
ポイントは「margin: auto;」です。他にもやりかたはありますが、これで文字を中央に寄せることができます。
他にも、文字を縦に中央揃えしたいときがあります。例えば、50pxの縦幅をもつ要素で普通にテキストを書いてしまうと、下に余分に空白ができてしまいます。そういった場合は以下のように書きましょう。
ここでのポイントは「line-height」です。これを、要素のheightと同じにすることで、テキストを縦に中央に揃えることが出来ます。
また、CSSに関する情報はいろんな人が発信してくれているので、google検索により凝ったデザインですらもやり方が見つかります。
おしゃれなボタンを作りたいときは、「CSS ボタン デザイン」等で調べればかなりいろんなボタンの作り方が出てくるし、フォームやリストに関しても同様に使えます。
以上のポイントを押さえていれば、たいていのCSSデザインは出来てしまいます！
是非皆さんもこれを気に、あなただけの素敵なホームページを作ってみてください！
INTERNOUS,inc. All rights reserved.
