display概要CSSプロパティ「display」は、要素の表示形式を指定できます。表示形式というのは、要素にはブロック要素とインライン要素があり、タグによって初期値が異なっています。このプロパティはそれらの要素に特定の値を指定することで振る舞いを変えることができるのです。前提として、この二つがどのようなものなのかを理解しておく必要がありますので、ここで簡単に確認しておきましょう。ブロック要素は、見出し、段落、表などの文章の骨組みとなる要素です。新しい行から始まり(改行される)、横幅いっぱいに広がります。段落タグの<p>タグや、大見出しを指定する<h1>タグなどがあります。インライン要素は、文章の一部として扱われる要素です。文章の装飾であったりリンクなどが該当、こちらは改行されません。インライン要素扱いのHTMLタグの種類としては、リンクを指定する<a>タグや、画像を挿入する際に使用する<img>タグなどがあります。「none」について解説していきます。値:blockこの値を指定すると、ブロック要素を生成します。ブロック要素は高さや幅が指定できたり、改行が入るようになります。これをインライン要素である<a>タグに指定してみます。効くようになりました。block;}</style>値:inlineこの値を指定すると、インライン要素を生成します。インライン要素は文章の一部として扱われる特性から改行を伴わないなどの特徴があります。これをブロック要素である<p>タグに指定してみます。すると、<p>タグはインライン要素として生成されているので、<p>要素が改行されずそのまま並列に表示されているのがわかります。inline;}</style>値:inline-blockこの値を指定すると、インライン要素でありながらブロック要素の特徴を持ちます。表示関してはインライン要素のように改行されませんが、ブロック要素のように高さや幅、余白などを指定することができます。みられる例として、ナビゲーションバーなどにおける横並びリストがあります。横並びで表示させたいが、デザインとしては要素の余白が必要、といった例です。効くようになっています。inline-block;}</style>値:none最後に、noneです。読み方はカタカナで書くと、「ノン」ではなく「ナン」と言います。この値を指定すると、要素が表示されません。要素そのものが生成されないのでレイアウトに影響を与えません。何かの条件の時に、要素を非表示にしたい、といったケースで使います。「caption」と同じような振る舞いをしますnone要素を非表示にします。指定された要素の中身は存在しなかったようにレンダリングされますinline-blockインラインレベルのブロック要素を生成しますinline-list-itemlist-itemを指定した場合の振る舞いをインラインで生成しますinline-tabletableを指定した場合の振る舞いをインラインで生成しますinline-flexflexを指定した場合の振る舞いをインラインで生成します使用例スマートフォンサイトでみられるような縦積みメニューの例です。どの幅でみても横幅いっぱいに広がり、<a>タグに値:blockを指定することでタップ(クリック)できる範囲を全体に広げています。elements関連CSSプロパティdisplayrightlefttopbottompositionz-index@ルール@keyframesUI関連cursoroutlineoutline-offsetoutline-widthoutline-styleoutline-colorカウンターcounter-incrementcounter-resetテーブル(表)テキスト関連white-spacetext-transformtext-shadowtext-overflowtext-decorationtext-decoration-styletext-decoration-linetext-decoration-colortext-align-lasttext-indenttext-alignフィルター効果filterフォーマットline-heightletter-spacingフォント@font-facefontfont-size-adjustfont-stretchfont-familyfont-sizefont-variantfont-stylefont-weightフレックスボックスフロートclipfloatclearボックスモデルwidthheightmin-widthmin-heightmax-widthmax-heightvisibilitybox-sizingoverflowoverflow-yoverflow-xマージンmarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-leftメディアクエリ@mediaリストlist-style-imagelist-style-typelist-style-positionlist-style変形transitiontransition-timing-functiontransition-propertytransition-delaytransition-durationtransformtransform-styletransform-origin段組みcolumnscolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-fillcolumn-gapcolumn-widthcolumn-count罫線borderborder-styleborder-colorborder-widthborder-topborder-top-styleborder-top-colorborder-rightborder-top-widthborder-right-styleborder-right-colorborder-right-widthborder-bottomborder-bottom-styleborder-bottom-colorborder-bottom-widthborder-leftborder-left-styleborder-left-colorborder-left-widthborder-imageborder-image-sourceborder-image-widthborder-image-sliceborder-image-outsetborder-image-repeatborder-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-top-right-radiusborder-top-left-radius背景backgroundbackground-imagebackground-attachmentbackground-clipbackground-colorbackground-originbackground-repeatbackground-size色opacity色と透明度color装飾box-shadow記述法backface-visibilityvertical-alignuser-select配置displayrightlefttopbottompositionz-index「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。