バカネコ日記

フリーページ

保存ﾌｧｲﾙ見方

< 新しい記事

新着記事一覧(全963件)

過去の記事 >

全て | カテゴリ未分類 | バカネコＰＣ講座 | バカネコのお話

2005年05月19日

背景の設定　その３

(28)

カテゴリ：バカネコＰＣ講座

今日はちと暑かった。
パソコンは暴走しなかったけど、人間のアタマはかなりボケた。
にゃんこネタがないので、またパソコンネタに走ろう。

というわけで、本日のバカネコ講座は「背景の設定方法」その３。

前回まで紹介した背景画像の使い方は、大きなものをドカンと１枚使うか、
小さなものをタイル状に敷き詰めて使った。

だが、スタイルシートを使うと、縦１列に並べるとか、横１列に並べるとか、
位置を指定するなど、かなり細かい芸当が可能になる。
例えば、えみりーさんのサイトは、きれいな写真を使って、実に
効果的なデザインに仕上げておられる。

今日はその秘密をさぐってみよう。

スタイルシートは、HTML文書では<head>要素として書き込んだり、
別文書にしてリンクを張って使うなど、方法はいろいろある。
しかし、楽天日記では上記のどちらも無理。
なので、単純にタグの中に放り込む「呪文」としての使い方を紹介する。

書き方は、例によって　 style="ごにょごにょ" というのを
タグの中にブチ込んでやればよろしい。
たとえば、表の中に仕込むなら、<table>タグとか、<td>タグの中だ。

　例：　<table　style="ごにょごにょ">

次に、「ごにょごにょ」の部分の書き方である。
background-image: url(画像のURL);
のように指定すると背景画像としてセットされる。
だが、これだけなら今までと変わらない。

こんにちは

さて、ここからが細かいテクニックだ。
以下のような、設定項目(呪文)があるので、これらを使う。
background-repeat:
background-position:

よーく見てみると、何のことはない、これもワンパターンだ。
みんな、background- というのが付いている。

background(バックグラウンド)とは、背景のことである。
image(イメージ)は画像や絵のことだし、repeat(リピート)は反復、
position(ポジション)は位置、であるから、どれもこれも
バカ正直な英単語だ。

これらに、指示を加えれば、呪文の一丁あがりとなる。
繰り返したくなければ、background-repeat: に no-repeat を付けて
background-repeat: no-repeat; 　とする。

横方向だけ、繰り返し貼り付けたいなら、repeat-x をくっつけて
background-repeat: repeat-x;
縦方向なら、
background-repeat: repeat-y;
とする。
xは横軸、yは縦軸の意味であるから、えらく安直な命名である。

アルファベットで書いてあるから、やたら難しそうにみえるが、
中身はえらく単純なのだ。　上の例を日本語に訳すと、
　　背景反復：無-反復；
　　背景反復：反復-横；
　　背景反復：反復-縦；
と、書いてあるに過ぎない。
こんなもの、難しいといって、ビビる必要があるだろうか？

次回は、具体的な書き方に迫ろう。

【今日のポイント】
１．英語であるが、内容はきわめてやさしい。
２．長いからって、心配は要らない。
３．ベタベタと追加するから、長くなっただけである。

【次回の予定】
　スタイルシートによる背景指定の実例と、その欠点について。

【トド短信】
　うーん。　食生活がいいかげんだにゃ。
　今日の夕食は、残り飯にタマゴをかけてすませた。

【ダウンロードページ】
・楽天日記専用バックアップツール、バーニャン３号のサンプル版、
　「バーニャン・ミニ」のダウンロードはこちら。
・にゃんタグのサンプル版は、このページの中段付近。
・バカネコ・ビューアのダウンロードはここ。

この記事がおもしろかったと思う人は１票！　クリック　→

　途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。

ネコでもわかるＰＣ講座はこちら　→　バカネコ講座
秋葉原にもない楽天専用ツール　　→　バカネコソフト

【楽天トラベル】バカネコ講座バカネコソフトバカネコ村爆笑ガイド猫砂の研究パソコン購入費用の削り方現物の投下位置ずぼらなアクセスアップページを読みやすくする方法バーニャン１号ミニバーニャン１号の秘密にゃんこのコスプレテキストリンク下線の消し方楽しめるアフィリ己を知れ自分のＰＣを知るバカネコ・ビューアバーニャン３号にゃんタグ・フルバージョン

HTMLオンチでもＯＫ！　その日からいきなり使える