トップへ戻る

アフィリエイト CSS

このエントリーをはてなブックマークに追加   

アフィリエイターが知るべき CSSの基礎的な部分とは?

まず、前回のタグから見てみてましょう。カッコ類はタグを省いています。

 

a href="リンク先" img src="画像のURL" alt="画像の説明" width="画像の幅" height="画像の高さ" /a

 

これがバナーを表示させるコードでしたね。

 

これにリンク先や画像のURLなどを、ちゃんと入れて貼り付ければ
バナーが表示されます。表示されることは間違いないのですが、
ここでひとつ問題があります。

 

それは、何もスタイルが適用されていないので、
前後にテキストや画像があると、バナーにぴったりくっついてしまうという点です。

 

バナーやテキスト同士が詰まって表示されていたら
見た目がとても窮屈ですよね。

 

そこで、今回はこのバナーの周りに余白を設ける方法について
基礎的な部分からお話させていただきます。

 

余白のことを英語では「margin(マージン)」といいますが、
余白を設けるときに使う記号も「margin」です。

 

実際のコードを見てみましょう。「style="margin:◯px;"」
こんな感じで記入します。

 

「margin:◯px;」の部分が、「余白が◯ピクセル」という意味になります。

 

これでバナーの四方にどのくらいの余白を入れるかが設定できます^^

 

はい、ここで新しい記号が出てきたことに気が付かれたと思います。
style="◯◯"ですね。

 

これは、「style」という文字の通り、スタイルを記述するための記号です。

 

スタイルとは何かといいますと、画像であれば、余白や枠のライン、
表示させる位置などデザインに関する設定のことです。

 

これを活用できるようになると、画像に影を入れたり、画像を斜めに傾けたり、
半透明にしたり、カーソルを合わせたときに変化させることもできるようになります。

 

いろいろできるようになると、これが面白いんですよねー。

 

話が脱線してしまいましたが、
実際に余白を設定したバナーのコードを見てみましょう。

 

a href="" img src="" style="margin:◯px;"

 

こんな感じでimgタグの中に画像のスタイルを記入していきます。

 

さて今設定した「margin:◯px;」は
バナーの四方の余白を設定する方法でした。

 

でも実際には、「上の余白だけもっと大きくしたい」
「四方じゃなくて右側だけ余白を入れたい」

 

「上下は要らないから左右の余白だけいれたい」など
いろんな状況があると思います。

 

 

そういう場合のために、マージンには個別の設定もできるようになっています。
ひとつずつ見ていきましょう。

 

margin-top:◯px; → 上だけ余白を入れる
margin-right:◯px; → 右側だけ余白を入れる
margin-left:◯px; → 左側だけ余白を入れる
margin-bottom:◯px; → 下だけ余白を入れる

 

「top」「right」「left」「bottom」など、どれも英単語が少し分かる方であれば
直感的に理解できるコードだと思います。

 

例えば、右と左だけに余白を入れるときは、こんな感じになります。

 

a href="" img src="" style="margin-right:◯px; margin-left:◯px;"/a

 

このように「style="◯◯"」の中に
半角スペースを入れて2つとも入れてしまえば大丈夫です。

 

では、四方の余白をバラバラに設定したいときは
どうしたら良いでしょうか?

 

a href="" img src="" style="margin-top:◯px; margin-right:◯px; margin-bottom:◯px; margin-left:◯px;"

 

これでも設定できますが、長くなってしまって美しさに欠けてしまいますね。

 

こういうときは、margin:◯px ◯px ◯px ◯px;

 

という風にスペースを空けて4つ値を入れることで
「上 右 下 左」の順番で
余白の設定ができるようになっています。

 

12時の位置から時計回りになっていると
覚えるといいですね。

 

例えば、margin:10px 15px 5px 20px;とした場合は、

 

margin:[上] [右] [下] [左];
なので、

 

上が10ピクセル
右が15ピクセル
下が5ピクセル
左が20ピクセル

 

という形になります^^ ここまで大丈夫でしょうか?

 

このように状況に合わせた書き方は他にも存在します。

 

上下と左右をそれぞれ同じ値にしたい場合
margin:◯px ◯px; → margin:[上下] [左右];

 

左右は同じでいいけど上下は違う値にしたい場合
margin:◯px ◯px ◯px; → margin:[上] [左右] [下];

 

こんな感じですね。

 

一度に覚えるのはちょっと大変かもしれませんが、
書き方を便利に省略できる方法があるということだけでも
頭に入れておくといつか実際に使う日が来ると思いますよ。

 

ちょっとしたひとりごと・・・

 

あと数十年経つと人間の知能を、コンピューターが越える日が来るといわれています。

 

でも、僕は人間とコンピューターとの間には、今後も埋めることができないであろう
決定的な違いがひとつあると思っています。

 

それは何かといいますと
人間には「意識」があるということです。

 

・人が進化すること
・個性的であること
・創造力があること

 

上記のような人間が人間であることの根本的な原因は
「意識」にあると思います。

 

たとえば、専業主婦を20年間やっている人が
一流のシェフになれるわけではないように、

 

毎日、料理をしているということ自体が、
上達に結びつくわけではありませんよね。

 

なぜなら、どんなことを意識して
それに取り組んでいるかということが
決定的に違うからです。

 

つまり、上達って意識がとても大事だということです。

 

CSSの使い方というのは他にも存在していて、
基本的な使い方としては全部で3通りあります。

 

1.CSSを外部ファイルにして読み込ませる方法。
2.styleタグとして書く方法。
3.タグの中にstyle属性として書く方法。

 

これだけだと、ちんぷんかんぷんなので、
1つずつ詳しく見ていきたいと思います^^

 

1.CSSを外部ファイルにして読み込ませる方法。

 

これは一番最初にお話させていただいた方法です。

 

HTMLとCSSファイルを2つ用意して
2つをリンクさせるという方法ですね。

 

これが一般的な使い方というのは
先ほどお話させていただいた通りです。

 

2.styleタグとして書く方法。

 

HTMLファイル内でstyleタグを使用すると

 

style〜/style
の間はCSSになるという仕組みがあります。

 

これを利用して
HTMLファイル内にCSSを記入していくというものです。

 

 

3.タグの中にstyle属性として書く方法。

 

これが前回、バナーの余白を設定するのに
使用した方法でしたね。

 

img src="" style="margin:◯px;"

 

こんな感じでタグの中に埋め込みます。

 

さて、CSSの使い方を3つ見ていきましたが、
1番最初の方法を除いて
2番めと3番目の方法を「インライン化」と呼びます。

 

インライン化というのは、CSSを外部ファイル化せずに
HTMLの中に直接、埋め込む方法のことを言います。

 

「3つ書き方があるのは分かったとして何が違うの?」
という疑問が沸いた方がいらっしゃるかもしれません。

 

ここで3つの違いについてお話したいと思います。

 

ちょっと専門的な話にはなってしまいますが、
HTMLの読み込み速度が違ってくるというのがポイントです。

 

読み込み速度という点で考えた場合、
CSSの書き方として以下の3つが重要になります。

 

@小さなCSSのhead内にstyleタグで直接書くこと。

 

ACSSが大きなデータになる場合には外部ファイル化させること。

 

Bタグの中には直接書かないこと。

 

ちなみに@のhead内というのは、head〜/headの間に埋め込むという意味になります。

運営者のネット集客本

アフィリエイト概要編

アフィリエイト準備編

無料ブログ編

デザイン編

サイトの基礎を学ぶ編

SEO初歩編

アフィリエイトまとめ編