サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
www.2step-css.com
.box1{ width: 200px; height: 100px; background-color: #FFCCCC; float: left; } .box2{ width: 100px; height: 100px; background-color: #66CCFF; float: left; } .kaijyo{ clear: left; } 段組するボックス１、２は、特別な変化はありませんが、 タテヨコの段組をするための必需品、段組解除用のボックスを新しく定義してあげる必要があります。 上の、.kaijyoのことです。 ここで、使ってるclear属性は、float属性で定義された回りこみ指定を解除する働きをもってます。 くわしくは、<DIV>をタテヨコに段組していこうで解説しております。 そして、気になるHTMLソース部分はというと、
一つのHTML要素にクラス要素を複数指定することが出来ます。 <p class="text mb10">段落テキスト</p> 通常通り class="" と記述した中に適用したいクラス名を「半角スペース」で区切るだけでOKです。 それでは練習をしてみましょう。 まず、 .text というクラスセレクタで、フォントカラー #FF3333、フォントサイズ 20px を定義。 次に、.mb10 というセレクタで、 margin-bottom:10px 、 .mb20 というセレクタで、 margin-bottom:20px 、 最後に、.mb30 というセレクタで、 margin-bottom:30px と指定してください。 HTMLは自動的に挿入されますが、クラス名に注目してCSSを設定してみてください。 練習ページで編集する>> <div class="text mb10">段落テキスト
CSSファイルには複数のCSSの定義を書き込みますが、それらには全て効果が適用される優先順位があり、 優先順位によって、先に定義された記述を上書きすることが出来ます。 レイアウトを行う上で必ず必要になってくるので、きちんと身に付けてください。 ■記述順による優先順位と上書き CSSの記述では、先に記述したものから、HTMLファイルにその効果が反映されます。 h1 { color : #CCC } h2 { color : #DDD } h3 { color : #EEE } 上記の例では、h1,h2,h3の順にHTMLにフォントカラーの指定が適用されていきます。 h1 { color : #CCC } h1 { color : #DDD } h1 { color : #EEE } 次の例は全てh1に対してフォントカラーを指定していますが、この場合、まずh1にフ
このコンテンツも、いよいよ佳境です。 ここで紹介する、タテヨコに段組する方法を、マスターすれば、 スタイルシートでのレイアウトが、自由にできるようになるんじゃないかと思います。 タテヨコの段組とは、 前のページで紹介した、横に段組したボックスを、 縦に並べていくことです。 それでは、順を追って、解説していきます。 まず、スタイルシートを定義します。 定義方法は、ＣＬＡＳＳセレクタを使用した方法。 「.box1」と「.box2」と「.box2」と「.box4」（赤・青・黄・緑）は、前のページで定義したボックスと同じです。 注目してほしいのは、「.space」。 赤い太字で書いてある、「 clear属性 」が、タテヨコの段組のポイントです。 この属性は、「 float属性 」によって、指定された、 回り込みを解除する 、指令を出してくれます。 図の値は「 left 」で
<DIV>っていうのは、主にブロック要素として機能します。 ブロック要素とは、下の図のような、特徴を持っています。 これが、ブロック要素の特徴です。 かんたんにいえば、この要素は、 自分の横に別の要素を表示するのを許さない 、 そんな強い子なんですねー（笑） なぜかというと、 だからです。 そこで、別に横に並んだっていいじゃないか、 そんな説得をする、スタイルシートの設定方法を、 次のページから解説します。 これさえ知れば、自分で好きなだけ、横に並べることができるので、 必見です。 と、その前に、 スタイルシートを使う上で、大切な宣言を説明したいと思います。 通称「DOCTYPEスイッチ」と呼ばれる、 この宣言についても知っておいて下さい。
このページでは、<ＤＩＶ>を横に段組していく方法を紹介します。 <ＤＩＶ>の特徴は、前のページで説明したので、 まだ見てない方は、そちらを見てからでお願いします。 さて、前のページで、<ＤＩＶ>はちゃんとした設定をしないと、 横に並べることができない、ということを紹介しました。 でも、ちゃんとした設定といっても、たった1つの属性を、書き込むだけなので、 かんたんなんです。 ここでは、スタイルシートの定義方法のなかで、 もっとも一般的な、「ＣＬＡＳＳセレクタ」をつかって、段組していきます。 では、とりあえず、２つの<DIV>を、横に並べてみましょう。 なぜこのように、横に段組できるかというと、 「box1」と「box2」で定義している「 float属性 」のおかげです。 この、 float属性 は、 要素の配置と回り込みを指定するための属性 ですので、 この場合、「
スタイルシートの基礎もいよいよ大詰めです。 ここでは、定義する場所を解説していきますね。 スタイルシートっていうのは、前のページまでで解説した、 定義する方法をつかって、これから解説する定義する場所に定義して、 そこから適用したい場所に呼び出して、はじめて使えるようになります。 （スタイルシートの使い方、全体像を参照のこと） それじゃあまずは、インラインCSSと呼ばれる定義の場所を覚えておいてください。 インラインＣＳＳ の特徴は、 スタイルシートを適用させたい場所に、直接定義を書き込むというもの。 たとえば、「 <H１>タグを設定したテキストを、赤色で表示したい 」場合、 このように、タグに書き込んでやります。 <H1>タグという適用させたい場所に、直接定義を書き込んでるでますよね？ このインラインＣＳＳという方法は、１箇所のみに、設定する方法なので、 たとえ、
このページを最初にブックマークしてみませんか？
『http://2step-css.com/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
