CSSシェアするLINE!0CSSでサンプルサイトを作りながら「こういうデザインにしたい」と悶絶してたので、勉強してきました!1、displayプロパティとは?1-1、displayの値の種類1-2、それぞれの違い2、displayプロパティを使ってみる2-1、タグ自体がblock、inline?2-2、inline-blockも含め使ってみるHTML/CSSの勉強をしている方は、displayの使い方はマスターして使いこなせるようにサンプルサイトなどを作りまくるのが結局一番の練習になります。ともサンプルを作りましょう。displayプロパティとは?改めてですが、CSSはセレクタ{プロパティ:値;}でHTMLを装飾します。displayプロパティではディスプレイのどの位置にどのように表示させるのかというプロパティになります。値の種類は少ないですが、表現方法としては非常に重要になります。具体的に以下のサイトで見てみます。これをdisplayプロパティがどこに使用されているのか見てみると以下のようになっています。displayプロパティの「inline」と「inline-block」という値を使用して並べています。displayの値の種類displayの値は以下の4つになります。displayの種類inlineblockinline-blocknoneまた、、後述しますがタグ自体が持つinlineやblockの性質があります。詳しくは順を追って話しますが、pタグやdivタグにはblockの意味があり、spanタグにはinlineの意味があるという事をうろ覚えしてから読み進めると理解しやすいと思います。それぞれの効果は以下のようになっています。■inlineは横並び■blockは縦並び■inline-blockは横並びで中身(A,B,C)を縦並び■displayで指定した要素を非表示それぞれの値の特徴を見てみましょう。それぞれの違いdisplay:inline;inlineは要素を横並びに平らに表示します。その中で何が指定できるのかを順に確認していきます。paddingについてpaddingの指定はできますが上下の指定には注意する必要があります。inlineはpaddingは上下を指定出来ますがmarginは上下の指定が出来ません。インラインが複数行などになるとpaddingの上下幅が大きければ重なってしまいます。royalblue;}これは例文ですこれは例文ですこれは例文ですこれは例文ですこれは例文ですこれは例文ですこれは例文ですこれは例文ですpaddingの上下が大きすぎると重なってしまいます。必要最低限にしてデザインが崩れないようにしましょう。続いてmarginについて見てみましょう。marginについてmarginは左右の指定はできますが、上下の指定はできません。inlineの要素を中央に持ってくるには?text-align:centerやvertical-align:midleを使えば中央に配置することは可能です。注意点があるので説明していきます。1左右の中心にしたい場合inlineの意味を持つものをblockで囲います。最初のほうでお話ししたpやdivはblock、spanはinlineというのがここで活きてきます。{color:red;font-weight:bold;}文字をセンタリングtext-alignはinline(今回のspanタグ)ではなく、その親要素(今回はdivタグ)に対して指定ましょう。vertical-alignはinlineの要素に直接指定が出来ます。ごちゃごちゃにならないように注意しましょう。display:block;続いてblockについて見ていきましょう。inlineは横に並べていましたがblockは縦に並べる値です。inlineとは違い、marginを上下左右に設定することもできます。{margin:10px;background-color:orange;}上下左右のmarginを10pxブロック要素(pタグ)自体からmargin:10px取ったところにborderがあるという形になります。要素自体の幅、高ささらに違う事として、要素自体の幅・高さの変更が可能かどうかです。inlineは要素自体の幅、高さを変更できない。blockは要素自体の幅、高さを変更できる。blockの要素を中央に持ってくるには?結論を言えば、blockの要素はtext-alignやvertical-alignの指定はできません。代わりにmargin-left:auto;やmargin-right:auto;とするなどして位置の調整をしてあげましょう。display:inline-blockinline-blockについて見ていきます。ここが最大の山場ですので頑張っていきましょう。それでは見ていきます。inline-blockとは以下のようなものです。縦に並ぶblockの要素を1つの要素として括って、inlineで横に並べるという事です。ようは『いいとこ取り』です。これはたぶん実例を使ったほうが見やすいので実例で見ていきましょう。inline-blockの要素を中央に持ってくるには?inline-blockはtext-align、vertical-alignの指定は可能です。displayプロパティを使ってみるじゃあさっそく使ってみましょう!って張り切るのもいいのですが、使う前にもう一つ重要なことについて確認しておきます。それは、序盤にお話ししたタグ自体がblock・inlineの意味を持っているものがあるという事です。例で言えば、「<p>は行というブロックの意味がある」みたいなことです。display:inline;としてやれば文を横に並べるみたいなこともできます。タグ自体がblock、inline?まずタグ自体がblockとして機能するものの例を見ていきます。<blockquote>、<div>、<dl>、<form>、<h1-h6>、<hr>、<ol>、<p>、<pre>、<table>、<ul>など続いて、タグ自体がinlineとして機能するものを見ていきます。<a>、<br>、<code>、<i>、<img>、<input>、<label>、<select>、<small>、<span>、<strong>などblockの意味を含むタグにはいちいちdisplay:block;と指定する必要はありませんし、inlineの意味を含むタグにdisplay:inline;と指定する必要もありません。指定するのはinlineとblockを逆転させたい時に付けます。inline-blockも含め使ってみる今回は以下のような形にしてみましょう。<p>HTML/CSSを独学で勉強しながらWordpressでブログを運営しています。<p>今回のポートフォリオ作成もHTML/CSSの勉強で作成しました。<p>ブログでExcelを中心とした仕事効率改善の情報を発信しています。<p>初歩的な使い方から実践的に関数などを使ってデータ分析や入力の自動化などについて解説しています。<p>30代になってから、「アクティブな趣味を持ちたい」と考えてロードバイクを買いました!将来的に日本1周に行けるようにカスタムや道具の紹介もしています。text-align:left;}imgタグのパスや写真、aタグのリンク先などを変えればアレンジできます。コピペなどはご自由にして練習してみましょう。まとめ今回のdisplayプロパティは初心者が表現方法を知る上で非常に重要な項目なので、バシバシ使いながら身に付けていきましょう。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。