|
|
|
2005年05月19日
カテゴリ：バカネコＰＣ講座
 今日はちと暑かった。 パソコンは暴走しなかったけど、人間のアタマはかなりボケた。 にゃんこネタがないので、またパソコンネタに走ろう。  というわけで、本日のバカネコ講座は「背景の設定方法」その３。 前回まで紹介した背景画像の使い方は、大きなものをドカンと１枚使うか、 小さなものをタイル状に敷き詰めて使った。 だが、スタイルシートを使うと、縦１列に並べるとか、横１列に並べるとか、 位置を指定するなど、かなり細かい芸当が可能になる。 例えば、えみりーさんのサイトは、きれいな写真を使って、実に 効果的なデザインに仕上げておられる。 今日はその秘密をさぐってみよう。 スタイルシートは、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オンチでもＯＫ！ その日からいきなり使える  画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 このサイトの新着記事の通知をご希望の方はご利用ください。 お気に入りの記事を「いいね！」で応援しよう
[バカネコＰＣ講座] カテゴリの最新記事
|
|
||||||
