スタイルシートについて

スポンサーサイト

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-------- スポンサー広告

そういえば、突然スタイルシートの指定が出てきて説明してませんでした。

まぁHTMLも説明して無いのですが。
そのうち、HTMLも沢山解説する予定です。

今回、以下のような形で使ってます。


        <style type="text/css">
        div {
            display: inline-table;
            padding: 5px;
            border: 1px solid #aaa;
            text-align: center;
        }
        </style>

これは、HTMLの見栄えを指定するスタイルシートと言うもので、良くCSSと略されます。このブログでも、CSSと略して説明します。確か、カスケード・スタイル・シートかカスケーディング・スタイル・シートの略です。

で、そもそもコレは何故指定しているのか、何を指定しているのかをざっくりと説明します。

まず、これはHTMLのstyleタグに書きます。そうすると、指定したタグの修飾をお好みにカスタマイズ出来るのです。ブログとかでもありますね。別ファイルに書くことも出来ます。

もちろん、CSSを使わなくても問題ありませんが、今回の例ではお気に入りデータを単純に並べると、「削除」ボタンを何処に置くか悩ましいものだったのです。その場で再生できる埋込み動画が並ぶので、というか動画にしろサムネイルにしろ四角いですし、削除ボタンを置くとなると、動画の下にセンタリングくらいしか無いかな思いました。

というわけで、CSSを使い、divタグを動画を並べるのにわかりやすくなるdivダグに変更したかったのです。

CSSでは、基本的には以下のような構文になります。

デザインが変更される対象 {
　デザインの指定;
}

デザインの指定は通常、

　指定:値;

のような形が多いです。ちなみに改行は無くても大丈夫です。
対象の指定部分はセレクタと呼び、以前行なったSimple HTML DOM Parserの指定とほぼ同じです。
例えば、

#aaa

なら、id="aaa"を指定したタグ全てになりますし、

.aaa

なら、class="aaa"が含まれるタグ全てになります。
今回の

div

は、divタグ全てですね。
ちなみに、

div#aaa

なら、divタグでid="aaa"の全てになります。[id="aaa"]でも一緒ですが、これは出てきた時に改めて説明します。

さて、今回指定したのは、以下のような項目です。

display: inline-table;
表示形態を、インラインテーブル（前後で改行しない表）にする。

padding: 5px;
周囲の空間に5ピクセル間を開ける。

border: 1px solid #aaa;
ボックスの枠線を、1ピクセルで直線でちょい灰色（#aaa）にする。

text-align: center;
テキストをセンタリングする。

それぞれの詳しい説明はGoogle先生に任せますが、要は動画一つ一つをdivタグで囲っておき、そのdivタグをCSSで良い感じに変更したのです。テーブルの指定なのにtableタグにしないのは、画面幅に合わせて良い感じに表示してくれるからです。

とりあえずCSSの説明はこのくらいにして、削除機能。・・次回です。

関連記事

2013-04-02 CSS Comment:0 Trackback:0

このページのトップへ

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

このページのトップへ

コメントの投稿

このページのトップへ