marginとpaddingについて解説したけど、それよりも先にdisplay:blockをやるべきだったかなと少し後悔もしました。それぐらい重要なのでしっかり覚えましょう!今回は、CSS初心者入門とは書いてあるのだけど少しHTMLタグの内容も入るよ!初期の何記事かは、CSSの基礎を簡単に説明した後にブロックレベル要素の解説に入ります。CSSの復習CSSとは?CSSの基本構造HTMLファイルにCSSファイルを読み込ませる方法ブロックレベル要素(display:block)とは?ブロックレベル要素は親要素の幅が継承されるブロックレベル要素同士は縦に配置されるインライン要素との違いブロックレベル要素には幅・高さ・余白が指定できる。以下の記事でCSSについて詳しく説明しているので今回は触りを書きます。blog.mimipen.netCSSとは?ホームページの見た目を指定するために使用します。CSSは、HTMLと組み合わせて使われます。CSSの基本構造h1タグにCSSを使って見た目を指定した場合。32px;}セレクタ:どこのデザインを変更するか(※h1タグ)プロパティ:どの要素に変更を加えるか(※font-size=文字の大きさ)値:どのように変えるか(※32pxという大きさに変える)HTMLファイルにCSSファイルを読み込ませる方法HTMLファイルのhead内に以下を記述します。href="[CSSファイル場所]">CSSについて、もっと詳しく知りたい人は以下の記事を参考にしてください。blog.mimipen.netブロックレベル要素(display:block)とは?HTML5からブロックレベル要素とインライン要素という呼び方は廃止されました。inlineの要素をインライン要素として紹介します。HTMLタグのほとんどはブロックレベル要素、インライン要素の2つの種類で分けられます。ブロックレベル要素の特徴を簡単にあげると以下の特徴があります。親要素の大きさが継承され、1つのブロックとして認識されるブロックレベル要素同士は縦に配置される幅や高さが指定できる余白(margin・padding)が指定できる言葉で説明してもわかりにくいかと思いますので、以下で図を使って解説していきます。ブロックレベル要素は親要素の幅が継承されるこの図のソースコードが以下になります。800px;}ここでいう親要素とはdivタグを指します。pタグにはcssを指定してませんが、pタグは親要素の幅800pxを継承し、pタグの大きさは800pxとなります。この特徴を覚えておけば無駄なコードが削減できそうですね!ブロックレベル要素同士は縦に配置されるこの図のソースコードが以下になります。[html]<p>ブロックレベル要素</p><p>ブロックレベル要素</p>ブロックレベル要素のpタグを2つ書きました。ブロックレベル要素同士は並ぶと縦に配置されます。以下でインライン要素との違いを解説しています。インライン要素との違いこの図のソースコードが以下になります。[html]<span>インライン要素</span><span>インライン要素</span>インライン要素のspanタグを2つ書きました。ブロックレベル要素とは違いインライン要素同士は並ぶと横に配置されます。ブロックレベル要素は縦に並び、インライン要素は横に並ぶと覚えましょう。これは、ブロックレベル要素とインライン要素の一番わかりやすい特徴の違いと言えます。ブロックレベル要素には幅・高さ・余白が指定できる。ブロックレベル要素は自由に幅や高さを変えることができ、paddingやmarginも指定できます。インライン要素の違いも説明したいところですが少々厄介なので次回のインライン要素の説明で詳しく解説したいと思います。使用頻度が高いブロックレベル要素のタグを以下にまとめました。ついてインライン要素に高さを持たせたい、幅を指定したい。インライン要素をブロックレベル要素に変えたいと思った時に以下のプロパティと値を覚えておくと便利です。block;}spanタグは代表的なインライン要素のタグです。block;をCSSファイルで指定します。block;の記述はCSSでよく使う記述なので覚えておきましょう!また、displayというプロパティは、1記事じゃ書ききれないので、今後も覚えるべきところから少しずつ解説して行きます。まとめ前半にブロックレベル要素のHTMLタグの種類とブロックレベル要素の特徴4つ紹介しました。復習になりますが以下が4つの特徴です。ついて紹介させていただきました。次回はインライン要素とdisplay:inline-blockについて解説します。ブロックレベル要素とインライン要素は対極のものとして記事に取り上げられることが多いので、2つの記事をしっかり覚えて行きましょう。Tumblr関連記事2019-12-05コーディング練習(3)特殊文字を使いメニュー表を実装しよう!こんにちは、かなきち(@kanakichi0801)です。こんにちは、かずん(@kazoonLab)です。かなきちスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。