くりすたる・の〜と

とりあえずメモとかしてみた。

CSSで段組み・レイアウト&枠の角を丸くする方法

2016.03.20(2016.03.07)

CSSで段組み・レイアウトをする為の私的覚え書き(簡易)。TABLEタグ式に比べると、すっきりしていいのです。但し、あまりに古いブラウザだと上手くいかないかもしれないです。

簡単に段組を組む方法『display:inline-block;を利用する。』

CSSの例。

ul.text-list li{
display:inline-block;
width:20em;
}

設計

テキスト等を画像の様な「枠」(ボックス)にし、並べることで類似的に段組みとする。

テキストを画像ファイルの様に並べる方法が『display:inline-block;』

『display:inline-block;』を指定すると、その要素はレイアウト上【画像ファイル】と同じような存在になるのです。つまり、画像ファイルと同じように、複数のテキスト枠などを横に並べることができるようになるのです。

全体をdivで囲い、幅を「%」で指定すれば割合で分割することができるので、一応TABLEレイアウトと似たようなこともできます。

今回の例では、リスト要素<li>をインラインブロック化し、一つの『枠』を20文字の長さに指定してみました。この指定方法だと、Webブラウザの幅が40文字以上表示できる状態であれば、横に2つ並び、60文字以上であれば3つ並ぶのです。ブラウザの横幅によって自動的に段数を変えることができるのが、文字幅指定の魅力なのです。反面、画像と同じ扱いなので、ブラウザやレイアウト幅より大きくなるとはみ出てしまうのが難点なのです(解決法を模索中(笑)。)

注意:厳密にレイアウトを組みたい場合、並べたい要素を書く際は、必ず</div><div>の様に続けて書かないとだめなのです。けっして、それぞれのタグの間にスペースや『改行』を入れてはいけないのです。入れてしまうと、ブラウザ側で文字サイズだけを変えた時にレイアウトが崩れるのです。(間に【スペース】という『文字』が入っているのが原因なのです。特に『改行』は気づきにくいのです。)margin:0;を指定してもスペースが空いている場合はこのトラップに陥ってるのです。ってか、これに気づくまで3時間近くかかったのですよ(涙)。

レイアウトをするもう一つの方法、『position:absolute;を利用する。』

HTMLとCSSの例。

<html>
<head>
<style type="text/css">
div.sotowaku{
margin:0.25em auto;
position: relative;
width: 95%;
border: #009900 5px solid;
}
div.text-a{
position:absolute;
top:0;
left:0;
width:150px;
border: #000099 5px solid;
}
div.text-b{
margin-left:180px;
border: #ff9999 5px solid;
min-height:7em;
}
</style>
</head>
<body>
<div class="sotowaku">
<div class="text-a">★いちご<br>★みかん<br>★りんご<br>★ばなな</div>
<div class="text-b">果物で一番好きなのは何ですか?<br>ところで、すいかは果物なんですか?野菜なんですか?</div>
</div>
</body>
</html>

リストなのに<li>を使っていないなど、あまりいいタグの使い方ではないのですが、サンプルということで勘弁してください。このHTMLファイルをブラウザで表示させるとこんな感じになるのです。

レイアウトの結果

設計

なんとなく図にまとめてみると...、
構造図解
まず、divタグで【外枠】を作り、中に収める内枠div等を別に2つ準備するのです。本文である【文章B】は「margin」を使って、あらかじめ左側の余白をあけておき、その余白にもう一つの枠【文章A】を浮かべるイメージで作成するのです。

テキストを浮かべる魔法の呪文が『position:absolute;』なのです!

ものすごーくてきとーかつ大雑把に書いてしまうと、(1)『postion:absolute;』を指定すると、(2)『position:relative;』が指定された要素(枠)を基準して、(3)テキスト等の位置を(他のテキスト等に関係なく)自由に決めることができる命令 ... なのです。結果、好きな位置にテキスト等を浮かべることができるようになる...と勝手に解釈しています(笑)。(『position:relative;』が指定された(枠)がない場合は<body>になるようです。)

つまり、『position:relative;』と『postion:absolute;』はペアの関係ということになるということで、以下のような感じになるはずなのです。

  1. 【外枠】のdivに「position: relative;」を指定し、子要素の「position: absolute;」の座標基準を外枠divに設定する。
  2. 【文章A】に「position: absolute;」を指定し、「top:0;」「left:0;」「width:150px;」(値は変更可)を指定する。これで、【外枠】のtop(上からの距離)・left(左からの距離)を指定した位置に、width幅の枠を【浮かべる】ことができる。(※right,bottomもあるらしい)
  3. 【外枠】中に【文章B】を設定。そのままだと【文章A】と【文章B】が重なってしまうので、【文章B】の左マージンに、【文章A】で使用した幅を設定する事で回避する。

失敗例

min-height:7em;

を入れないと悲しいことになります^^;。

レイアウトの結果
●これはものすごく悲しい...(涙)

つまり、【文章B】より【文章A】の方が縦に長い場合、【文章A】は【外枠】から飛び出してしまうのです。(【文章A】は『浮いている』状態の為。)それを回避するために、【文章B】に「min-height:7em;」(最小縦幅指定:7em)を指定する等の工夫がいるのです。

『position:absolute;』応用例 - 記事にラベルを付けてみる

うちのcodeタグに使っていたCSSなのです。Codeセクションの左上にある葉っぱの「Code:」マークをこれで実現しているのです。(この『Code:』マークはHTMLには一切書かれていないのがPointなのです。)

code{
border: #ffcc99 3px solid;
padding : 2.5em 1em 0 1em;
display:inline-block;
position: relative;
border-radius: 0px 15px 0px 15px;
}
code:before{
content: "Code:";
position:absolute;
top:3px;
left:3px;
font-size:0.8em;
padding:0.25em;
background: #ffcc99;
border-radius: 0px 1.5em 0px 1.5em;
}

<code>はインライン要素なので、『display:inline-block;』でブロック要素に変えてます。そして、『code:before』に『content: "Code:";』を指定することで、content:に書かれた文言を<code>タグ要素で囲まれたテキストの前に入れることができるです(『:before』は、大雑把かつテキトーにいうと、指定した要素で囲まれた文の前に任意の文字列を入れることできる命令。)。後は先ほどと同じやり方で、葉っぱ部分を『浮かべて』完成なのです。

position命令はちょっと難しいのですが、一度覚えると、いろいろ応用ができて楽しいことができるのがメリットなのです。

枠の角を丸くする方法。

border-radius: 左上 右上 右下 左下;

『記事にラベルを付けてみる』のCSS中に書かれている「border-radius: 左上 右上 右下 左下;」の部分が、角を丸める魔法なのです。

いわゆる「border」の他に「img」なんかにも使えちゃったりするのです。

実は、この書き方は省略形で、実際は丸める部分の縦横比を別に指定したりすることもできるみたいです。



くりすたる・の〜と