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

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

Posted by

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

 

ありがたいことに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

が書いたその他記事

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

ブログ TOP

ブログ 2020-04-30 18:05:00

どうも初めまして!! 新入社員の水流です! 水が流れると書いて【つる】と読みます! 音楽は洋楽やEDM、Chilloutをよく聴きます ...


ブログ 2021-05-14 19:58:00

こんにちは、桑原です。 以前、AEでポップな動きの付け方を 載せたんですが、他にも色々見つけたので 紹介します! 以前の記事はこちら ...


ブログ 2024-10-25 14:16:00

みなさんこんにちは!銀次です。 今年も多くの新卒の方がピークスマインドを選んでくれました。   そんな方に向けて行った内定者 ...


ブログ 2024-09-26 17:04:00

こんにちは!   とても暑い夏がさり、、少しずつ秋風を感じて、うれしくて舞い上がっている貝島です。 みなさまいかがお過ごしで ...


ブログ 2021-10-23 23:30:00

  皆さんこんにちは井手口です!   前回の続きミキサーのチャンネルについて ざっくり分かりやすくお伝えしようか ...


ブログ 2023-11-26 08:58:00

【Ae】Ae初心者がよくつまずく事象とその対処法5選    こんにちは 河原田です。今回は、『AE初心者がよくつまずく事象とその対処法5 ...


ブログ 2021-02-18 18:46:00

  こんにちは!たけばです^^     最近はビデオ通話を利用した オンラインでの会議や打ち合わせ ...


ブログ 2022-01-23 19:03:00

    新年明けましておめでとうございます!   ひきちです   突然ではありますが、新 ...


ブログ 2022-01-24 09:16:00

あけましておめでとうございます! 年越しの瞬間はそわそわするものですが、 いざ2022年が始まるとあっという間に時間が経っていきますね。 ...


ブログ 2024-11-30 00:26:00

どうも皆さんこんにちは! 志水 勇輔(しみず ゆうすけ)です   先日、同僚の大窪氏とオシャレをして写真を撮りに行こうという ...