コピペで使えるCSSサンプル

icoMoonで作ったwebアイコンフォント(以下:アイコン)のCSSにコピペで追加して使える簡単なコードサンプルと解説です。

 

CSSサンプルコードの使い方

 

おさらいですが、icoMoonのGet Codeで出てくる

 

HTMLをコピペ。CSSもコピペし、そこにこれから説明するCSSサンプルコードも追加コピペしてお使いください。

 

フォントのサイズ、カラー、背景色

a
font-size: 60px;color: #4a7087;
b
font-size: 60px;color: #545454;background-color: #ffb9c3;

 

背景を丸く

革包丁は色を黒(#000000と書いても)にして、サイズを60pxから40pxにしてみました。

桜マークの背景ピンク色の部分はborder-radius: 50%;で角の丸みを50%にしています。すると円が出来上がります。

 

 

枠線にする

革包丁のアイコン周りに実線、太さ3px、色はグレーの枠線をつけました。

border: solid 3px #afa39a;

solidをdottedにすると点線になるよ。調べてみると他にもあるよ。

先ほど桜マークの背景を50%で円にしましたが、10pxなどにすると角が少しだけ丸くなります。

border-radius: 10px;

 

要素の外側に余白を作る

アイコンに枠線を付けたせいで文字(革包丁の〜)との間が窮屈になってしまいました。これだとあまり美しくないので余白を作ります。

アイコンと文字の間をあける

右に余白を5pxです。margin-right: 5px;
marginは要素(例:革包丁とその周りにある枠線)の外側に余白を作ります。後で内側に余白を作るpaddingが出てくるともっと分かると思います。

 

 

アイコンと文字の余白を10pxと広げたもの。
そして枠線の角の丸みを左上と右下20px、右上と左下10pxと別々に設定したもの。

border-radius: 20px 10px;

2つ指定した場合は1番目の数字が「左上と右下」、2番目の数字が「右上と左下」となっています。

四角の四隅別々に指定したい場合border-radius: 10px 20px 30px 40px;などとすると左上から時計回りに角の丸みが全部違う形が出来ます◎

 

 

要素の内側に余白を作る

背景のピンクの丸と内側の桜マークの間が窮屈でこれもあまり美しくありません。先程は「要素の外側に」でしたが、「要素の内側に」余白を作ります。

回転、傾ける

それからアイコンを傾ける(回転)CSSも。

 

内側の余白はpaddingです。padding: 3px;とし、桜マークとピンクの丸の間に3pxの余白が出来ました。

傾かせるにはdisplay: inline-block; transform: rotate(-45deg);をセットで書いてください。時計回りと反対は-〇〇です。transform: rotate(90deg);とすれば右側に90度回転します。

このコードを知っていれば矢印のアイコンなど方向を示すものは1つ作っておくだけで色々使い回せそうです◎

 

transform:変身、deg:度 なるほど。

 

 

paddingとmarginで余白を作る

 

paddingとmarginで余白が設定出来るようになるとウェブページは見やすく、美しくなります。上で少し書きましたがもう少し詳しく説明します。

 

color: #000;
background-color: #dbdbdb;
padding: 10px;
border: dotted 5px #2396d6;
margin: 10px;

(左のpadding、border、marginを表している四角は解析ツール(デベロッパーツール)で見る事ができます。)

 

寝袋アイコン(a)に対してpaddingを10px、marginを10px、その間にドットのborderを5pxを設定したものです。背景色background-colorを付けると分かりやすいのでグレーを付けています。

 

 

アイコン自体の大きさは水色で表示される範囲、ピンクの中です。paddingやmarginを付けなければ水色のすぐ横に文字「寝袋の〜」がきます。このアイコンなら問題は無いのですが、、

 

このようにアイコンによってはmarginを説定しないと文字がピタッとくっつ付いてしまって見難いです。margin-rightを6px設定したら見やすくなりました◎

 

 

背景色(background-color)を設定している場合padding部分にも同じ色が付きます。緑色がpadding:10pxで広がった範囲です。
それに伴ってボーダー(border)を設定していた場合それが外側に広がります。

 

 

5pxのドットで設定したボーダー。ボーダーも右だけ、左だけなど設定できます。太さもそれぞれバラバラにもできます。

 

 

マージン、要素の外側の余白です。文字「寝袋の〜」との間に余白を作りたいだけならmargin-right:○px;でいいかもしれません。

 

左にも文字(News)がある場合はこれだとダメですね。

 

 

ボーダーを付けてpadding-rightを付けると円が右に歪みます。これは「要素の内側に余白を作る」paddingだからで、この場合の正解はmargin-rightです。marginは「要素の外側に余白を作る」なので円が崩れません。

 

コメントを残す

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