やはり人生は勉強ですよ！
さて、上のようなアマゾンのアフェリをご自分のブログにキチンとキレイに並べるとか、写真を並べて表示したいという要求があると思いますので、ちょっと簡単にHTMLをいじって書く方法（CSS）について書いておきます。
ブログでhtmlの編集というのがあると思いますが、ここにいろいろタグを書いて文字を大きくしたり、小さく書いたりするというのはご存知かと思います。
ここにレイアウトについて記述する方法で一番よく使うのは…text-align:center;です。 これは中央にもってくるというものです。
<div style="text-align: center;">文章を中央に</div>
と書いたら、divに囲まれたところが文章でも画像でも中央になります。(上の広告がその例です)
詳しく勉強したい方はこちらとかの記事がオススメですが、ここでは本当によく使うものをブログを書くということだけで書いておきます。
これをしょっちゅう書くので
<div class="cn">ここにセンターにしたいものを書く</div>
というように<div> で囲い、class= という名前のルールをつけます。
このルールをまずまるごと覚えてください。 class クラスと id とdivのルールの名前のつけ方には2種類あるのですが、
classを初心者は選ぶ方がいいです。クラスというのは文章の中で何回でも使うものです。 それに対してidというのはまさうにid番号と同じで、１つのページに１カ所しか使えませんので、細かく場所や大きさなどを設定する場合に使います。
さて、名前をつけたルールですが、ブログのデザイン要素を書くところにこのように入れます。
class="cn" というのなら、 cnという名前のクラス要素を作ったことになるので、htmlのデザインはテンプレートのところに.cn｛デザイン要素を書く｝というルールです。
ピリオドで書きます。これがclassです。 #で書いてあるのはidです。
これをよく書き忘れます。
ですから、.cn{text-align:center;} とテンプレートに書いておけば、
<div class="cn">中央にする</div> と書くだけで
<div style="text-align: center;">文章を中央に</div> と書いたのも同じということになります。
これで何を書くにも画像でもアフェリでも中央にもってくることができるのです。
<div class="cn">画像の絶対パス"></div>
<div class="cn">略アフェリのタグ></iframe></div>
というようにちょっと便利に使っていただけると思います。
次によく使うのが、画像を横に並べていくというものです。
<div class="left">右に並んで並べる</div>
というように leftというルールを書いてます。
.left{float:left;margin-right:5px;}
というルールをテンプレートに書いてます。 この意味は左に並べろ、右側に5pixelのマージンをあけろという意味です。
これを使ってこのページに本の広告入れているのも以下のように書いております。
<div>
<div class="left">
<iframe アマゾンの広告"></iframe>
<iframe アマゾンの広告"></iframe></div>
と書くことでアマゾンの広告を並べていくことができます。また文章を回りこませることができます</div>
例↓
しかし、これを書くと、</div> でくくっていたとしても、右に回りこみが終わりませんので、必ず新しく行を始める前に .clear{clear:left;} というルールを使って
<div class="clear"></div> という1行を追加して 回りこみを解除しておきます。
ここでよく
<br class="clear" />
と改行で一行ですませたくなると思いますが、それをすると IE7で崩れます。
ただ、残念なことに、上記のようなfloat:leftを並べたものをさらにcenter で囲っても中央にもってくることはできません。（詳しくは後述）
まとめますと… 今日教えましたテンプレートに書きこむルールは
.left{float:left;margin-right:5px;}
.clear{clear:left;}
.cn{text-align:center;} の３つです。これだけでも結構便利だと思います。
このfloat:left と clear:left; を組み合わせて使うことはできませんが、以下のような方法でfloat:leftしたまとまりを中央にもってくることができます。参考
このように結構複雑なことができます。これも続きを書く場合はclear:left；をしないと続きがおかしくなるので注意してください。
さて、上記のものを（このブログの下の広告部分）なぜ単純にtext-align:center; で囲むことは不可能なのでしょうか？最初これで私も悩みました。
でも、よく考えると、ものをセンターにするというのは、相対的な横の幅が決まっていないと中央にもってこれませんひとつのものを中央ということなら、単純にtext-align:center; でＯＫですが、２つのものをfloat:leftにしてしまうと、サイズがを計算できないのでどんなにしてもfloat:leftのままです。 これを中央にするにはサイズをしっかりはかってそれに対してmargin-left:auto;margin-right:auto; として、左と右のマージンをautoにすることで実現できます。 PixelPerfect というサイズをはかるソフトが結構便利で、これで私もはかりながら作ってます。
またgoogleのブラウザのextensionで便利な定規 Page Rulerもあります。
この場合はidを指定して書いてもいいですが、面倒なので、<div style="width:540px;margin-left:auto;margin-right:auto;"> というように書いてスタイルを指定して（インラインスタイルというそうです。ブログで勝手に入ってしまうデザイン要素をオーバーライドするにはimportant!で処理するそうです。そんな高度な設定は初心者は関係ないし、私もたぶんいらないけどメモ）divで囲むことができます。
よく左にくっついたままのホームページを見ますが原因はこれです。
また、
←CSSのマスターには、どんな本でもいいから1冊しっかり読むといいと思います。最終的には→ポケットリファレンス的なものを座右の書として愛用しております。やっぱりド忘れするんですな
.left{float:left;margin-right:5px;}
.clear{clear:left;}
だけではいけません。
文章は長さがわかりませんので、これまたwidthを設定する必要があります。
この場合は、メンドクサイので、
<div style="float:left;padding-right:5px;width: 200px;">
↑の意味は左にならんで右を5pixelあけて、幅は200PX にするという意味です。
というのを前に入れて 文章を書いて </div> 閉じます。
これを利用して、左と右に写真を入れて写真の説明とか入れることもできると思います。
ちなみに、単純にアマゾンの広告のiframeの中に align="left" を書いたら回りこみはできます。 padding-right:5px; とかも入れたらいいと思います。
非常に簡単ですが、レイアウトについて間違いやすいところを書いてみました。
どんどん複雑なものを書いていくようになったら、いろんなブラウザーで検証しておかないと、自分はキレイに見えていたけどほかの人は違っていたということがよくあるので注意しましょう。 FirefoxやChormeなどでチェックしてみたらＩＥではキレイに見えていたけどほかでは違うということがよくあります。
質問コメントしてくれたら、私でわかることはお返事いたします。
ホントウにCSSって奥が深くて、こんな風にリキッドページデザインでオートで3分割とかもできるんですよ。素晴らしい=。
写真をホバーして半透明とかもできます。 オシャレ～～
こういうリキッドページの影つけもこうしたらできるんです！
私もたまにこういうサイトに行き、さまようと必ず発見があって、いったい何のためかわからずにやたら勉強してしまうのでした。 いや、こんなことが楽しい私はオタクです。
偉そうなこと言うてましても、日々ケッコウ苦労してます。ちょっとしたことがまだまだわからず、完全に自由自在にCSSをいじれるところまできておりません。
その後、アマゾン広告の上に説明を載せてより目立た足せる方法を考えました。
0 コメント :
コメントを投稿
コメントありがとうございます。