こんばんは。
仕事で、HTML+CSSのコーディングをしており、テキストを綺麗に並べるために4つのカラムにしたテキストボックスを作成しようとしているのですが、各カラムの左側に罫線を引いた場合に1つのカラムのテキストの量に合わせて、他のカラムの罫線の長さも可変ができるようにしたいのですが、どういうふうにくめばいいのでしょうか?
各カラムの罫線はCSSのborderで作成できればと思っています。
※上記の説明だと上手く伝わらないと思いますので画像を添付します。
困っていますので、教えていただければ幸いです。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
css2以降なら、テーブルのように表示する。
テーブルのセルのように表示する。というプロパティが使えます。そして、何番目の要素というセレクタも使えるので、昨今のブラウザで表示できればいいのであれば使えます。線は左のみにいれ、最初のボックスは線を表示しないと指定すればお望みの形になると思います。
スタイル-----------
div{display:table;}/*テーブルのように表示する*/
div div{
display:table-cell;/*テーブルのセルのように表示する*/
border-left:1px solid red;
width:20%;margin-left:1%;
padding-left:1%;
margin-right:1%;padding:right:1%;
}
div>div:first-child{/*初めての子要素のdiv*/
border:none;
margin:0;}
ul{margin-left:1em;padding:0;}
html-----------
<div>
<div>
<h1>タイトル</h1>
<ul>
<li>テキスト</li></ul></div>
<div>
<h1>タイトル</h1>
<ul>
<li>テキスト</li>
<li>テキスト</li></ul></div>
<div>
<h1>タイトル</h1>
<ul>
<li>テキストテキストテキストテキストテキストテキスト</li>
<li>テキスト</li>
<li>テキスト</li></ul></div>
<div>
<h1>タイトル</h1>
<ul>
<li>テキスト</li></ul></div>
</div>
No.1
- 回答日時:
不規則なランダムなテキストボックスなら
親要素に背景画像で4本の罫線を4つのボックスの幅に合わせて作ると、
一番長いテキストに合わせて全部一緒に縦にリピートしてくれます。
CSSでは、これが一番簡単な方法です。
※ 4つのボックスの横幅を計算して罫線画像を合わせる事。
親要素:
<div style="background: url(罫線画像.gif) repeat-y; width:○○px;">
ここに4つのボックスを設置し、
クリアーする事。
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 階層別の組織図の自動作成について 1 2022/10/26 13:42
- Excel(エクセル) vba セルの罫線について教えてください 2 2022/12/28 17:14
- Word(ワード) Word 段落罫線の上下のスペースを広げるには 3 2023/08/04 10:52
- Word(ワード) Wordで作った「表の罫線を部分的に削除したい」 4 2023/07/24 07:00
- Excel(エクセル) Excelのマクロを教えていただけないでしょうか? 1 2023/07/06 19:56
- Windows 10 エクセルの罫線がパワポに貼り付けると見えなくなる。 3 2022/12/27 15:23
- その他(クラウドサービス・オンラインストレージ) Googleのスプレッドシートで罫線を画像の前面に出す事は出来ないのでしょうか? 2 2022/05/01 05:31
- Excel(エクセル) 条件付き書式で太罫線を引く方法 3 2023/05/29 12:17
- Word(ワード) ワードでの罫線の改行につい 4 2022/10/24 11:05
- その他(プログラミング・Web制作) google formsを使ったタスク依頼フォーム作成におけるご相談 1 2023/06/22 15:55
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<ul>~</ul>が二つ続くと間に改...
-
excel vba で ulタグのなかのse...
-
IEで<td>の全角を有効にする方法
-
プルダウンリストとテキストエ...
-
<table>の高さ固定。情報増加時...
-
ulとliで囲った文字の一部を変...
-
<ul><li></li></ul>にするメリ...
-
css ol liにdisplay:inlineを設...
-
番号付きリスト(<Ol><Li>・・...
-
隙間をなくすには?
-
html <ul></ul>の並びで一行空...
-
複数行にまたがる括弧を表示し...
-
画像をレスポンシブだと 二つず...
-
ページを開いているときのリン...
-
疑似クラス :activeが効きません
-
画像を縦に4つ並べたい場合
-
【CSS】メニュー上部に固定させ...
-
レスポンシブWebデザインでリン...
-
「CSS」リストの2段組どのよう...
-
html/cssの、navを2段にする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストマーカーをボックス内に...
-
番号付きリスト(<Ol><Li>・・...
-
liタグの中に<p>タグやら<dl>を...
-
<table>の高さ固定。情報増加時...
-
レスポンシブWebデザインでリン...
-
<ul><li></li></ul>にするメリ...
-
リストの数字のフォントサイズ...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
divタグ内のコンテンツが重なっ...
-
画像にリンクを張ると画像がず...
-
複数行にまたがる括弧を表示し...
-
html <ul></ul>の並びで一行空...
-
ページを開いているときのリン...
-
HTML5のfooterに見出しを付けて...
-
html/cssの、navを2段にする...
-
<ul>~</ul>が二つ続くと間に改...
-
htmlの<ol>タグで、数字などを...
-
リンク文字同士の間隔を開ける...
-
CSSでつくったメニューのアニメ...
おすすめ情報