
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
ITコラム
2017.05.01
displayプロパティは、ブロックレベルやインラインなど、要素の表示形式を指定する際に使用するプロパティです。
今回は、displayプロパティの概要についてまとめたいと思います。
displayプロパティについては、以下のページもご参照下さい。
CSS【 display 】1 ~ 要素の表示形式を指定するdisplayプロパティ(本ページ)
CSS【 display 】2 ~ list-item
CSS【 display 】3 ~ table
1.displayプロパティとHTML要素
2.displayプロパティの値
3.display: inline
4.display: block
5.display: none
HTML要素のスタイルには、インラインとブロックがあります。
大まかなイメージでは、横に並ぶのがインラインで、縦に並ぶのがブロックです。
インラインやブロックのようなスタイルは、displayプロパティで指定します。
ブラウザによってdisplayプロパティのデフォルト値が決まっていて、ブラウザのデフォルト値がdisplay: inlineの場合はインライン、display: blockの場合はブロック、がデフォルトスタイルとなります。
また、li要素は display: list-item、table要素は display: tableなど、特有のデフォルト値を持つ要素もあります。
displayプロパティのデフォルト値を持っている主なHTML要素は、次の通りです。
HTML要素 displayプロパティのデフォルト値 ■フレージング・コンテンツに分類される要素
a(中身がフレージング・コンテンツのとき)、span、ruby、sub、sup、strong、em、mark、b、i、small、br、u、s、ins、del、cite、q、abbr、dfn、code、kbd、samp、var、bdo、label■エンベッディド・コンテンツに分類される要素
置換要素(文法上はインラインで表示はブロックのようになる)
img、area、audio、canvas、embed、iframe、object、video、menuなどdisplay: inline ■インタラクティブ・コンテンツに分類される要素
input、textarea、select、buttondisplay: inline-block ■ヘディング・コンテンツに分類される要素
h1?h6■セクショニング・コンテンツに分類される要素
section、article、aside、nav■フロー・コンテンツで他のカテゴリに含まれない要素
header、footer、div、p、address、pre、figure、hr、blockquote、ul、ol、dl、li、table、form、fieldset■その他
html、bodydisplay: block li(リストアイテムでul要素やol要素の子要素) display: list-item table(テーブル) display: table tr(テーブルの行) display: table-row th、td(テーブルのセル) display: table-cell thead(tableの横列をグループ化する要素) display: table-header-group tbody(tableの横列をグループ化する要素) display: table-row-group tfoot(tableの横列をグループ化する要素) display: table-footer-group colgroup(tableの縦列をグループ化する要素) display: table-column-group col(tableの縦列をグループ化する要素) display: table-column
特定のHTML要素と紐付いているデフォルト値以外のdisplayプロパティ値として、flex、inline-flexがあります。
そちらも合わせて、displayプロパティの値と内容は次の通りです。
none 要素を非表示にする
領域もなくなるinline デフォルト値
要素はインラインの性質となる
(ブラウザのデフォルトスタイルは各要素ごとに決まっているため、displayプロパティを指定しなかった場合に全てインラインとなるわけではない)block 要素はブロックレベルの性質となる list-item 要素はli要素の表示となり、リストマーカーが付けられる inline-block 要素はインラインプロックの性質となる
幅や高さはあるが、インラインのように横に並ぶtable 要素はtable要素と同じ性質となる table-cell 要素はテーブルのセル(td要素)と同じ性質になる table-row 要素はtr要素と同じ性質になる table-header-group 要素はthead要素と同じ性質になる table-row-group 要素はtbody要素と同じ性質になる table-footer-group 要素はtfoot要素と同じ性質になる table-column-group 要素はcolgroup要素と同じ性質になる table-column 要素はcol要素と同じ性質になる table-caption 要素はcaption要素と同じ性質になる inline-table 要素はtable要素と同じ性質で、インラインの並び方となる flex 要素を Flexboxコンテナにする inline-flex 要素をインラインの性質を持つ Flexboxコンテナにする ruby 要素はruby要素と同じ性質になる ruby-base 要素はrb要素と同じ性質になる ruby-text 要素はrt要素と同じ性質になる ruby-base-container 要素はrbc要素と同じ性質になる ruby-text-container 要素はrtc要素と同じ性質になる run-in 要素はランインボックスとなる
後に続く要素によって、ブロックかインラインかに変化して表示される
displayプロパティの値は、継承されません。
また、displayプロパティは、全ての要素で使用できます。
ブロックレベルの要素をナビゲーションとして横並びに表示させたい場合は、display: inlineを使うと便利です。
ヘッダのメニューや、パンくずリスト等でよく使います。
display:inlineを使用してli要素を横に並べると、次のようなパンくずリスト(Webサイトの階層を表示するナビゲーション)を作ることがができます。
ソースは次の通りです。
(CSS) ol#sample li::after { content: ' > '; margin: 0 .6em;} ol#sample li:last-child::after {content: ''} ol#sample li {display: inline;} (HTML) <div> <ul id="sample"> <li><a href="#0">Home</a></li> <li><a href="#0">Group</a></li> <li class="current"><em>Current</em></li> </ul> </div>
a要素はインラインなので、通常、テキスト領域のみにリンクができます。
目次へ
このようなa要素に、display:blockを指定してブロックレベルにすると、テキスト以外の領域にも範囲が広がって、ボタンのように使いやすい印象になります。
ソースは次の通りです。
(CSS) div#sample {margin:0; padding:0;} div#sample a { -webkit-box-sizing: border-box;/*box-sizing*/ box-sizing: border-box; display: block; text-align:center; line-height:1; margin:0; padding:1em; width:80px; background:#CFC; border-radius:10px} (HTML) <div id="sample"> <a href="#section000">目次へ</a> </div>
display:noneを指定すると、その要素の領域ごとなくなります。
また使うかもしれないから削除したくないような要素に display:none を指定すると、その要素分のスペースごと非表示となります。
ちなみに、同じく非表示にするvisibility:hiddenという指定がありますが、こちらの場合は、領域はそのまま残ります。
display:none と display:block を切り替えて、通常時はサブメニューを非表示にしておいて、マウスオーバー時にサブメニューを表示するような、プルダウンメニューも作れます。
(以下のサンプルは、:hoverを使ってサブメニューを表示させているため、スマホではサブメニューの表示確認ができません。申し訳ありません。)
ソースは次の通りです。
(CSS) ul#sample { position: relative; z-index: 10; margin:0; padding:0} ul#sample li { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; text-align:center; line-height:1em; margin:0 5px 0 0; padding:0; width:110px; background:#CFC; border-radius:0.5em} ul#sample li a {display:block; padding:1em} ul#sample li ul li a {display:block; padding:0.5em 1em} ul#sample li ul { display:none; position: absolute; top:2.5em; margin:0; padding:0} ul#sample li ul li { display: block; border:solid 2px #fdf5a0; border-top:none; background:#fff; border-radius:0} ul#sample li ul li:last-child {border-radius:0 0 0.5em 0.5em} ul#sample li:hover > ul {display: block} (HTML) <ul id="sample"> <li><a href="#section000">目次</a> <ul> <li><a href="#section100">1</a></li> <li><a href="#section200">2</a></li> <li><a href="#section300">3</a></li> <li><a href="#section400">4</a></li> <li><a href="#section500">5</a></li> </ul> </li> </ul>
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.