HPで区切りとしてよく罫線を利用します。
横の場合は、ソースで<HR>と入れると表示されますよね。
表組に入れれば、表の幅に応じて引かれますし、%で長さも調整可能です。
ですが、縦の場合どのように引けばいいのか分かりません(T-T)
参考に、↓このようなイメージというHPがありますのでご覧下さい。
http://www.census-shizuoka.jp/traffic.html
ページ(文章のボリューム)によって、縦線の長さが違いますよね。
どのように作られているのか、ソースをコピーしてHPビルダーで
見てみましたが、縦の線が表示されませんでした…。
こうすれば作れるよ、とおっしゃる方、ご回答の程宜しくお願いします。
No.4ベストアンサー
- 回答日時:
この縦の線の実体は、テーブルのセル区切り線です。
HTML に「縦の罫線」という要素が別途用意されているわけではありません。例に挙がっているページでは右側(本文)のセルに
99行目:<td valign="top" class="boxLeft">
と、class 属性が指定されています。
具体的な指定は、スタイルシート
http://www.census-shizuoka.jp/index.css
に下記のように指定されています。
-----
td.boxLeft {
border-left-style: solid;
border-left-color: #999;
border-left-width: 1px;
(以下略)
-----
これは、セルの左の境界線を
・実線
・色は #999
・幅は1ピクセル
で表示しろ、と言う意味です。
なお、ホームページビルダーで正しく表示できないのは、参照している index.css をパソコン側にコピーしていないからです。
スタイルシートの詳細については参考 URL をご参照ください。
参考URL:http://www.kanzaki.com/docs/htminfo.html#simple- …
No.3
- 回答日時:
ちゃんとソース見てないので、実際には違うかもしれませんが、見た目上こうやってるなぁとおもうので。
左部分と右部分は1つのtebleのセルに入っている
<table>
<tr><td>左部分</td><td>右部分</td><tr>
</table>
後はスタイルシートで、左部分と右部分の境目部分を表示すればよい。
例えば、
.boxleft { border:solid; border-width:0 1px 0 0; border-color:gray; }
.boxright { border:solid; border-width:0 0 0 1px; border-color:gray; }
のようにスタイルシートを定義しておき、
<table>
<tr>
<td class="boxleft">左部分</td>
<td class="boxright">右部分</td>
<tr>
</table>
としてやれば、左右のセルの境界部分のみボーダーラインが引かれる
No.2
- 回答日時:
そちらのHPは
全体的に、テーブルを利用して作られています。
長方形をおもいうかべて
右側の辺だけに、線を引くっというスタイルシートを書いています。
http://www.google.co.jp/search?hl=ja&rls=DVXA%2C …
ちなみに、そちらのHPでは
border-left-style: solid;
border-left-color: #999;
border-left-width: 1px;
このように指定していますね。
指定の方法は色々あります。
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブル内のセル間にスペース...
-
TR タグの表示・非表示を一括で...
-
親要素のwidthは子要素のwidth...
-
HTMLでテーブルをfloatで中央配...
-
フォームタグのプルタウンの隙...
-
テーブル内に画像を表示したい。
-
TRタグの余白をcssで設定するには
-
テーブルタグの中にdivを含めて...
-
箇条書きリストのすぐ横に画像...
-
テーブルの横に画像を
-
画像拡大で不具合発生
-
cssで、表示されるテキストによ...
-
テーブルでスクロールを同期したい
-
テーブルの任意の列を非表示に...
-
テーブルのセルに画像をピッタ...
-
tableタグとformタグの組み合わせ
-
HTMLで外部ファイルの読み込み
-
tableセル内の長い文章の後半を...
-
表の中の列の順番を入れ替える...
-
CSSで任意の位置から縦罫線、横...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
table表を横に並べる際の間隔指定
-
HTML5で、テーブル内tdタグの高...
-
同じ幅指定のつもりなのに、ブ...
-
<fieldset>タグについて
-
テーブル内のセル間にスペース...
-
HTML tableのセルにtextareaを...
-
tableのcellpadding="0" cellsp...
-
tableを縦に続けるとtable間の...
-
html5のテーブル内でdivのタブ...
-
ラインを端から端まで画面いっ...
-
ホームページのテキストを折り...
-
textareaの外側の文字が下付き...
-
検索窓の位置を指定する方法
-
フォームタグのプルタウンの隙...
-
VBAで作れるかな?
-
html table の中のボーダーが二...
おすすめ情報