Posted by | ![]() |
こんにちは、ほーりーです。
ありがたいことにHP制作のご相談を受け、
コーダーとしてPCに張り付く生活をさせていただくことも多くなりました。
まだまだ駆け出し、勉強中の僕(生涯勉強ですが...)
初歩的なことから固めていく必要があるな、、、と基礎の大切さを感じます。
とうことで今回は僕自身の備忘録的な感じで
HTMLにおけるdisplayプロパティについてまとめてみようと思います!
情報が古かったらごめんなさい、考え方は合っているかと。
今回まとめるdisplayプロパティは
block要素,inline要素です。
ブロック要素はp,div,h1~h6タグなどの初期値で、
行全体で1単位にまとまっており、縦に並びます。
なので下記のようにソースを書くと...
ブロックレベル要素は
縦に並びます。
⬆︎上記のようになりました!
またタグに指定をすることで
また、要素をセンタリングするときによく使用するtext-align,vertical-alignは
ブロック要素では効果がありません。
センタリングしたいときは
インライン要素はspan、a、imgタグなどの初期値で、
主にブロック要素の中で使われます。
またインライン要素は縦並びにならず横並びになるので
spanタグを使うと 1列で複数の色を 指定できたりしますw
インライン要素は横のpadding,margin調整は可能ですが
縦の調整はできません。厳密には縦のpaddingはできるんですが
こんな感じで
ちょっと変な感じになります。
インライン要素の中央揃えは、親要素へのtext-align(縦揃えはvertical-align)で可能です。
なので画像(imgタグ)を中央に揃えたいときは下記で行けます。
ざっくりこんな感じでのまとめでした。
実際に使わないとわからないものがいっぱいなのでとにかく作って覚えています。
inline-blockやflexなどもっといっぱいあるのですがまた別の機会に。
それではー
![]() |
Posted by
|
ブログ 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
どうも皆さんこんにちは! 志水 勇輔(しみず ゆうすけ)です 先日、同僚の大窪氏とオシャレをして写真を撮りに行こうという ...