ブログ - 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-10 21:10:00

こんにちは   ひきちひきです     SEO対策ってよく聞くけど   じゃあ具体的に ...


ブログ 2023-05-27 15:37:00

今日はコロナ禍を終え、急激に最近忙しくなってきたからこそ感じたことをツラツラと書きます。「挨拶」と「整理整頓清掃」これが出来ない会社やチーム ...


ブログ 2023-08-30 22:57:00

こんばんは!           厳しい暑さで溶けに溶けた、なかむら りんです ...


ブログ 2023-11-30 17:43:00

  “起きたらLINEしよう!”     素敵なホテルでぐっすり寝て迎えた東京 ...


ブログ 2021-01-29 19:59:00

今週は「2Dと3Dの融合」をテーマに おすすめモーショングラフィッックス映像を ご紹介します。   早速ご紹介します! ...


ブログ 2021-02-13 18:57:00

動画マーケティングとは       「動画コンテンツ」を用いて     企業 ...


ブログ 2023-08-31 17:49:00

ヒット曲のサビ前はブレイクっていう手法がよく使われていますよね   今から盛り上げるぞっ!!! という意識の中で、瞬間音が途 ...


ブログ 2021-02-22 21:52:00

みなさんこんにちは!!   水流です!!   今回の記事は、今現在も世間を脅かしているコロナについて書こうと思い ...


ブログ 2020-11-29 22:43:00

みなさんこんにちわ! 11月もあっという間に過ぎましたね。 私はすごく早く感じました!   11月はとても寒くなりましたよ ...


ブログ 2023-12-11 11:54:00

こんにちわ。 横山です。     最近AIのお勉強に勤しんでる横山ですが、 その第一歩として、『 Midjou ...