「CSS」の版間の差分
削除された内容 追加された内容
122.97.104.211 (トーク) による版 142138 を取り消し タグ: 取り消し |
編集の要約なし |
||
40 行
<!-- === 実際に使われる場合のCSS ===
[[w:W3C|W3C]]の理念からすると、HTMLでスタイルを設定するというのは邪道ということになりますが、CSSはブラウザの解釈など、難しい点が多く、特に法人の場合、それが直接コストにつながるので、デザイン部分は100%をCSSで記述するという例はまだ多くありません。結局CSSもまだまだ発展途上の規格なので、無理してすべてデザインを任せる必要はないといえます。また、[[w:2ちゃんねる|2ちゃんねる]]を始めとしたインターネット上のコミュニティにおいては、W3Cにばかり忠実で、実益をあまり気にしない者を'''W3C信者'''と呼んだりして、疎んじる風潮があります。事実、信者の中には、現実的なサイトレイアウトをしないわりに、人に自分の価値観を押し付けたりすることが多いので、そう見られるのも当然のようにも思えます。信者になるのは悪くなく、むしろCSSの発展のために喜ばしいことですが、気をつけたほうがいいでしょう。 -->
== ※ 未分類 ==
:※ どこのサブページに入れたらいいか不明な内容を、ここに記述する。
:ある程度、記述が確立したら、サブページ化してください。
たとえばCSSを使って、ページを左右2段組にしたい場合、下記コードのようにすればいい。
典型的な例である。
;コード例
<syntaxhighlight lang="html5">
<!DOCTYPE html>
<html lang="ja">
<head>
<title>CSSによるページ左右分割のコード例</title>
</head>
<style type="text/css">
.left{
width: 450;
float: left;
background: #CCCCFF;
}
.right{
width: 300;
float: right;
background: #FFAAAA;
}
.kaigyo1{
word-break: break-all;
overflow-wrap: anywhere;
}
.kaigyo2{
word-break: break-all;
overflow-wrap: anywhere;
}
</style>
<body>
<div class="left">
<div class="kaigyo1">
aaa aaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
<div class="right">
<div class="kaigyo2">
bbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbbbbbbbb bbbbbbbbbbbb
</div>
</div>
</body>
</html>
</syntaxhighlight>
;解説
floatの指定がないと、片方のブロックの下の行から、もう片方のブロックの描画を開始してしまう。なので、もし floatが無いと、左右のブロックが斜め気味に配置されてしまい、目的の配置にならない。
とにかく、左右に段組をしたい配置の場合、まず float を検討するのが良いだろう(なお、他にも方法はある)。
CSS 指定の中の
word-break: break-all;
overflow-wrap: anywhere;
は、改行を指定するのに、実用上は、普通は必要になる。
コレが無いと、長い文章などが突き出てしまう。(特に日本語の場合、突き出やすい。)
なお、<code> word-break: break-all; </code> も <code> overflow-wrap: anywhere; </code> も効果はほぼ同じだが、ブラウザ種類ごとの互換性のため、上記コードでは両方とも記載してある。
{{-}}
{{Stub}}
|