【CSS】floatとclearfixで要素を横並びにする方法を紹介します（前半はfloatの説明）
こんにちは、WEBマーケティング部の杉尾です。 今回は、指定した要素を右寄せもしくは左寄せにするプロパティ、『float』の使い方を紹介します。 floatプロパティとは floatプロパティとは、それが指定された要素を左寄せ、もしくは右寄せに配置します。 注意点 ・ある要素にfloatを指定してどちらかに寄せると、後に続く内容が反対側に回り込みます。 ・floatプロパティを指定したい要素に、positionプロパティのrelative、absolute、fixedのどれかを指定すると適用されません。 基本的な使い方 まずは参考ソースをご覧ください。 【HTML】 <p> <img src="css_side_by_side.png" class="box_left"> 回りこみテスト </p> 【CSS】 .box_left { float:left; width:100px; hei
【CSS】display:inline-block;で要素を横並びにする方法（前半はHTML5におけるボックスの話）
現在、（HTMLにおいては)ブロック要素、インライン要素という分け方がなくなりました。 では、どうなったかというと、その考え方はCSSに引き継がれています。 ブロック要素、インライン要素というHTMLの話ではなくて、 『その要素の、CSSにおける初期設定がブロック扱いなのかインライン扱いなのか』という分け方になっているわけです。 つまり、ブロック要素、インライン要素という分け方は廃止されたものの、ブロック扱い、インライン扱いという見た目の指定に関する考え方は残っているということです。 HTML4.1やXHTML1.0までは、HTMLの『ブロック要素、インライン要素という考え方』とCSSの『displayプロパティ』が混在していたので、HTML5では、それを整理したんですね。 見た目の話に限ると、『ブロック要素、インライン要素』が『コンテンツのカテゴリーやコンテンツモデル』に引き継がれたとい
HTML5のコンテンツモデルって何？という方にオススメの記事です。
こんにちは。 本日はコンテンツ・モデルについてお話しさせていただきます。 よろしくお願いします。 コンテンツ・モデルとは HTML5には、それ以前にあったブロック要素、インライン要素を、より細かく定義づけした「コンテンツ・モデル」という概念があります。 コンテンツ・モデルとはどの要素にどの様を入れてよいか定義したものです。 前回紹介したカテゴリーと混同しがちですが、 カテゴリーは、その要素がどこのカテゴリーに属しているか示したもので、 コンテンツ・モデルは、その要素がどのカテゴリーの要素を含んでよいか ということを表したものです。 前回同様、これらを全て把握する必要はありません。（HTMLコーディングを始めて間もない方は特に） 実際にHTMLを記述し始めて思った通りにいかなくて、「この要素の中にあの要素は入れられるか」ということを確認したいとき、このページを再び訪れるという程度で構いません
HTML5要素のカテゴリーを押さえましょう
こんにちは。 WEBマーケティング部の杉尾成行です。 今日は「HTML5要素のカテゴリー」についてお話しさせていただきます。 HTML5のタグの大部分がこれからお話しする7つのカテゴリーに含まれます。 ですが、これらのタグがどこに属しているか全てを把握する必要はありません。 特に、HTMLコーディング初心者の方は以下の話にとらわれることなく、「こういうものがあるんだな」と何となく見ていただくだけで構いません。 実際にコーディングを記述してみて上手くいかない場合、「もしかしたらあの決まりに反しているからかな」と思って、この記事とコンテンツ・モデルに関する記事を再びご覧いただくというくらいの感じでいいと思います。 それを念頭において、下図をご覧ください。 ７つの主要なカテゴリーを表したものです。 重なっている部分があるのは複数のカテゴリーを持つ要素があるということです。 それぞれの要素にはどの
【CSS】display:table-cell;で要素を横並びにする方法
こんにちは、WEBマーケティング部の杉尾です。 今回はCSSで要素を横並びにする方法の第四回目として、 『display: table-cell; 』を使う方法を紹介します。 ⇒ソースだけ見たい方はコチラ floatでの横並びはコチラ ⇒【CSS】floatとclearfixで要素を横並びにする方法を紹介します（前半はfloatの説明） 『display: inline-block; 』での横並びはコチラ ⇒【CSS】display:inline-block;で要素を横並びにする方法（前半はHTML5におけるボックスの話） CSSで横並び 第四回目 displayプロパティについて 前回、『display: inline-block; 』で要素を横並びにする方法を紹介した際に、 displayプロパティについての説明をしました。 これは、HTMLタグで書いた要素をどのように表示するか指定す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
