【備忘録】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-12-23 12:00:00
今年2024年の振り返り。 2024年を漢字一文字で表すなら ありきたり ...
ブログ 2024-11-30 22:24:00
皆さん、お久しぶりです。手嶋です。 今回はAE練習編です。 曲のイメージに合わせた映像を作るにはアイデアの数があればあるほど良いので、 ...
ブログ 2023-06-15 21:51:00
みなさんこんにちは！ 皆さんは普段どんな音楽聴いていらっしゃいますか？ もともと音楽は大好きなのでいろん ...
ブログ 2020-05-14 10:03:00
おはようございます！ 最近風鈴を買ったのですが、 あまりにも音が綺麗なので ペットのように可愛がっております、 ひなのです。 &n ...
ブログ 2024-12-31 23:30:00
こんにちは、瀬元です！ とうとう2024年も最後の日になりました。 今年は個人的には充実した1年でした！ ライブは3公演(堂村璃羽,A ...
ブログ 2021-12-24 00:00:00
こんにちは！ 深田雄太です！ 人を撮影するときに大切なのは？ と質問を受けたので何が大事かな？と考えてみました。 ...
ブログ 2021-02-27 11:16:00
こんにちは！セキです！ みなさん突然ですが 2021年の流行カラーをご存じですか？ 私は存じ上げておりませんでした ...
ブログ 2021-07-31 23:32:00
- アーティストPV - 沢山趣向を凝らし、編集作業を経て完成したPVを何万人のファンに見て頂くこと、 そして音源販売へとつなげるに当た ...
ブログ 2024-10-30 23:03:00
お久しぶりです！手嶋です！ 今回は、10/9~10/10に1泊2日で東京研修に行ったお話をしたいと思います！ 1年前、ピ ...
ブログ 2021-01-24 19:06:00
こんばんは！平野です＾＾ 最近はずっと写真撮影のコツについて書いて来ましたが 今日はひとやすみして 「 THE FIRST TAKE ...