【備忘録】displayプロパティについて【HTML】
| Posted by |  |
こんにちは、ほーりーです。
ありがたいことにHP制作のご相談を受け、
コーダーとしてPCに張り付く生活をさせていただくことも多くなりました。
まだまだ駆け出し、勉強中の僕(生涯勉強ですが...)
初歩的なことから固めていく必要があるな、、、と基礎の大切さを感じます。
とうことで今回は僕自身の備忘録的な感じで
HTMLにおけるdisplayプロパティについてまとめてみようと思います！
情報が古かったらごめんなさい、考え方は合っているかと。
今回まとめるdisplayプロパティは
block要素,inline要素です。
ブロック要素はp,div,h1~h6タグなどの初期値で、
行全体で1単位にまとまっており、縦に並びます。
なので下記のようにソースを書くと...
横1列を1単位として
ブロックレベル要素は
縦に並びます。
⬆︎上記のようになりました！
またタグに指定をすることで
幅・高さを変更することが可能です!
また、要素をセンタリングするときによく使用するtext-align,vertical-alignは
ブロック要素では効果がありません。
センタリングしたいときは
margin:0 auto;などを使用します
インライン要素はspan、a、imgタグなどの初期値で、
主にブロック要素の中で使われます。
またインライン要素は縦並びにならず横並びになるので
spanタグを使うと 1列で複数の色を 指定できたりしますw
インライン要素は横のpadding,margin調整は可能ですが
縦の調整はできません。厳密には縦のpaddingはできるんですが
こんな感じで
ちょっと変な感じになります。
インライン要素の中央揃えは、親要素へのtext-align(縦揃えはvertical-align)で可能です。
なので画像(imgタグ)を中央に揃えたいときは下記で行けます。
ざっくりこんな感じでのまとめでした。
実際に使わないとわからないものがいっぱいなのでとにかく作って覚えています。
inline-blockやflexなどもっといっぱいあるのですがまた別の機会に。
それではー
|
|
Posted by
|
が書いたその他記事
シャッタースピードを変えて思い通りの写真を撮ろう
AIに全任せしてみた【プロンプトエンジニアリング】
【SAMUNE】サムネイルデザイン悩んだらココ
Black Friday!!何にでも手を出してしまいそう、、
サビ前のブレイクってかっこいいですよね
【PHOTOHITO】作例を見て腕を磨こう
オールドレンズの世界
東京ドームの最新技術で野球観戦が捗る...
「作り手視点」が当たり前の現在
音楽花火っておもしろい！【ふくつ花火アートイリュージョン】
【ふくつ花火アートイリュージョン】チケット販売スタートしております！
まだ間に合う桜撮影！
「固定概念の打破」が面白いものを生む
甲子園、何で撮る？スポーツ撮影に適したカメラの選び方を紹介！
【今年の1文字】ぶれない人になります。
iPadを甘く見ていた…【お年玉で買いたいガジェット】
ぜひ体験してほしいイヤホン「Beats Flex」【お年玉で買いたいガジェット】
M1チップがDTMに適応してきている！！
【怪物PC】新型MacBook Pro発表【M1チップ大幅進化】
CSSでアニメーションを作ってみよう！
iPhoneカメラの魅力に迫る！
【WEBデザイン】ホームページでまちおこし！！
【アーティストPV】撮影の裏側から学べること【カメラマンの日常】
【東京オリンピックの開会式で話題！】ピクトグラムとは？
紛失防止の強い味方！Appleの新製品「AirTag」をレビュー
大人気ジンバル「Weebill S」を使ってみた
USB3.0が認識しないときのウソみたいな対処法
ビール × AR !?
その購入、ちょっと待った！【新型iPad】
暗所撮影の強い味方!!
Beatbox界に新たな風が吹いている
お祝いありがとうございました！
【新生活】最適なMacbookの選び方！【用途別】
かごしま夜桜情報
「ニンテンドーSwitch」のロゴに隠された秘密
難しいけど楽しいLog撮影之世界
新商品情報！【建設現場LEDディスプレイ】
新たな働き方になるか？ワーケーションについて
Logic Pro Xでナレーションを入れよう
『HTML超入門』Progateで気軽にレッスン
ホームページのアクセス数を増やす方法とは？
「Webマーケティング」USPとは？ part2
最近ハマり出した夜景撮影【長時間露光】
「Webマーケティング」USPとは？
こんなアイディアがあったのか！【webページ制作】
【本当にスマホ？】Xperia PRO登場！
『HTML入門に』ドットインストール
コミュニケーションで商品価値が変わる
【HP製作者・ブロガー必見】画像を軽くする方法【圧縮編】
【HP製作者・ブロガー必見】画像を軽くする方法【縮小編】
マーケティングに最適！「LEDビジョンサイネージ」
【備忘録】displayプロパティについて【HTML】
万人がYouTubeを観る時代
新商品発売！【アルコールディスペンサー】
Amazon Prime会員のススメ<Kindle読み放題編>
クリエイターがYouTube Premiumに登録してみた結果・・・
動画マーケティングに最適なインフォグラフィックス動画のご紹介
「標準レンズ」ってなにが基準？
おうち時間を充実させるアイテムをご紹介！
GH4で写真撮影
カメラのサブスク！？〜多様化するサブスクの世界〜
音楽素材サイト【Soundstripe】使ってみた！
超便利拡張機能！【Image Downloader】
アイデアがここに詰まっている！【Pinterest】
今使っているマウスについて
振袖を撮りに行ってきました！
鹿児島チームちょこっと撮影会
ショートカットで快適なMacライフ！
コロナ禍におけるアカペラ界の変化
CD漁り~2020年12月編~
ブラックフライデーに心そそられる~映像クリエイターの日常?~
クリエイターは新たな刺激を求めている
かごんまチーム写真パシャパシャドライブ
アカペラの楽しさを伝えたい~映像クリエイターのおうち時間~
動画マーケティングの魅力
第1回かごしまクリエイターナレーション選手権
コロナ自粛中だけど歌いたい
テクニカルディレクターの今
Logic Pro Xで曲を作ってみよう！~ピアノロールでオリジナリティをだそう編~
AirPods Proを導入した話
ホームシアターでおうち時間を充実させたい！
Logic Pro Xで曲を作ってみよう！~スタジオドラマーがあなたのおうちに!?編~
密かな楽しみ...
Logic Pro Xで曲を作ってみよう！~ビヨンと伸ばして作曲編~
Logic Pro Xで曲を作ってみよう！
絶品かごんま黒豚を食べに
年末の大掃除 ~鹿児島編~
ブログ 2024-03-28 20:55:00
みなさんこんにちは 今回は私がいっちばん大好きな魅力溢れるチャペルを紹介します 私はブライダル学校を卒業 ...
ブログ 2022-02-14 10:42:00
「ガールズクラッシュ」って 聞いたことありますか？ 今若者の間でバズっているものなんですが ...
ブログ 2025-06-27 19:35:00
「AIってすごそうだけど、どう使えばいいの？」そんなふうに思っている方にこそ知ってほしい、 実用的で身近な ...
ブログ 2020-03-23 19:43:00
motiongraphicsなどの動画制作において 必要不可欠のアプリ ”aftereffects”の プラグ ...
ブログ 2025-04-13 15:12:00
こんにちは、瀬元です！ PEACSMINDに入社して3年が経ちました！ 自分たちの入社式からもう3年と思うと早すぎて.. ...
ブログ 2024-11-30 21:17:00
皆さんこんばんは。 今回は私のお気に入りの一冊をご紹介します！ 漫画大好きな私は、活字を読むことが苦手で ...
ブログ 2020-05-29 00:12:00
こんにちは Apple製品大好きほーりーです。 &n ...
ブログ 2022-12-19 10:16:00
こんにちは、瀬元です！ 全試合面白かったW杯が終わってしまいましたね〜 ほとんどの試合をTVで観ましたが 決勝戦はやっぱり1番興奮する ...
ブログ 2024-11-28 20:49:00
こんにちは！ 最近は書きたいことが本当に多かったので、、、 2025年に ...
ブログ 2021-12-29 20:12:00
会社の研修で「チームラボ福岡」に行ってきました！ いくつかチームラボの作品に触 ...