CSSをはじめたばかりの皆さん、プロパティ「display」は使いこなせていますか?
配置が思い通りにならない!そんな時…これを知らないとずっとハマってしまうかも!
※※※ お詫びと内容訂正 ※※※
動画内 7:20 の部分から、編集ミスにより一部の説明が抜けてしまっておりました。
本来の説明は下記の内容となります。混乱させてしまい大変失礼いたしました。
====================================
③「inline-block」で細かいデザイン調整が可能
先ほど挙げた「display: inline;」と「display: block;」の性質は、細かいデザイン調整がしたい時に融通がきかず不便です。それを解消してくれるのが「display: inline-block;」なので、これを設定するとかなり扱いやすくなります。
配置の動き方は「display: inline;」と同様、横に並んでいって、幅いっぱいになった後は行を折り返していきます。
文字と同じような扱いができるので、例えば文字を真ん中寄せにしたい時に使う「text-align: center」というプロパティ指定が親要素にされていれば、要素は真ん中寄せの配置になります。
====================================
<目次>
・オープニング 0:00
・今回の概要 0:32
・プロパティ「display」とは 0:48
・設定できる値の種類 1:16
・インライン要素とブロック要素 1:31
・「inline」について 3:14
・「block」について 4:04
・「inline」と「block」の違い 4:43
・「inline-block」とは何なのか? 4:58
・「inline」は不自由が多い 5:20
・「block」にできないこと 5:48
・「block」にできないことの例 5:59
・「inline-block」にできること 7:20
・「inline」「block」「inline-block」の使い分け 7:41
・プロパティ「display」の初期設定値についてのまとめ 9:35
・今回のまとめ 10:27
↓『CSSをはじめてみよう』前編はこちら↓
https://youtu.be/iIDpkhgU3gM
↓『CSSをはじめてみよう』後編はこちら↓
https://youtu.be/mFGmdHgT7DQ
--- Webの神様 ---
未経験、初心者のみなさんのHTMLの学習を応援していくチャンネルです!
【タグ】
#Webデザイン #コーディング #CSS
【SNS】
--- Twitter ---
https://twitter.com/webgodweb
--- Facebook ---
https://www.facebook.com/webgodweb/
【運営会社】
株式会社カラフルクローバー
https://www.colorful-clover.co.jp/
★★★「Webの神様」メンタープランのご案内★★★
ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です!
【お知らせ動画】
「Webの神様」があなたのメンターになります
https://youtu.be/pJfpEVjAdqkプレビュー
【プランの詳細・お申し込み(MENTA)】
https://menta.work/plan/5148
未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます!
是非ともご検討いただければ幸いです。
★★★★★★★★★★★★★★★★★★★★★★★