覚えたい ☆ テキストボックスの作り方（ＣＳＳ編） |
☆ このサイトの Ｌ ｉ ｎ ｋ ・・・ ぜ〜んぶ見たい方はＨＯＭＥへ、ＨＴＭＬだけｏｒスタイルシートだけの方は各リンクをクリックしてね♪
管理人が特に覚えたくて勉強しました。。 よかったら参考にしてね♪
|
◆◆ お 知 ら
せ ◆◆ |
|
|
ＣＳＳをヘッダーに指定してテキストボックスを作る方法 |
|
◆ ヘッダーに指定する ＣＳＳの基本
★ タグや記号のお勉強コーナー ★ ． （ピリオド） ： （コロン） ； （セミコロン） ｛ ｝ （中カッコ） <!-- --> （コメントタグ） ※ コメントタグって何？ ＨＴＭＬファイルにメモや覚え書などのコメントを記述したソースがブラウザに表示されないようにするためのタグ ヘッダーに記述したＣＳＳソースを未対応のブラウザで非表示にすることができます
|
テキストボックスを設置する HTMLファイルのヘッダー （<head>〜</head> ） に ボックスのヨコ幅とタテ幅（高さ）、背景色、文字の色、枠線の種類と太さ どういう表示形式にするか（部分ｏｒ全文）のスタイル（ＣＳＳ）を指定して、本文中に適用させます
<style type="text/css"> <!-- 指定する内容 要 素 （タグ） ． キーワード （スタイルの名前） ｛ ＰＲＯＰＥＲＴＹ （定義するもの） ： VALUE （その値） ； ｝ --> </style>
★ 下記のソースは、このページの上部のお知らせ用のテキストボックスに適用してるものです ※ ソースの内容は、 以下のようにレイアウトのスタイルを指定してます 高さは３行分のタテ幅、横幅は６００ピクセル、表示方法はブラウザ任せ（ａｕｔｏ） 枠線の色が黒、太さが５ピクセル、枠線の種類は二重線 背景の色はグレー、文字の色は白 ※ 文字の大きさは９ｐｔと８ｐｔに変えてありますが、本文中の設置位置でＳＰＡＮタグを使ってサイズ指定をしています
<style type="text/css"> <!-- p.infobox { height: 3em; width: 600; overflow: auto; border: black 5px double; background-color: gray; color: white; } --> </style>
p.infobox ・・・ ｐ （上下１行空き段落の要素タグ） ．ｉｎｆｏｂｏｘ （テキストボックス指定のキーワード） { height: 3em; ・・・ ｈｅｉｇｈｔ （ボックスの高さ） ： ピクセル数 や ｅｍ など ； width: 600; ・・・ ｗｉｄｔｈ （ボックスのヨコ幅） ： ピクセル数 や ％ など ； overflow: auto; ・・・ ｏｖｅｒｆｌｏｗ （表示方法を定義） ：ａｕｔｏ など（表示方法の値は４種類あります） ； border: black 5px double; ・・・ ｂｏｒｄｅｒ （枠線を定義） ： 色 太さ 線の種類 ； background-color: gray ; ・・・ ｂａｃｋｇｒｏｕｎｄ−ｃｏｌｏｒ （背景の色の定義） ： 色 ； color: white; ・・・ ｃｏｌｏｒ （テキストの色の定義） ： 色 ； }
※ 色は、 カラーネーム または ＃カラー数値 で指定します 例えば「 白 」の場合 ・・・ ｗｈｉｔｅ または ＃ＦＦＦＦＦＦ （ ＃ｆｆｆｆｆｆ ）
|
|
◆ 本文中に適用 <body>〜</body> |
ヘッダーに指定したスタイルを本文中 （ <body>〜</body> ）に適用するには テキストボックスを設置したい場所に ヘッダーで定義した 要素タグに ＣＬＡＳＳ属性 を追加して、ヘッダーで定義した キーワード を 属性値として指定します
<p class="infobox">
この部分に文章などのテキストを記述します ★ テキストを記述する時のポイント （ 管理人が実際に作業をしてみて分かった事です ） ・ 改行する時は、＜ＢＲ＞タグを使って強制的に改行 ・ ジオクリエーターで編集する時は、≪ ＨＴＭＬ ≫の画面で編集 ・ テキストにリンクを設定する時は、通常の作業でＯＫ ・ マーキー ≪ ＭＡＲＱＵＥＥ ≫を設定する場合も、普通に作業します
</p>
★ 下記が、このページ上部のテキストボックスのソースです
<p class="infobox" style="line-height:100%; margin-top:0; margin-bottom:0;"> <span style="font-size:9pt;"> <b>◆◆ お 知 らせ ◆◆</b><br> ★ 08/03/28 テキストボックスの中の<a href="#gazou"><font color="#FF9999"> 背景を画像に設定</font></a>する方法を追加しました♪<br> ★ 08/01/25 ヘッダーにＣＳＳを指定してテキストボックスを作る方法で、テキストボックスの中の</span> <b><span style="font-size:9pt;">テキストにリンクが設定できる</span></b> <span style="font-size:9pt;">ものです♪<br> </span> <span style="font-size:8pt;"> ※ＨＰ作成の参考にしてるサイト様で提供している基本ソースを使わせていただき、自分のサイトの複数ページに設置していろいろ試しながら勉強した事をまとめました (*^▽^*)<br> </span> </p>
|
|
もう少し詳しく調べて試してみたので、部分的なレイアウトの指定方法を書いておきます 興味のある方は、挑戦してみてね ♪ |
|
|
★ 表示方法のVALUE（値） ｏｖｅｒｆｌｏｗ （表示形式を定義）
|
auto ・・・ ブラウザの判断に任せる （autoを指定すると、代表的なブラウザでは縦のスクロールバーだけ表示する） scroll ・・・ スクロールさせる （この場合、タテ・ヨコ両方にスクロールバーが表示される） visible ・・・ 全部を表示 （スクロールバーは表示されず、高さの指定を無視して記述されたテキストが全部表示される） hidden ・・・ はみだす部分は非表示 （スクロールバーは表示されず、指定した高さから下に記述されているテキストは表示されない） |
|
★ ボックスの表示位置
|
スタイルシートでＰＯＳＩＴＩＯＮというプロパティで、本文中に記述して表示する位置を指定する ことができるのですが、スキル不足でうまく位置を定めることができませんでした っていうか、初心者の管理人には自分の好きな位置に指定する作業は難しいと感じました
TABLEの中に記述してテキストボックスを設置する方が、簡単に表示位置を決める事ができました といっても、右寄せか中央揃えか左寄せなんだけど。。。 (^ー^ゞ
※ ちなみに、このページの上のお知らせ用のテキストボックスは、TABLEを中央揃えにして、その中に入れています
|
|
★ 枠線の種類のVALUE（値） |
solid ・・・ 実線
double ・・・ 二重線
dashed ・・・ 破線
dotted ・・・ 点線
※ その他に、以下の４種類の、２色で影が付いたみたいな線もあります groove ridge inset outset
|
|
★ ヨコ幅や高さ （タテのサイズ）
|
ｗｉｄｔｈ ・・・ ヨコ幅 ｈｅｉｇｈｔ ・・・ タテ幅（高さ）
★ 単 位
絶対的に指定する単位 ・・・ in （インチ） cm （センチメートル） mm （ミリメートル） pt （ポイント） px （ピクセル） など
相対的に指定する単位 ・・・ em （基準フォントの高さ） ％ （適用する要素の幅に対する比率 ） など
|
|
★ テキストボックスの スクロールバーの色
|
このページで紹介しているテキストボックスの場合 ヘッダーに指定したページ自体のスクロールバーを変えたソースで テキストボックスのスクロールバーも、同じ色になります
<style type="text/css"> <!-- html, body { scrollbar-base-color: カラーネーム または ＃カラー数値 ; } --> </style>
※ 一般的なスクロールバーの色を変える方法は、ヘッダーに上記のソース記述でＯＫ！ もっと詳しく知りたい場合は、 こちらで見てね♪
|
|
★ テキストボックスの 背景を画像にする
|
テキストボックスの背景を、画像（イメージ）にする記述方法です。
BACKＧＲＯＵＮＤ − ＩＭＡＧＥ ： ＵＲＬ （ 背景に設定する画像のＵＲＬ ）
このページの上部に設置しているテキストボックスの背景は、色をグレーに設定してるので background-color: gray;ですが
背景を画像にする場合は、background-image: url(画像のＵＲＬ); にします
<style type="text/css"> <!-- p.infobox { height: 3em; width: 600; overflow: auto; border: black 5px double; background-color: gray; ⇒ background-image: url(画像のＵＲＬ); color: white; } --> </style>
※ この方法は、姉妹サイトのフレームで３分割したページのメイン（右）ページで試してます♪
ＰＣ初心者Ｐｏｃｈｉ ☆ パソコン＆ホームページ作成を覚えたい
|
|
|
