バカネコ日記

フリーページ

2005年05月19日
XML
カテゴリ:バカネコPC講座
バカネコ村の記事を検索する
今日はちと暑かった。
パソコンは暴走しなかったけど、人間のアタマはかなりボケた。
にゃんこネタがないので、またパソコンネタに走ろう。



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

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

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

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



スタイルシートは、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は縦軸の意味であるから、えらく安直な命名である。


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

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



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

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


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


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

 この記事がおもしろかったと思う人は1票! クリック →おもしろかったらクリックしてね


※バカネコ講座では、安全な方法を選んで紹介していますが、
 途中でわけがわからなくなっても、責任は負えませんので、あらかじめご了承下さい。



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



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


HTMLオンチでもOK! その日からいきなり使える



画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。
このサイトの新着記事の通知をご希望の方はご利用ください。







最終更新日  2005年05月20日 01時27分41秒
コメント(28) | コメントを書く

PR

バックナンバー

2019年08月
2019年07月
2019年06月
2019年05月
2019年04月

プロフィール


海獣トド

コメント新着

 海獣トド@ Re:意外な一面に触れて。(08/14) 泡雪さんへ >マザーテレサって本当にす…
 海獣トド@ うめぼしがキラリ☆さんへ >ひゃー、ブログさぼってる間にトドさん…
 海獣トド@ 鵜の岬さんへ >これからも・・ヨロシク・・ね こち…
 海獣トド@ sshijimisanさんへ >でも、トド様のおかげで少しの村民は救…
 海獣トド@ もぐらのこさんへ >日記の下書き機能残ってるよ(^-^) …
 海獣トド@ archfelisさんへ >せめて12日一杯残せばいいのに・・・…

Copyright (c) 1997-2019 Rakuten, Inc. All Rights Reserved.