テーブルの枠線の形状を変える | 四つ葉のクローバー

100万ポイント山分け！1日5回検索で1ポイントもらえる

000000

HOME | DIARY | PROFILE

【フォローする】【ログイン】

はじめにお読み下さい

< 新しい記事

新着記事一覧(全2405件)

過去の記事 >

November 6, 2004

style="border-style:線の種類" を取り上げます。

「テーブルの枠線の種類」を指定するタグ（スタイルシート）です。
「スタイルシート」と言うのは，簡単に言えば，HTMLだけでは指定できない細かい部分の指定をできるようにするものです。
これについては，また別の機会に取り上げます。
tableタグでは，枠線の状態が自動的に決まってしまって，指定できるのは，「色」と「幅」くらいですが
このスタイルシートを使うことによって，もっと色々な枠が作れます。

dotted

dashed

solid

double

基本のテーブルタグの中に style="border-style:線の種類" を入れます。
具体的には，たとえば・・・
＜table bordercolor="pink" style="border-style: dotted " width="200" height="100"＞＜tr＞＜td＞こんな風になります＜/td＞＜/tr＞＜/table＞

dot 本来の意味：

[可算名詞]点，ドット，終止符，水玉模様，少量，
　　　　　モールス信号の短信号

[他動詞]～に点をつける，～に点在する，散らばる，
　　　　　～に少量つける，

dot を使った例文：

・a necktie with white dots (白い水玉模様のネクタイ)
・polka dots (水玉模様)
・We arrived on the dot of seven (o'clock)
(私たちは，7時ちょうどに着いた　on the dot ＝ちょうどに　)
・The bay was dotted with sailboats.
(その湾には帆船が点在していた )

dash 本来の意味：

[可算名詞](～への)突進，ダッシュ，
　　　　　（句読点の）ダッシュ－
　　　　　良くするために入れる少量の混ぜ物，加味すること
　　　　　波が砕けること，ぶつかる音
　　　　　一撃，モールス信号の長音

[他動詞]～をたたきつける，投げつける，突き飛ばす
　　　　　希望を打ち砕く，～をがっかりさせる
　　　　　水などをはねかける
　　　　　～に・・・を混ぜる

[自動詞]突進する，急いで出発する
　　　　　激しくぶつかる，

dash を使った例文：

・He dashed out, slamming the door behind him.
(彼はドアをバタンと閉めて飛び出して行った)
・Her hopes were dashed by the bad news.
(彼女の望みは，その悪い知らせで打ち砕かれた )
・I always dash coffee with milk.
(私はいつもコーヒーにミルクを入れる )
・A passing car dashed water her.
(通り過ぎる車が彼女に水をはねかけた )

solid 本来の意味：

[形容詞]固体の，しっかりした，濃い，
　　　　　頑丈な，どっしりした，信頼の置ける，
　　　　　むくの，同一色調の，
　　　　　深みのある，まじめな，中身の詰まった
　　　　　切れ目がない，連続的な，ぶっ通しの

[副詞](米口語)全く，完全に，すっかり

[可算名詞]立体，固体，固形物，無地

solid を使った例文：

・Ice is the solid state of water.
(氷は水が固体になった状態です。)
・a shirt of soid red (赤一色のシャツ　→赤い無地のシャツ)
・a solid wall around a castle (城をぐるりと取り囲む城壁)
・seven solid wins (7 連勝)
・They worked for eight solid hours.
(彼らは8時間ぶっ通しで働いた)

double 本来の意味：

[形容詞]2倍の，二重の，二人用の，
　　　　　裏表のある，欺瞞的な，あいまいな
　　　　　八重の（花弁）

[副詞]二倍に，二十二，対を成して，二人一緒に

[可算名詞]（2）倍，ダブル，二人部屋，
　　　　　　　そっくりな人，生き写し,代役，生霊
　　　　　　　急な方向転換，2塁打，（doubles）ダブルス

[他動詞]～を2倍にする，二重にする，握りしめる，
　　　　　二役を演じる，～の代役を務める，
　　　　　ダブルプレーでアウトにする，

[自動詞]二倍になる，倍増する，二役を演じる，兼ねる
　　　　　二塁打を打つ

double を使った例文：

・He earns double my salary.(彼は私の倍稼ぐ)
・a double whisky ( ダブルのウイスキー1杯)
・a double window ( 二重の窓)
・a double character ( 二重人格)
・fold a blanket double (毛布を二つ折にする)

「枠の太さ」を指定したいときは・・・・

＜table＞タグ内が，

＜table style={border-style:dashed;border-color:pink; border-width:1px
となります。

え～？何？何？これ～？

実はこれがスタイルシートです。

形としては，
style={　　　　　　　　　　} の中に，指定する部分を細かく入れて行きます。
：（コロン）は = (イコール)と同じ意味です。
；（セミコロン）は，次の属性値との区切りです。（ここで終わりと言う意味）
border-style:dashed ←これで枠線の形状をdashedに指定。
border-color:pink ←これで枠線の色をpinkに指定。
border-width:1px ←これで枠線の太さを1pxに指定。
width:300px height:100px ←これでテーブルの横と縦の長さを指定

border-width:1pxのdottedはこうなります

border-width:2pxのdottedはこうなります

border-width:1pxのdashedはこうなります

border-width:2pxのdashedはこうなります

*border-width:1pxでは，dotted も　dashed　もあまり変わらなくなります。
2px以上で指定したほうが良いでしょう。

*今日の一言（ひとこと）日記 *

I renewed a notice board on the top page of my website.

お気に入りの記事を「いいね！」で応援しよう