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

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

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

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

基本の形

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

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

CSSを2個以上入れる

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

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

文字を大きくする

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

と書くと

となります。

文字の色を変える

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

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

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

と書くと

となります。

文字揃え

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

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

と書くと

となります。

線

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

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

と書くと

となります。

マージン

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

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

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

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

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

上の例だと、

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

Tweet

Check

Pocket