CSSのdisplayプロパティについて

ソースコード：

                
<div class="block">
    <p>この要素はブロック要素です。</p>
</div>
<div class="block">
    <p>ブロック要素はサイズを変更することも可能です。</p>
</div>
                
            

                
.block {
    display: block;
}
.block:nth-of-type(2) {
    height: 100px;
}
                
            

ソースコード：

                
<div class="inline">
    <p>この要素はインライン要素です。</p>
</div>
<div class="inline">
    <p>インライン要素はコンテンツの幅になります。</p>
</div>
                
            

                
.inline {
    display: inline;
}
                
            

ソースコード：

                
<div class="inline-block">
    <p>この要素はインラインブロック要素です。</p>
</div>
<div class="inline-block">
    <p>インラインブロック要素はサイズを変更することができます。</p>
</div>
                
            

                
.inline-block {
    display: inline-block;
    width: 40%;
}
                
            

ソースコード：

                
<div>
    <p>この要素の下にnoneプロパティを指定した要素があります。</p>
    <p>ブラウザの開発者モードで確認してみてください。</p>
</div>
<div class="none">
    <p>この要素はnoneプロパティを指定して非表示にしています。</p>
</div>
<div>
    <p>noneプロパティを指定するとレイアウトから削除されます。</p>
</div>
                
            

                
.none {
    display: none;
}
                
            

ソースコード：

                
<div class="flex_box">
    <div class="flex_item">flexは要素を横並びにできます。</div>
    <div class="flex_item">配置を柔軟に変更することができます。</div>
    <div class="flex_item">レスポンシブデザインにも便利です。</div>
</div>
<div class="flex_box">
    <div class="flex_item">flexは要素を縦並びにもできます。</div>
    <div class="flex_item">順番も簡単に変えられます。</div>
    <div class="flex_item"><code>flex-direction: column-reverse;</code>を指定するだけです。</div>
</div>
                
            

                
.flex_box {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex_box:nth-of-type(2) {
    flex-direction: column-reverse;
}
.flex_item {
    border: 1px solid #333;
    padding: 4px;
    margin: 4px;
}
                
            

ソースコード：

                
<div class="grid_container">
    <div class="grid_item">gridレイアウトは複雑なレイアウトを実装することができます。</div>
    <div class="grid_item">非常に柔車に且つ直感的に指定できます。</div>
    <div class="grid_item">現代のモダンなサイトで頻繁に使用されています。</div>
    <div class="grid_item">gridレイアウトを使えるようになるとおしゃれなサイトが作れるようになれます。</div>
    <div class="grid_item">最初は少し難しいと感じるかもしれませんが諦めずにに学習しましょう！</div>
</div>
                
            

                
.grid_container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
}
.grid_item {
    border: 1px solid #333;
    padding: 4px;
    margin: 4px;
}
.grid_item:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1 / 4;
}
.grid_item:nth-of-type(2) {
    grid-column: 2 / 4;
    grid-row: 1;
}
.grid_item:nth-of-type(3) {
    grid-column: 2;
    grid-row: 2
}
.grid_item:nth-of-type(4) {
    grid-column: 3;
    grid-row: 2;
}
.grid_item:nth-of-type(5) {
    grid-column: 2 / 4;
    grid-row: 3;
}