【超入門】CSSプロパティ「display」が使いこなせない方へ！10分攻略【HTML・CSS コーディング】

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をはじめてみよう』前編はこちら↓    • 【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（前編）【HTML・C...   ↓『CSSをはじめてみよう』後編はこちら↓    • 【超入門】初心者あるあるのつまづき回避！CSSをはじめてみよう（後編）【HTML・C...   -- Webの神様 -- 未経験、初心者のみなさんのHTMLの学習を応援していくチャンネルです！ 【タグ】 #Webデザイン #コーディング #CSS 【SNS】 -- Twitter --   / webgodweb   -- Facebook --   / webgodweb   【運営会社】 株式会社カラフルクローバー https://www.colorful-clover.co.jp/ ★★★「Webの神様」メンタープランのご案内★★★ ナビゲーターの「なつこ」が講師となって、皆さんのWebデザイン・プログラミング学習をサポートする「メンタープラン」を実施中です！ 【お知らせ動画】 「Webの神様」があなたのメンターになります    • 【お知らせ】「Webの神様」があなたのメンターになります【未経験・初心者大歓迎】  プレビュー 【プランの詳細・お申し込み（MENTA）】 https://menta.work/plan/5148 未経験から学習中の方、Web・IT業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます！ 是非ともご検討いただければ幸いです。 ★★★★★★★★★★★★★★★★★★★★★★★