サイドバー作ってみた
おはこんばんにちはバターと申します。
ブログを始めようと思ったのですが、第一弾のネタが分からなかったので、
まちもの非公式サイトで管理者ブログとしてうｐした内容を少し詳しくやっていきます。
このサイトを見ている人で 「まちもの非公式サイト」 を見たことないって人はいないと思いますが、
一応僕が初めて作って公開したサイトなのでぜひ見てください。まちもが喜びます。
ブログを始めようと思ったのですが、第一弾のネタが分からなかったので、
まちもの非公式サイトで管理者ブログとしてうｐした内容を少し詳しくやっていきます。
このサイトを見ている人で 「まちもの非公式サイト」 を見たことないって人はいないと思いますが、
一応僕が初めて作って公開したサイトなのでぜひ見てください。まちもが喜びます。
サイドバーとは
まずは、サイドバーとはなんぞや？って人の為に、
サイドバーとは何者なのかを説明していきます。
簡単に言うと、ブログページなどで、横についてるものです。
見てもらった方が早いですね。これです。
これは、まちもの以下略の管理者ブログ第一弾の画像です。
この右側にある、色の変わっている部分がサイドバーです。 今回はこれを作っていきます。
サイドバーとは何者なのかを説明していきます。
簡単に言うと、ブログページなどで、横についてるものです。
見てもらった方が早いですね。これです。
これは、まちもの以下略の管理者ブログ第一弾の画像です。この右側にある、色の変わっている部分がサイドバーです。 今回はこれを作っていきます。
サイドバーのレシピ
文章で説明してもようわからないと思うので、まずは実際のコードを見てみましょう。
See the Pen Untitled by バター (@nyuuseihin) on CodePen.
はい。使いまわしです。リサイクルです。
そんなことは置いといて、今回注目してほしいのはCSSの方です。
次に、/*メイン*/の方を見てみましょう。
まず、メインコンテンツの横幅をwidthで指定してます。要らない気もしますが...
heightで縦と書いていますが、高さの間違いです。
次に、min-heightで高さの最小値。つまり必ずこれ以上高くなるようにしてます。
min-widthも同じで、横幅の最小値を定めています。
では、次にサイドバーのCSSを見ていきましょう。
そんなことは置いといて、今回注目してほしいのはCSSの方です。
CSSを書いてみよう
まずはこれです。で横並びに指定しています。article {display:flex;}
次に、/*メイン*/の方を見てみましょう。
.content {
width:250px; /*メインコンテンツの横幅*/
height:300px; /*縦*/
min-height: 100vh; /*縦の最小値*/
min-width: 70vh; /*横幅の最小値*/
}
まぁ横のコメントに書いてある通りです。まず、メインコンテンツの横幅をwidthで指定してます。要らない気もしますが...
heightで縦と書いていますが、高さの間違いです。
次に、min-heightで高さの最小値。つまり必ずこれ以上高くなるようにしてます。
min-widthも同じで、横幅の最小値を定めています。
では、次にサイドバーのCSSを見ていきましょう。
.side {
background-color: rgb(167, 167, 167); /*サイドの色*/
width:100px; /*横幅*/
height:300px; /*高さ*/
text-align:center; /*テキスト位置*/
margin-left:10px;/*サイドバーとメインコンテンツの間に隙間 をあけた*/
position: sticky;
min-height: 100vh; /*高さの最小値*/
min-width: 20em; /*横幅の最小値*/
max-width: 20em; /*横幅の最大値*/
}
説明するのって結構難しいんですね（笑）一番上はサイドバーの色を定めています。
次の二段は先ほどと同じです。
次にtext-align: center;でテキストの位置を中央揃えにしてます。
leftやrightにすることで左揃えや右揃えにすることもできます。
margin-left: 10px;でサイドバーの左側。つまりメインコンテンツとの隙間を10pxあけました。
次の2行も先ほどと同じですね。
今までmin,min,min...ときてようやくmaxです。ここでは最大値を定めています。
次は、htmlを書いていきます。
htmlを書いてみよう
See the Pen Untitled by バター (@nyuuseihin) on CodePen.
これは先ほどと同じものです。今度は、htmlの部分のコードを表示させてください。
まず、全てを
そしたら、次はメインコンテンツの方を先に書いていきます。
そしたら、メインコンテンツをdivで囲んで、それにclass="content"を付けてください。
あとは自由に書いてください。
メインコンテンツをかいたら次はサイドバーを書いていきます。
まず、メインコンテンツの＜/div＞の下にまたdivを作ってください。
そしたら、それにclass="side"を付けてください。
あとは、サイドバーの内容をかけば完成です。
お疲れ様でした。
最後に
本日はバターのホームページを閲覧頂きありがとうございます。もし、この記事が少しでもあなたのコーディング生活の役に立てれば幸いです。
もしよろしければ、ほかの記事も見ていってください。