アフィリエイターとしてこれだけは知っておきたい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の余白ができあがります。