スポンサーサイト

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

スタイルシートについて

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

まぁ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の説明はこのくらいにして、削除機能。・・次回です。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。