MENU

Fun & Interesting

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

Webの神様 61,576 5 years ago
Video Not Working? Fix It Now

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業界に就職・転職活動中の方、フリーランス独立を目指して活動中の方など、必要として頂いている皆さんのお役に立てるように精一杯サポートさせて頂きます! 是非ともご検討いただければ幸いです。 ★★★★★★★★★★★★★★★★★★★★★★★

Comment