CSSで棒線｜をつくる方法
こんばんはinoonです🐕🌙
前回のブログにて初めてのwebサイトの制作過程をお話しました↓
今回はそのWebサイトの中の棒線｜をつくった方法を紹介します！
ページ構成
まず、このサイトはTop→Concept→Product→Topics→Storeという構成になっています。なので、Conceptの上にはTopがあるんですね。
この棒はTopページの後ろに作っています。
CSSと解説
#top::after{
content: "";
display: block;
width: 1px;
height: 180px;
background: #000;
position:absolute;
left: 50%;
margin-left:-500px;
bottom:-40px;
}①::afterは#Topのうしろに挿入するよーという意味(::beforeなら前に挿入)
②contentは文字や画像を挿入できますが、ここではなにも挿入したくしたくないので、""の中にはなにも入れません。
③display:block;でブロック要素を追加できます。
HTMLにはインライン要素とブロック要素に分けることができます。
ブロック要素:高さや幅、マージンなどの指定ができる（<p><div><h1>など)
インライン要素:↑の指定ができない( <span><a><::before><::after>など)
ブロック要素、インライン要素について詳しく知りたい方はこちら↓
::afterはインライン要素ですが幅や高さなどを指定して棒をつくりたいので、display:block;でブロック要素にしてあげます！
④widthとheightでそれぞれ幅と高さの指定をしてあげます。
⑤backgroundで棒のカラーを指定します
黒にしたいので#000;
ちなみに#000;と#000000;は同じ意味
⑥position:absoluteで絶対配置にする
position:absoluteは起点からどれくらい離れているかでレイアウトを決めることができるので、レイアウトの幅を広げられます。
デフォルトの起点はページ全体のいっっっちばん左上です。(headerの左上)
でも私は起点をTopページにしたいので
#Topにrelativeをかけてあげます。
#top{
position:relative;
}⑦left:50%で真ん中に配置
left:50%は半分(50%の割合)なので真ん中ということですね！
⑧margin-left:-500pxで左に500px移動させる
中央に見えない1000px幅のボックスがあるとして、そのボックスの一番左に配置させたいのですが、
⑦でまず真ん中に配置してあげる→⑧でそこから500px左に移動させるという構成です。
⑨bottom:-40px;で下に移動
きてほしい位置より少し高いなと思ったので移動させました。
まだマージンボトムを使っていないのでマージンボトムでもおっけーです！！
そして、位置指定するときはabsoluteを使っていないとできません…!
⑥position:absoluteで使っているので位置指定できました！
と、まだまだ勉強中で完全に理解できていませんが、CSSがんばって理解していこうと思います。
なにか間違っているよ〜とかあればコメントください！
それでは〜👋