月別アーカイブ: 2015年6月

角丸

 CSSではコンテンツの角に丸みをつける“角丸”という機能があります。試しに下のコンテンツに角丸をつけたいと思います。

コンテンツ

コンテンツに角丸をつけるには、border-radiusというタグを指定してあげると実現可能です!試しに上のコンテンツにborder-radius: 10px;を指定してあげると以下のように角丸がついてくれます。

コンテンツ

 ちなみに角丸を使えばコンテンツを正円にすることもできます!コンテンツを正円にするには以下のようにborder-radiusの値を設定してあげます。
[css]
{
border-radius: 50%;
}
[/css]
このように設定してあげることで以下のようにコンテンツを正円にさせることができます!

コンテンツ

 border-radiusはコンテンツのデザインに角丸を入れたい!となった時にとても活用できるタグなので、是非とも覚えて活用していきましょう!

ボックスシャドウ

 コンテンツに影を付ける方法としてCSSの「ボックスシャドウ」というものがあります。そこで今回はボックスシャドウの付け方についてお話したいと思います。

そもそもボックスシャドウというのはどういうもの?

 ボックスシャドウというのは、コンテンツに影を付けることでそのコンテンツを立体的に見せることができるようになる表現方法の1つになります。試しに以下のコンテンツに影をつけたいと思います!

コンテンツ

CSSでのボックスシャドウの書き方

 CSSでボックスシャドウを指定する時には以下のように書きます。
[css]
{
box-shadow: 3px 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px 3px #000;
-moz-box-shadow: 3px 3px 3px 3px #000;
}
[/css]
このように指定することで、先ほど紹介したコンテンツを以下のように影を付けることができます。

コンテンツ

ちなみに影の太さは、
box-shadow: 3px 3px 3px 3px #000;
ここに入れる値で設定できるので、ご自身のつけたい影の太さを設定していただけたらと思います。

疑似要素

 前回は疑似クラスについてお話しましたが、今回は疑似要素についてお話したいと思います!この疑似要素を覚えると、今までは画像を使わないと表現できなかったものもCSSのみで表現できるようになるので、この機会に覚えておきましょう!

疑似要素ってどういうもの?

 まず疑似要素とは何なのかについて簡単に解説したいと思います。疑似要素とは、コンテンツ内にあるある一部分の要素にのみ指定できるものになります。疑似クラスが要素全体のCSSを指定するものだったのに対し、この一部分の要素にのみ指定できるというのが疑似要素と疑似クラスの違いになります。
例えば、liタグの最初の方に矢印を表示させたい、とかliタグの最後の方に矢印を表示させたい、といった時に使うのがこの疑似要素になります。
また、疑似要素の場合はダブルコロン「::」を前部分に付ける必要があります。これによって疑似クラスと疑似要素の違いを判別してくれる、ということですね。

 疑似要素にはいろいろなものがありますので、一度どういったものがあるのか調べてみてはいかがでしょうか??

疑似クラス

 今回は疑似クラスについてお話したいと思います。疑似クラスはCSSを記述していくうえで必要な知識になるので、是非とも覚えておきましょう!!

疑似クラスとは?

 CSSを記述していくうえで、:visited:nth-child(○)などシングルコロンのあとに語句を入れて記述するものが疑似クラスというものになります。指定した要素全体のCSSを設定する時に使うものというふうに覚えておいて頂けたらと思います。例えばaタグであればカーソルを乗せた時にデザインを変更したい(下線を表示させたりなど)場合には:hoverを使いますし、クリックしたのちのデザインを変更させたい時は:visitedを使います。
それ以外にもliタグの中で2つ目のリストの文字色を変えたい、といった時には:nth-child(2)と指定したうえで文字色を変更してあげるとよいかと思われます!
基本的にはnth-child(○)のカッコ内の部分に適応させたい順番(3番目だったら3)の数字を入れてあげることで、その順番の時のものだけ特定のCSSを指定できるということになります!

疑似クラスを使う意味って?

 では何故疑似クラスを使う必要があるのかというと、htmlソースの方で特定のclass指定をする必要がないというのが挙げられます。今までだったら、例えば
[html]
<ul>
<li>あああああ</li>
<li class="li">あああああ</li>
<li>あああああ</li>
</ul>
[/html]
といった風に特定のクラスを指定してあげて、そのうえでそのクラスに対して特定のCSSを指定してあげるというのが常識でした。
 それがこの疑似クラスという機能が出たおかげでhtmlソースそのものにはクラスを追記してあげなくても、CSSの方で
[css]
li:nth-child(2) {
   …
}
[/css]
という風に記述してあげればリストの2番目に特定のCSSを指定できるようになりました。

まとめ

 以上が疑似クラスの概要になります。これがなかなか便利で、CSSのみで特定のコンテンツに対してデザインを指定できるというのがコーディングする上でとても楽だったりします。クラスをhtmlの方で追記するとゴチャゴチャになってしまうこともあるので、疑似クラスで何番目の方にどのデザインを…といった風に指定する方がスッキリとしたhtmlソースになることもあるので是非とも使ってみましょう!
(例外として、htmlソースの方に記述してあげた方がスッキリする場合もあるので、そこだけご注意を)

position

 今回はpositionについてお話したいと思います。
positionの種類は以下のように区分することができます。

absolute 絶対位置への配置。
親ボックスにpositionプロパティのstatic以外の値が指定されている場合は親ボックスの左上が基準位置となり、位置を指定することができます。
relative 相対位置への配置。
positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。
fixed 絶対位置への配置となることはabsoluteと同じはありますが、スクロールしても位置が固定されたままとなるのがfixedの特徴になります。

という風に解説はしていますが、いまいち
「どういうこと?」
となっている方もいらっしゃると思います。そもそも“絶対位置”って何…みたいな。
平たくいってしまえば、relativeされたものの上にコンテンツを置きたい場合はabsoluteを使う…といった感じでしょうか。
そして、fixedとはスクロールをしてもブラウザの画面から見て指定した位置から動かない指定となり、ブラウザをスクロールしてもずっと同じ位置に固定で表示されるもの…ということになります。

 こればかりは実際に自分の手でCSSを設定してみて目で確認しないとわからない部分だと思いますので、実際にやってみて確認してみましょう。

floatとclearfix

 今回はfloatclearfixについてお話したいと思います!

floatとは

 まずfloatというのは、指定したコンテンツを浮かせた状態にする…というイメージで覚えてもらえたらと思います。画像で表すと以下のような感じ。
float
このようにコンテンツを浮かせることで、コンテンツの配置を決めることができます。

浮かせることでコンテンツを移動させることができるようになり、場所を指定することができるようになる

といった感じでしょうか。
 そんなfloatタグですが、コーディングでよく使われるのがナビメニューのレイアウトの時。以下のようにナビメニューのliをfloat: left;させることでliを横並びにさせることができます。
[html]
li {
float: left;
width: 200px;
text-align: center;
}
[/html]

clearfixとは

 続いてclearfixについて紹介したいと思います。このclearfixとは、

floatで浮かせたコンテンツのfloatを解除する

ものとなります。何故floatを解除させる必要があるのか?というと、floatで浮かせたことでfloatさせるコンテンツがあった元々のコンテンツが浮かせたコンテンツを認識しなくなり、レイアウト崩れを起こしてしまうことがあるからです。そのため、clearfixでfloatを解除し、大元のコンテンツが浮かせていたコンテンツを認識し、レイアウト崩れを防ぐ必要があります。
 ちなみにclearfixの書き方は以下になります。
[css]
{
clear: both;
}
[/css]
こちらを該当コンテンツのCSSに記述してあげることでfloatを解除させることができますので、是非とも覚えておきましょう!

テーブルのcss

 コーポレートサイトの会社概要や、年表などでよく使われるのがtableタグと呼ばれるもの。これは表として表示してくれるものなので、先ほど紹介したような情報系の内容をまとめるのに便利なタグです。
 そこで、tableタグのよく使うcssについて以下に紹介したいと思います!

背景色を指定

見出し 内容
見出し 内容
見出し 内容

 上の見本のように、tableタグの各項目の見出しセルだけ色を変えたい!という時には以下のHTMLソースに対してcssを設定してあげます。

~HTML~
[html]
<table>
<tr><th>見出し</th><td>内容</td></tr>
<tr><th>見出し</th><td>内容</td></tr>
<tr><th>見出し</th><td>内容</td></tr>
</table>
[/html]

~CSS~
[css]
table th {
background: #999;
width: 30%;
}
[/css]
これで、上記見本のようにデザインすることができます!

tableの線を指定

見出し 内容
見出し 内容
見出し 内容

 続いて、テーブルの枠線を指定したいと思います!HTMLソースは先ほどの背景色を設定した時のものと同じものを使用すること前提になります。
[css]
table,table th,table td {
border: 1px solid #ff0000;
}
[/css]
このように記述することで、各セルに枠線をつけることができます!

まとめ

 以上が基本的なテーブルのcssになります。今回紹介した書き方を元に、作成するサイトの雰囲気に合ったデザインのテーブルを作りましょう!

ボックスのcss

 今回はコンテンツそのもののデザインに関してお話したいと思います!
見本として
[html]
<div id="mihon">
コンテンツ
</div>
[/html]
上記コードを介して説明したいと思います。

コンテンツの背景色を設定

 コンテンツの背景色を設定したい場合は以下のようにCSSを設定してあげます。
[css]
#mihon {
width: 100px;
height: 100px;
background-color: #ff0000;
text-align: center;
}
[/css]
このように設定すると、以下のように背景色をつけることができます!

コンテンツ

画像を背景として設定

 また、背景を画像で表示したい!という時にはbackground-imageという書き方をします。

mihon
例えば今回以下の画像を背景として表示させたい!という時には以下のようにCSSを指定してあげます。
[css]
#mihon {
width: 100px;
height: 100px;
background-image: url(背景として表示させたい画像ファイル);
text-align: center;
}
[/css]
このように設定してあげることで、

コンテンツ

このように画像を背景として表示してくれるようになります!

写真を背景として設定

 続いて、写真を背景として表示させたい場合の書き方を紹介したいと思います。コードとしては先ほど紹介したbackground-imageを活用します。
car-mihon
この写真をコンテンツの背景として設定したい場合は、以下のようにcssを指定してあげます。
[css]
#mihon {
width: 350px;
height: 113px;
background-image: url(http://webdesign-tokyo.net/wordpress/wp-content/uploads/car-mihon.jpg);
background-repeat: no-repeat;
text-align: center;
color: #0000ff;
font-weight: bold;
}
[/css]
今回は文字を見やすいように色と文字の太さを変えていました。この設定をすると、

コンテンツ

といった風に写真を背景として表示してくれるようになります!

まとめ

 このように、CSSでコンテンツの背景をいろいろと設定できることがおわかりいただけましたでしょうか。ものは試しでいろいろと設定してみるとよいかと思われます(^-^)/

文字のcss

 サイトの文字をデザインする時にcssで文字を装飾する方法があります。そこで今回はよく使う文字のcssについて紹介したいと思います!

font-size

 文字を装飾する上で、文字のサイズを大きくしたい!とした場合や、デフォルトの文字サイズを指定したい場合度はfont-sizeで文字のサイズを指定してあげます。大体のサイトでは1.4remと指定してあげることが多いため、
[css]
p {
font-size: 1.4rem;
}
[/css]
という風に指定してあげるとよいでしょう。

color

 文字の色を指定する時に使うのがこのfont-colorというものになります。例えば<p>~</p>で囲まれた文字の色を赤にしたい場合は
[css]
p {
color: #ff0000;
}
[/css]
と記述してあげることでこのように文字色を赤くすることができます!

font-weight

 続いて紹介するのは文字の太さを指定するcss。それはfont-weightというものになります!文字を太くしたい時は
[css]
p {
font-weight: bold;
}
[/css]
と指定してあげましょう!そうするとこのように太文字で表示してくれます!

まとめ

 今回紹介したもの以外にもいろいろ文字のcssはあるので、いろいろ調べてみましょう!

imgタグ

 imgタグとは、htmlファイルにて画像を表示させるタグになります。サイトに画像を表示させる方法としては
・imgタグでhtmlソース内に記述して表示させる方法
・CSSでコンテンツの背景に画像を表示させる方法

の2つがあります。CSSでコンテンツの背景に画像を指定して、高さと幅を決めてあげることでサイト内に画像を表示させる方法もあります。
※ただ、CSSで画像を表示させた場合、レスポンシブデザインで幅を変えた時にキレイに画像を表示させる方法が少し難しいという問題があります。

 imgタグで画像を表示させた場合、レスポンシブデザインでもキレイに縮小させてくれるのでオススメです!そんなimgタグの書き方は以下になります。

<img src=”画像ファイル名” alt=”画像が表示されなかった時の代替文字”>

このタグをhtmlファイル内の画像を表示させたいところに記述してあげることで画像を表示させることができます!

 ただ、これはimgタグ以外でも言えることですが画像があるところをちゃんと指定してあげないと画像が表示されないので、ちゃんと指定場所を確認してあげることが必要になります。基本的にはローカル上の場合は相対パスで指定してOKですが、WordPressなどのCMSを使った場合、絶対パス(URL)で指定しなければうまく表示されない場合もあるので、相対パスで画像を指定している状態でもしサーバーにアップして画像がうまく表示されていない場合は絶対パスで指定しなおしてみるなどの対処をしてみましょう!