テンプレートとアクセスアップのでめらら楽天日記

< 新しい記事

新着記事一覧(全372件)

過去の記事 >

2005.05.27

スタイルシート（26）

(6)

テーマ：アクセス向上(301)

カテゴリ：【実験中】

ボックス

スタイルシート>>基本>>ボックス>>大きさとスクロール
////////////////////////////////////////////////////////////////////

■width: ***; height: ***;
ボックスの大きさは「width: ***; height: ***; 」で指定することができます。
単位つきの数字やパーセンテージを使って大きさを指定します。autoで自動設定、つまりデフォルト(標準)となります。

【ボックスで使用できる単位】
□length（単位数値の指定）
「相対値指定の単位、em、ex、px」「絶対値指定の単位、in、cm、mm、pt、pc」

「当該ボックスを包含する包含ブロックの幅を 100% とする比率で計算します」
□auto（ブラウザに依存します）

<div style="width: 300px; height: 50px; background-color: blue;">横幅300px高さ50pxのボックスです</div>
<h1 style="width: 50%; background-color: red;">横幅50%、高さは指定していません</h1>
<p style="width: 30em; height: 3em; background-color: green;">横幅30文字分高さ3文字分のボックスです</p>
↓こんな感じですね（＾＾）

横幅300px高さ50pxのボックスです

横幅50%、高さは指定していません

横幅30文字分高さ3文字分のボックスです

※ネットスケープでは以下の指定もできます
max-width: ***; min-width: ***; ボックスの最大幅と最小幅を指定する
max-height: ***; min-height: ***; ボックスの最大の高さと最小の高さを指定する

ボックスを決めた大きさに設定はしたけれども、記述内容がはみ出してこぼれてしまうような場合オーバーフローとなりますがその部分は隠してしまったり、スクロールさせたりできます。

■overflow: ***;
□visible … （領域を広げて表示する）デフォルト
□hidden … （はみ出した部分を表示しない）
□scroll … （スクロールで表示する）
□auto … （自動）

浜田省吾2005年第二弾シングルはお父さんの応援歌！？
AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。
</div>

<div style="width: 70%; height: 100px; background-color: #85B9E9; border: 1px #000000 solid; overflow: scroll;">
浜田省吾～（略）
</div>
↓こんな感じですね（＾＾）

浜田省吾2005年第二弾シングルはお父さんの応援歌！？
AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。

2.）スクロールの方向指定
■overflow-***: scroll; 縦横のスクロールを個別に指定する
□overflow-x … 横方向の処理
□overflow-y … 縦方向の処理
これにscroll … （スクロールで表示する）を指定しますとタテのみスクロールや横のみでスクロールが指定できます

<div style="width: 70%; height: 50px; background-color: #F0E68C; border: 1px #ff0000 solid; overflow-x: scroll; white-space: nowrap;">
浜田省吾2005年第二弾シングルはお父さんの応援歌！？
AIDOから30年の今年、そして来年ソロデビュー30周年を迎える浜田省吾。4/13発売のオリジナル・ニュー・シングル『光と影の季節』につづいての2005年第二弾オリジナル・ニュー・シングルは、父の日を前に、頑張るお父さんへの応援歌！？エンジニアに、グリーンデイのMixを手がけるクリス・ロード・アレジを迎えたエッジのきいたロックサウンドに現代の父親の苦悩と家族愛をストレートな言葉で綴った、浜田省吾ならではのロック・チューン！！某有名俳優を起用した頑張るお父さんを描いた話題満載のビデオクリップはスポ-ツ紙、ワイドショー等での露出も見込める要注目な内容！！夏には4年ぶりのオリジナル・ニュー・アルバム、秋からはこちらも4年ぶりとなる全国アリーナ・ツアーをひかえる浜田省吾。今年から来年に向けて、目が離せません。
</div>

<div style="width: 70%; height: 50px; background-color: #F0E68C; border: 1px #ff0000 solid; overflow-y: scroll;">
浜田省吾～（略）
</div>
↓こんな感じですね（＾＾）

3.）スクロールバーの色指定
スクロールバーの色も背景色や文字色などとのコーディネイトで変えることが出来ます。
■scrollbar-***-color: ***; スクロールバーの色を変える
簡単に全体を指定する
□scrollbar-base-color 全体の色をまとめて指定します
個別のパーツごとに色指定する
□scrollbar-face-color ボタン部分を指定します
□scrollbar-track-color レール部分を指定します
□scrollbar-arrow-color 矢印を指定します
□scrollbar-highlight-color 内側のハイライトを指定します
□scrollbar-shadow-color 内側の影を指定します
□scrollbar-3dlight-color 外側のハイライトを指定します
□scrollbar-darkshadow-color 外側の影を指定します

※どの部分かは使ってみていただいて慣れるのがいちばん解り易いと思います
*****************************************************

【庶事所感】
理屈や理論を知っていれば何でもできるわけではない、と解ってはいるのですがどうしても、理屈にこだわってしまう、ということがあるようで困ってしまいます。
何色と何色を混ぜればどんな色になるかわかっていても素晴らしい絵画は画けないし、
ボールをどう打てばホームランになるかかわっていてもホームランは打てないし、
音階やリズムについての知識がいくらあっても素晴らしい曲をつくることはできないです。
「そんなこと、言われなくてもわかってる！」（＾＾）そうですよね
だから難しいのですものね（＞＜）

*****************************************************

なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ