
スキルアップ
2021.01.25
無料で学べるプログラミングの学習サイト!おすすめ22選【2020年1月版】
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
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.25
独学でプログラミングの勉強を始める社会人たちが続々と増えていますが、最もオススメな学習法は「まずは無料の学習サイトでプログラミングに触れてみること」。そこで本記事では、初心者におすすめのプログラミング学習サイトを国内外あ […]
スキルアップ
2021.01.25
この記事ではシステムエンジニア(SE)とプログラマ(PG)の違いをわかりやすく解説します。システム開発の流れを説明しながら具体的に携わる仕事内容や必要スキル、年収まで違いを比較していきますので、ぜひ参考にしてください。 […]
スキルアップ
2021.01.22
通勤せず、家で仕事ができたら理想的だと思いせんか?コロナ禍の今、在宅ワークに注目が集まっています。パソコンとインターネット回線があればどこでもできる仕事が増え、完全在宅を前提とした求人も多く目にするようになりました。ここ […]
スキルアップ
2021.01.22
大学生のうちにプログラミングスキルを身につけておくべきか悩んでいる方、エンジニアとして働くことに興味がある方はぜひご覧ください! 大学生でプログラミングを習得するメリット、おすすめのプログラミング言語&学習法、失敗しない […]
スキルアップ
2021.01.22
本記事では、給料やお金をもらいながらでもプログラミングを学べる方法や、未経験からでもエンジニアへの転職が可能な理由について紹介します。プログラミングスキルが未経験者の就職や転職において有利となる理由も解説。これからプログ […]
スキルアップ
2021.01.21
「高卒者のお給料って高いの?低いの?」「大学を中退しても高収入は得られる?」最近は高卒採用に力を入れる企業が続々と増えていますが、こんなふうに考えて最初の一歩が踏み出せない学生さんも多いはず。そこで今回は、学歴・世代・男 […]
INTERNOUS,inc. All rights reserved.