アフィリエイターのための超基礎CSS

アフィリエイターとしてこれだけは知っておきたいCSSです。

アフィリエイターのための超基礎HTML&CSS で基本の書き方を書きましたので、今度は具体的な、これだけは覚えておきたいCSS集です。

CSSでデザインできることは本当にたくさんありますが、厳選しました。
これだけ知ってれば最低大丈夫でしょう。

コピペして使えますので、慣れないうちはコピペで使ってください↓

基本の形

基本の形はこうです。いつもこのパターンなのでこれは覚えてください^^

超基礎HTML&CSSのところでも言いましたが「“　”（ダブルクォーテーション）」の中がCSSになっています。

 

CSSを2個以上入れる

文字を大きくして、赤字にもしたいとき、なんてありますよね。

CSSを2個以上入れたいときはこう。「“　”（ダブルクォーテーション）」の中に「半角スペース」を挟んでやります。

 

文字を大きくする

文字装飾は超基本です。文字を大きくして目立たせたいときに使います。 「font-size」の後ろに「：（コロン）」を入れて、20pxとか、150%とか単位を指定します。

<span style="font-size: 30px;">文字を大きく</span><br />
<span style="font-size: 50px;">文字をさらに大きく</span>

 

と書くと

となります。

 

文字の色を変える

文字の色を変えて、目立たせます。

「#000000」は黒、「#FFFFFF」は白、「#FF0000」は赤です。

先頭に「#」がついて、0～Fの6ケタで書きます。

<span style="color: #000000;">黒にするよ～</span><br />
<span style="color: #ff0000;">赤にするよ～</span>

 

と書くと

となります。

 

文字揃え

文字、画像などの位置を変えます。左右、真ん中が変えられます

「text-align」の後にleft,center,rightの指定をします。

<p style="text-align: left;">左だよ～</p> 
<p style="text-align: center;">真ん中だよ～</p> 
<p style="text-align: right;">右だよ～</p>

 

と書くと

となります。

 

線

線は太さと色とスタイルを指定できます。

線は3つの値を入れられるのでちょっと特殊な書き方ですが、太さと色とスタイルそれぞれの間を「半角スペース」で空けます。

<div style="border: 5px #ff0000 solid;">周りに5pxの赤い実線を付けるよ～</div><br />
<div style="border: 3px #00ffff dotted;">周りに3px水色の点線を付けるよ～</div>

 

と書くと

となります。

 

マージン

マージンとは余白の意味です。画像の位置などの見た目が悪く、スペースを空けたいな～なんてときに使います。上下左右のどこでも指定可能です。

似たやつに「パディング」というのもありますが、アフィリエイターの基礎CSSとしては、マージンだけで大丈夫だと思います。

そして色んな書き方があるんですが、覚えるのはこれ一行！

<div style="margin:上 右 下 左;">周りにスペースを空けるよ～</div>

 

書き方ですが、スペースを空けたいものを「<div></div>」で囲みます。 その後、「style=”margin:;”」と書いたら、上から時計回り、上 右 下 左の順で「○○px」といれてやります。それぞれの間はスペースを入れます。

めんどくさいので↓コピーしましょう^^

<div style="margin:10px 20px 30px 40px;">スペースを入れたいものをはさむ</div>

 

上の例だと、

上10px、右20px、下30px、左40pxの余白ができあがります。