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

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

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

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

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

基本の形

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

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

月100画像作成_01

 

CSSを2個以上入れる

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

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

月100画像作成_03

 

文字を大きくする

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

 

と書くと

文字を大きく

文字をさらに大きく

となります。

 

文字の色を変える

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

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

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

 

と書くと

黒にするよ~
赤にするよ~

となります。

 

文字揃え

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

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

 

と書くと

左だよ~

真ん中だよ~

右だよ~

となります。

 

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

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

 

と書くと

周りに5pxの赤い実線を付けるよ~
周りに3pxの水色の点線を付けるよ~

となります。

 

マージン

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

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

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

 

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

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

 

上の例だと、

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

説明するのってけっこう難しいですね。間違いや質問などありましたらお気軽にくださいませ^^

はてなブックマーク - アフィリエイターのための超基礎CSS
LINEで送る
Pocket



いつも応援クリックありがとうございます。
お茶でも飲みながらごゆっくりしていってください^^

名字(漢字)
メールアドレス

トシおすすめの2大教材・ツール

トシはこの二つでアフィリエイト活動しています^^
本気で稼ぎたい方のための
大まじめな教材
初心者OK!の
No.1アフィリエイトツール☆

3Mアフィリエイト「LUREA」

LUREAのリアルな実践記とトシの特典案内はこちら

サイト作成ツール「SIRIUS」
【レスポンシブテンプレートプレゼント!】トシ限定特典付き購入はこちら

コメントを残す