ブログ - 2021-02-11 14:59:00

【備忘録】displayプロパティについて【HTML】

Posted by 堀 裕成
Yusei Hori

こんにちは、ほーりーです。

 

ありがたいことにHP制作のご相談を受け、

コーダーとしてPCに張り付く生活をさせていただくことも多くなりました。

 

まだまだ駆け出し、勉強中の僕(生涯勉強ですが...)

初歩的なことから固めていく必要があるな、、、と基礎の大切さを感じます。

とうことで今回は僕自身の備忘録的な感じで

HTMLにおけるdisplayプロパティについてまとめてみようと思います!

情報が古かったらごめんなさい、考え方は合っているかと。

 

今回まとめるdisplayプロパティは

block要素,inline要素です。

 

block要素

ブロック要素はp,div,h1~h6タグなどの初期値で、

行全体で1単位にまとまっており、縦に並びます。

 

なので下記のようにソースを書くと...

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtubeチャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|キャラクターデザイン|

横1列を1単位として

ブロックレベル要素は

縦に並びます。

 

⬆︎上記のようになりました!

またタグに指定をすることで

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtubeチャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|キャラクターデザイン|

幅・高さを変更することが可能です!

 

 

また、要素をセンタリングするときによく使用するtext-align,vertical-alignは

ブロック要素では効果がありません。

センタリングしたいときは

 

margin:0 auto;などを使用します

 

inline要素

インライン要素はspan、a、imgタグなどの初期値で、

主にブロック要素の中で使われます。

 

またインライン要素は縦並びにならず横並びになるので

 

spanタグを使うと 1列で複数の色を 指定できたりしますw

 

 

インライン要素は横のpadding,margin調整は可能ですが

縦の調整はできません。厳密には縦のpaddingはできるんですが

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtubeチャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|キャラクターデザイン|

こんな感じで
ちょっと変な感じになります。

 

インライン要素の中央揃えは、親要素へのtext-align(縦揃えはvertical-align)で可能です。

なので画像(imgタグ)を中央に揃えたいときは下記で行けます。

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtubeチャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|キャラクターデザイン|

 

 

ざっくりこんな感じでのまとめでした。

実際に使わないとわからないものがいっぱいなのでとにかく作って覚えています。

 

inline-blockやflexなどもっといっぱいあるのですがまた別の機会に。

それではー

 

Posted by Yusei Hori
鳥栖テクニカルディレクター/カメラマン/WEBコーダー/ナレーター 堀 裕成

堀 裕成が書いたその他記事

2021-05-14
ビール × AR !?
2021-01-29
GH4で写真撮影

ブログ TOP

ブログ 2021-02-18 17:12:00

  ”アイデアはどうやったら湧いてくるのだろう・・??”       ...


ブログ 2020-02-21 12:05:00

こんにちは!深田です! 鹿児島で知り合った 須部 貴之さんの誕生パーティーにお邪魔しました。 自分の誕生パーティーを自分で企画 ...


ブログ 2024-04-01 14:31:00

  みなさん、こんにちは銀次です。 4月1日といえば、エイプリルフール!!!!   、、、ではなくて入社式 です ...


ブログ 2019-07-12 13:58:00

ラスベガス2日目。BluemanとONEの二本立てでショー鑑賞。Bluemanはなんだかんだで6回目の鑑賞。毎回リニューアルされてて楽しめる ...


ブログ 2019-09-30 22:57:00

  こんにちは セキです☺️   夏の思い出づくりに お出かけしてきました〜(*´∀ ...


ブログ 2020-03-02 18:10:00

こんにちは^^* 平野です!     まだまだ寒い日が続きますが、今日はあったかいですね^^ 最近、梅の花も咲き ...


ブログ 2021-04-15 21:13:00

4/14(水)本社事務所が工事のため使えず、 急遽レンタルオフィスでの作業となりました^^ ピークスマインドの事務所は 福岡天神大 ...


ブログ 2021-02-11 21:27:00

  今日は知人の紹介で 糸島の、とある会社の社長様との ミーティング。       ...


ブログ 2021-02-11 20:21:00

  まずはじめに。 私は小林賢太郎さんの作品が大好きです。 今回は、その小林賢太郎さんの『ノケモノノケモノ』という演劇作品に ...


ブログ 2023-10-25 16:32:00

初めてのイベント参加   初めまして、2023年9月より準社員として中途入社いたしました。古城戸と申します。 前職では雑誌の ...