Posted by | 堀 裕成 Yusei Hori |
こんにちは、ほーりーです。
ありがたいことに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 Yusei Hori
鳥栖テクニカルディレクター/カメラマン/WEBコーダー/ナレーター 堀 裕成
|
ブログ 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 ...