讃岐小僧のEngineering×Techメモスマートフォン用の表示で見る讃岐小僧のEngineering×Techメモ未経験から挑戦中のプログラミングや、趣味の野球や狩猟について、その他、ビジネスやテクノロジーをテーマに様々なことをつぶやく場所です。part1CSSはじめにエンジニアになりたい!サイトやブログを作ってみたい!そういう方は最近多いのではないでしょうか。私もそんな1人なのですが、おそらく何かを作りたいと思っている人が最初に手につけるであろう、HTMLとCSSでも特に今回はCSSのdisplayプロパティについて記事を書いてみたいと思います。記事を書いている自分の理解度もアップさせること。displayプロパティとは?displayは、要素の「表示形式」を指定するプロパティです。Elements)の2つに分ける事ができます。それぞれルールを持っており、どの要素の内側にどの要素を配置できるかなどが決まっています。そのためサイトやブログの作成者はこのルールに従う必要があります。「ブロックレベル要素」と「インライン要素」という用語が出てきました。それぞれ解説したいと思います。ブロックレベル要素ブロックレベル要素は一つの塊としてブラウザに認識されます。見出し、段落、表など、ページを構成する基本となる要素の事で、一般的なブラウザでは改行が入ります。ブロックレベル要素としては下記のようなものがあります。---構成要素それでは実際に見てみましょう。下のようなhtmlファイルを用意します。</body></html>次に下のようなCSSを用意します。none;}2つのファイルが用意できたら早速ブラウザに表示させてみましょう。結果は下のイメージのようになったかと思います。ここで補足ですが、ブロックレベル要素の場合、普通であれば縦のサイズ(height)横のサイズ(width)を指定すると思います。指定しない場合は親要素と同じにデフォルトで設定されるため、横幅が100%になります。今回の場合は親要素が<body></body>になるので、それぞれの要素が画面いっぱいに拡がっているのが確認できます。その他、「一般的なブラウザでは改行が入る」と前述した通り改行が入っているのが確認できますね。※要素と要素の上下が白色抜きになっているところです。次にインライン要素を見ていきます。インライン要素インライン要素はブロックレベル要素の中に位置させる要素です。<strong></strong>要素のように、<p></p>段落のなかの一部を強調するようなものがこれに該当します。これらはブロックレベル要素とは違って前後に改行が入りません。先ほど用意したHTMLファイルを少し変更します。</body></html>続いてCSSも下記のように変更します。none;}結果は下のイメージのようになります。今回新たに「インライン要素のテスト」という段落を追記しました。イメージの灰色の部分です。「テスト」の部分を大きくしていますがここがインライン要素になります。<strong></strong>で囲ってあげている部分で、新たにタグを追加してもこれまで利用していた<h1></h1>や<p></p>のように改行は発生していません。まとめここまで、displayプロパティの主にブロックレベル要素とインライン要素の2つを画面に表示させるまでの基本的なものを記載しました。part2ではこれらをもう少し掘り下げたいと思います。読者になるRails参考書はこちらSNSTwitterはてなブログをはじめよう!keisuke8925gdkさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。