アフィリエイターが知るべき ＣＳＳの基礎的な部分とは？
まず、前回のタグから見てみてましょう。カッコ類はタグを省いています。
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="◯◯"」の中に
半角スペースを入れて２つとも入れてしまえば大丈夫です。
では、四方の余白をバラバラに設定したいときは
どうしたら良いでしょうか？
a href="" img src="" style="margin-top:◯px; margin-right:◯px; margin-bottom:◯px; margin-left:◯px;"
これでも設定できますが、長くなってしまって美しさに欠けてしまいますね。
こういうときは、margin:◯px ◯px ◯px ◯px;
という風にスペースを空けて４つ値を入れることで
「上 右 下 左」の順番で
余白の設定ができるようになっています。
12時の位置から時計回りになっていると
覚えるといいですね。
例えば、margin:10px 15px 5px 20px;とした場合は、
margin:[上] [右] [下] [左];
なので、
上が10ピクセル
右が15ピクセル
下が5ピクセル
左が20ピクセル
という形になります＾＾ ここまで大丈夫でしょうか？
このように状況に合わせた書き方は他にも存在します。
上下と左右をそれぞれ同じ値にしたい場合
margin:◯px ◯px; → margin:[上下] [左右];
左右は同じでいいけど上下は違う値にしたい場合
margin:◯px ◯px ◯px; → margin:[上] [左右] [下];
こんな感じですね。
一度に覚えるのはちょっと大変かもしれませんが、
書き方を便利に省略できる方法があるということだけでも
頭に入れておくといつか実際に使う日が来ると思いますよ。
ちょっとしたひとりごと・・・
あと数十年経つと人間の知能を、コンピューターが越える日が来るといわれています。
でも、僕は人間とコンピューターとの間には、今後も埋めることができないであろう
決定的な違いがひとつあると思っています。
それは何かといいますと
人間には「意識」があるということです。
・人が進化すること
・個性的であること
・創造力があること
上記のような人間が人間であることの根本的な原因は
「意識」にあると思います。
たとえば、専業主婦を20年間やっている人が
一流のシェフになれるわけではないように、
毎日、料理をしているということ自体が、
上達に結びつくわけではありませんよね。
なぜなら、どんなことを意識して
それに取り組んでいるかということが
決定的に違うからです。
つまり、上達って意識がとても大事だということです。
CSSの使い方というのは他にも存在していて、
基本的な使い方としては全部で３通りあります。
１．CSSを外部ファイルにして読み込ませる方法。
２．styleタグとして書く方法。
３．タグの中にstyle属性として書く方法。
これだけだと、ちんぷんかんぷんなので、
１つずつ詳しく見ていきたいと思います＾＾
１．CSSを外部ファイルにして読み込ませる方法。
これは一番最初にお話させていただいた方法です。
HTMLとCSSファイルを２つ用意して
２つをリンクさせるという方法ですね。
これが一般的な使い方というのは
先ほどお話させていただいた通りです。
２．styleタグとして書く方法。
HTMLファイル内でstyleタグを使用すると
style～/style
の間はCSSになるという仕組みがあります。
これを利用して
HTMLファイル内にCSSを記入していくというものです。
３．タグの中にstyle属性として書く方法。
これが前回、バナーの余白を設定するのに
使用した方法でしたね。
img src="" style="margin:◯px;"
こんな感じでタグの中に埋め込みます。
さて、CSSの使い方を３つ見ていきましたが、
１番最初の方法を除いて
２番めと３番目の方法を「インライン化」と呼びます。
インライン化というのは、CSSを外部ファイル化せずに
HTMLの中に直接、埋め込む方法のことを言います。
「３つ書き方があるのは分かったとして何が違うの？」
という疑問が沸いた方がいらっしゃるかもしれません。
ここで３つの違いについてお話したいと思います。
ちょっと専門的な話にはなってしまいますが、
HTMLの読み込み速度が違ってくるというのがポイントです。
読み込み速度という点で考えた場合、
CSSの書き方として以下の３つが重要になります。
①小さなCSSのhead内にstyleタグで直接書くこと。
②CSSが大きなデータになる場合には外部ファイル化させること。
③タグの中には直接書かないこと。
ちなみに①のhead内というのは、head～/headの間に埋め込むという意味になります。
