厳選!Web初心者がまず覚えておきたいCSSリファレンス10選

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


最近、記事を書いていく中で少しづつWeb中級者に近づいて来たかなっ!?と、勝手に感じているWeb初心者のや~べ~です。

今回は、自分が今まで記事を書いてきた中で、早めに覚えておいた方が良いと思う「厳選CSSリファレンス10選」をまとめていきたいと思います。

 
まずは、CSSについて少し触れていきたいと思います。

 

スポンサーリンク

CSSとは?

HTMLで書いたWebサイトに装飾を施す方法です。

HTMLで書いたコンテンツに対応するように、スタイルシートにCSSを記述しておくと、ブラウザがCSSを反映させ、コンテンツを装飾して画面に表示してくれます。

スタイルシートとはstyle.cssなどの事をいい、通常、HTMLファイルとは別に存在します。

※今回の例では、HTMLにCSSを追記する方法で書いています。

 

スポンサーリンク

テキストに関するCSSリファレンス

 

1.font-size

フォントの大きさを変更できます。

font-size: 75%;

 
「コード」

 
「表示例」

文字の大きさ75%

文字の大きさ100%

文字の大きさ200%

 
その他、pxなどでも大きさを指定できます。

詳しくは↓サイトを参考にしてください。

参考サイト:HTMLクイックリファレンス(font-size)

 

2.font-weight

フォントの太さを変更できます。

font-weight: 700;

 
「コード」

 
「表示例」

文字の太さ「普通」

文字の太さ「太文字」

文字の太さ「さらに太文字」

 
さらに詳しく知りたい方は↓サイトを参考にしてください。

参考サイト:HTMLクイックリファレンス(font-weight)

 

3.line-height

行の高さを変更できます。

line-height: 48px;

 
「コード」

 
「表示例」

ここを基準に
↑行が少し高めなので、すき間が広がる
↑行がさらに高めなので、すき間がさらに広がる
↑行がもっと高めなので、すき間がもっと広がる

 
他にも、数値だけで指定する方法もあります。

詳しくは↓サイトを参考にしてください。

参考サイト:HTMLクイックリファレンス(line-height)

 
※フォントの種類も気になると思います。

当サイトの場合は、様々なサイトで良く使われている「メイリオ」というフォントを使っています。

 
導入方法は↓こちらのサイトを参考に導入してみて下さい。

参考サイト:ゼロからはじめるWordPress

 

スポンサーリンク

余白・間隔に関するCSSリファレンス

 

4.margin,5.border,6.padding

コンテンツの上下左右の余白、間隔を設定することができます。

margin: 10px 10px 10px 10px;
border: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;

 
概念は↓の図のようになります。

marginnado

 
他の設定方法は↓サイトを参考にしてください。

参考サイト:HTMLクイックリファレンス(margin)

参考サイト:HTMLクイックリファレンス(border)

参考サイト:HTMLクイックリファレンス(padding)

 

スポンサーリンク

背景色に関するCSSリファレンス

 

7.background-color

背景色の色を設定できます。

background-color: #24890d;

 
「コード」

 
「表示例」

背景が緑色

 
さらに詳しく知りたい方は↓サイトを参考にしてください。

参考サイト:HTMLクイックリファレンス(background-color)

 
色を指定する為のカラーコードは↓のサイトを参考にして下さい。

↓カラーコード一覧

参考サイト:モノトーン

monotonn

 
RGBと16進数、16進数からRGBにカラーコードを変換できるサイトです↓

↓カラーコード変換(例#24890d⇒rgb(36,137,13)※逆も可)

参考サイト:ColorHexa

colorhexa

 
※背景色を透過させる方法もあります。↓

background-color: rgba( 36, 137, 13, 0.55 );

最後の0.55の部分が透過度になります。

数値が少ないとより透明になります。

最初の3つの要素はRGBの数値です。

 
「コード」

 
「表示例」

背景が緑色(普通)

背景が緑色(少し透明)

 
↓サイトも参考になります。

参考サイト:CSS Lecture

参考サイト:にししふぁくとりー

 

横並び表示に関するCSSリファレンス

 

8.display

リストを横並びにできます。

display: inline-block;

 
詳しい使い方は↓のサイトを参考にしてください。

参考サイト:SCENE LIVE

参考サイト:delaymania

 

表示階層、位置に関するCSSリファレンス

 

9.z-index

コンテンツの表示階層を設定できます。

z-index: 1;

 
数字が大きい程、手前に表示されます。
(1~9999までの数値を設定できます。)

 
例として、当サイト左下のページトップへ戻るボタンとシェアボタンを参考に説明したいと思います。

 
コンテンツはz-indexを改めて設定していないので、一番下に表示されています。

ボタンは、z-index:9997;と設定しているので、コンテンツの上に表示されています。↓

shoeabotann2-k

 
シェアボタンを押すと、新しいモーダルウンドウが表示されます。

このモーダルウインドウはz-index:9998;と設定しているので、ボタンよりも手前に表示されています。↓

botann2-k

 
←実際にシェアボタンを押すと、確認できますっ!

 

10.position

表示位置の設定を変更できます。

position:fixed;

 
これも先ほどと同じ、シェアボタンの部分に実装しているのですが、position:fixed;と記述しておくと、そのコンテンツが最初に表示された画面上の位置に固定されます。

スクロールしても移動しないので画面に追従しているように表示させることができます。↓

shoeabotann2-k

 
positionの他のプロパティーについては↓のサイトを参考にして下さい。

参考サイト:たねっぱ!

 

まとめ

「厳選!Web初心者がまず覚えておきたいCSSリファレンス10選」ということで記事を書いてみましたがいかがでしたでしょうか?

今回紹介したCSSは本当に基本の部分で、デザインに凝ったサイトを創る場合には、さらに色んなCSSを覚える必要があります。

知識先行でまず勉強するというのは大変なので、自分のサイトのデザインを変更したいなと思ったら、参考となるサイトを探して、まずはマネしてみるということが重要だと思います。

当サイトも今の所、色んなサイトに紹介されている方法で自分なりにデザインをしています。

Web初心者のそこのあなたも様々なサイトを参考にして、デザインを作り込んでみてはいかがでしょうか?

 
ではではっ!(´∀`*)ノシ

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!
ブログランキング・にほんブログ村へ
にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

スポンサーリンク

この記事を読んでいる人はこちらの記事も読んでいます。(※広告も含む。)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSS、Push7はこちら!!

follow us in feedly

コメントを残す

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