2015年2月17日火曜日

CSSのコードについて

さて、前回の記事でCSSのコードを見せたが、具体的な説明は一切していない。

「カエレバ」のCSSをbloggerのテンプレートに貼り付けてみる

恥ずかしながら、よく分からないんだよね(T_T)

それと、実のところ未だ問題点もあるんだ。

その辺りを含めて色々と考えてみたいと思う。

HTMLとCSSの関係

取り敢えず、大雑把な僕の理解を書いて行こう。間違っている可能性はもちろんある。

 

基本的にHTMLで書かれたコードをCSSで整形するって形になっているはずで、カエレバで作られたコードを利用してCSSにて装飾をする形になっているはず。

CSS1

だから、カエレバでこんな形のHTMLコードが作られても、ブログに貼り付けられる際にはCSSのお陰で、こんな感じに表示される。

CSS2

CSSって凄いね!(棒)

 

CSSを分解してみる1

で、CSSの構造としてはHTMLで使われるタグのデザインを書き換えるという感じになっている。

例えばこの部分。

/*-----------------------------------------*/
/*  カエレバ amazlet風-2(CSS改用)    */
/*-----------------------------------------*/
.booklink-box, .kaerebalink-box{
    width:90%;
    margin:20px auto;
    padding:20px;
    border : double #deb887;
    overflow : hidden;
    font-size : small;
}

「.booklink-box」「.kaerebalink-box」のどちらかのデザインを、{ }内に書かれた状態にするという話。

ちなみに「.booklink-」の方がヨメレバ、「.kaerebalink-」の方がカエレバである。ヨメレバを使う予定が無ければ、「.booklink-」を削除して良いハズ。

 

「width:90%;」は、枠の幅である。全体の90%にしろという指定だね。

「margin:20px auto;」は、枠の外側の余白を「上、下」=「20px」「右、左」=「auto」に指定している。

「px」はスタイルシートのピクセル単位だ。デスプレイの画素数に対して20ピクセル分確保してよ、という意味になる。

表示可能なピクセル数が1024×480であれば、そのうち20ピクセル分の幅を使ってマージンを確保してねってことになる。この場合、1600×900を表示可能なディスプレイを使うと、相対的に狭くなっちゃう。「em」を使うと、印象はピクセル数に左右されないんだけどね。

「auto」の方は、お任せになるので、widthで90%を指定した場合には残りの10%を等分したのが左右の余白として定義される。

「padding:20px;」は枠の内側の「上下左右」=「20px」っていう指定だね。

「border : double #deb887;」は枠線を2重線で、色指定が「#deb887」である。色は好きに変更出来るので、このブログでは背景の雰囲気に合わせてみた。

margin1

こんな感じの概念になるんだとか。

「overflow : hidden;」は、要素(枠」の領域をはみ出したコンテンツは表示しないよと言う指定。「hidden」を「visible」にすれば、はみ出しても表示。「scroll」ならば、横にスクロールバーをつける、みたいな感じになる。

 

「font-size : small;」は文字は小さくしろと言う指定だね。基準フォントに対して少しだけ小さくするのが「small」。相対指定になる。

 

CSSを分解してみる2

……早速しんどくなってきました(笑

でも、もーちょっと行きますよー。

.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
}
.booklink-image img, .kaerebalink-image img{
    display : block;
    margin : 0 auto;
    text-align : center;
}

「.booklink-image」「.kaerebalink-image」は、商品の画像用のタグ。

「.booklink-image img」「kaerebalink-image img」は……、何ですかね??(苦笑

「margin:0 15px 0 0;」で、「上」「右」「左」=「0」、「下」=「15px」と指定している。下側だけ広くなるように指定している模様。正直、これが何のためなのかはイマイチ理解していないんだけど、下側に文字が来た場合に、空間を空けておきたいという意図だろうか?

「display : block;」は、ブロックボックスとして表示させるように指示があるので、画像が無い場合の対応なのかも。

.booklink-info, .kaerebalink-info{
    margin:0;
    text-align:left;
}

.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}

.booklink-powered-date, .kaerebalink-powered-date{
     font-size : 8pt;
     margin-top : 10px;
     font-family : verdana;
     line-height : 120%;
}
.booklink-powered-date, .kaerebalink-detail{
    margin-bottom : 15px;
}

.booklink-link2, .kaerebalink-link1{
    margin-top:10px;
}

こちらは、画像の横に来る文字情報である。

「.booklink-name」、「.kaerebalink-name」

が、商品の名前(説明含む)になるようだ。

 

現在僕が直面しているのが、最初の画像の位置指定、「float:left;」が上手く働いていない点なんだ。

どうしても、カエレバでデータを作ってそのままだとこんな感じになってしまう。

  CSS3

……何でだよ!(汗

理由はよく分かりません。

「.kaerebalink-link1」も何をしているのやらイマイチ理解できていない。

 

CSSを分解してみる3

そろそろ疲れてきたね。

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkyahoo,
.shoplinkkakakucom,
.shoplinkseven,
.shoplinkbellemaison {
    float:left;
    width: 30%;
    margin:5px 2px 0 auto;
    padding: 5px 1px;
    text-align: center;
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

    box-shadow:inset 0px 1px 0px 0px #ffffff;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));

    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color:#ededed;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;

    border-radius:6px;

    border:1px solid #dcdcdc;

    display:inline-block;

    cursor:pointer;
    color:#777777;

    font-family:arial;

    font-weight:bold;

    text-decoration:none;

    text-shadow:0px 1px 0px #ffffff;
}

これが、ボタン部分だ。

CSS4

今回の素材はこれ2つなんだけど、3つ並ぶ仕様にしたい場合は「width: 30%;」この辺りをちょちょいといじると変わる。

今の指定だと、幅が30%になっているので、「margin:5px 2px 0 auto;」の数字と合わせて変更しよう。幅を20%位にすると3つ並ぶ模様。15%で4つ並ぶね。

ただ、これはレイアウトの設定によってもかなり変動するので、ここのコードを利用するときには、調整して欲しい。

.myButton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));

    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);

    background-color:#dfdfdf;
}
.myButton:active {

    position:relative;

    top:1px;
}

この辺りはマウスオーバー時の処理なので、今回は特に変更していない。マウスオーバーすると、グラデーションが反転するような指定になっているんだ。

……が、本来なら色が変わる指定のハズなんだけどねぇ。変化が無い。

あっ!

「.myButton」のままだったorz

.myButton:hover {

この部分(マウスオーバージの処理)は、

.shoplinkamazon:hover,
.shoplinkrakuten:hover,
.shoplinkkindle:hover,
.shoplinkyahoo:hover,
.shoplinkkakakucom:hover,
.shoplinkseven:hover,
.shoplinkbellemaison:hover {

こう変えてください。

.myButton:active {

こっちは(クリック中のアクションです)、

.shoplinkamazon:active ,
.shoplinkrakuten:active ,
.shoplinkkindle:active ,
.shoplinkyahoo:active ,
.shoplinkkakakucom:active ,
.shoplinkseven:active ,
.shoplinkbellemaison:active {

こうっすね。

 

CSSを分解してみる4

残念な間違いが発覚したところで、気を取り直して(笑)

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinkseven a,
.shoplinkbellemaison a {
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
}
.shoplinkamazon a{
    color:#FF9901;
}

.shoplinkrakuten a{
    color:#c20004;
}

.shoplinkkindle a{
    color:#007dcd;  
}

.shoplinkkakakucom a{
    color:#314995;  
}

.shoplinkyahoo a{
    color:#7b0099;
}
.shoplinkyahoo img{
    display:none;
}
.shoplinkseven a{
    color:#556b2f;
}
.shoplinkbellemaison a{
    color:#ff4500;
}

さてと、これが何をしているかというとよく分からない。

……というのは冗談です、はい。

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinkseven a,
.shoplinkbellemaison a {

ここは、ボタンの中身の文字の指定ですな。「Amazon」などの文字の設定を一括でやっている模様。

その後で、個別に文字の色だけ指定し直している。

 

気に入らなければ修正しよう。

追記

そうそう、手を入れた後のコードを忘れないように貼っておかないと。

/*-----------------------------------------*/
/*  カエレバ amazlet風-2(CSS改用)    */
/*    家で活躍こんなmono用      */
/*-----------------------------------------*/
.booklink-box, .kaerebalink-box{
    width:90%;
    margin:20px auto;
    padding:20px;
    border : double #deb887;
    overflow : hidden;
    font-size : small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
}
.booklink-image img, .kaerebalink-image img{
    display : block;
    margin : 0 auto;
    text-align : center;
}

.booklink-info, .kaerebalink-info{
    margin:0;
    text-align:left;
}

.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}

.booklink-powered-date, .kaerebalink-powered-date{
     font-size : 8pt;
     margin-top : 10px;
     font-family : verdana;
     line-height : 120%;
}
.booklink-powered-date, .kaerebalink-detail{
    margin-bottom : 15px;
}

.booklink-link2, .kaerebalink-link1{
    margin-top:10px;
}
.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.shoplinkyahoo,
.shoplinkkakakucom,
.shoplinkseven,
.shoplinkbellemaison {
    float:left;
    width: 30%;
    margin:5px 2px 0 auto;
    padding: 5px 1px;
    text-align: center;
   
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;

    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;

    box-shadow:inset 0px 1px 0px 0px #ffffff;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf));

    background:-moz-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-webkit-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-o-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:-ms-linear-gradient(top, #ededed 5%, #dfdfdf 100%);

    background:linear-gradient(to bottom, #ededed 5%, #dfdfdf 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf',GradientType=0);
    background-color:#ededed;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;

    border-radius:6px;

    border:1px solid #dcdcdc;

    display:inline-block;

    cursor:pointer;
    color:#777777;

    font-family:arial;

    font-weight:bold;

    text-decoration:none;

    text-shadow:0px 1px 0px #ffffff;
}
.shoplinkamazon:hover,
.shoplinkrakuten:hover,
.shoplinkkindle:hover,
.shoplinkyahoo:hover,
.shoplinkkakakucom:hover,
.shoplinkseven:hover,
.shoplinkbellemaison:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed));

    background:-moz-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-webkit-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-o-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:-ms-linear-gradient(top, #dfdfdf 5%, #ededed 100%);

    background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed',GradientType=0);

    background-color:#dfdfdf;
}
.shoplinkamazon:active ,
.shoplinkrakuten:active ,
.shoplinkkindle:active ,
.shoplinkyahoo:active ,
.shoplinkkakakucom:active ,
.shoplinkseven:active ,
.shoplinkbellemaison:active {

    position:relative;

    top:1px;
}
.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkyahoo a,
.shoplinkkindle a,
.shoplinkkakakucom a,
.shoplinkseven a,
.shoplinkbellemaison a {
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
}
   
.shoplinkamazon a{
    color:#FF9901;
}

.shoplinkrakuten a{
    color:#c20004;
}

.shoplinkkindle a{
    color:#007dcd;   
}

.shoplinkkakakucom a{
    color:#314995;   
}

.shoplinkyahoo a{
    color:#7b0099;
}
.shoplinkyahoo img{
    display:none;
}
.shoplinkseven a{
    color:#556b2f;
}
.shoplinkbellemaison a{
    color:#ff4500;
}
   

.booklink-footer{
    clear:left;
}
/*----------------カエレバここまで--------------*/

 

ランキングへの応援クリックよろしく!
にほんブログ村 その他生活ブログへ

0 件のコメント :

コメントを投稿