要素を横並びにするときに、今だとdisplay:flexが主流かなと思います。 でも、他にも要素を横並びにする方法はあって、その1つにinline-blockを使って横並びにする方法があります。 でも、inline-blockを使って横並びにすると1つぶつかる問題があって、それが高さがずれる問題です。 こちらみてみてください！ このように、高さがずれてしまうんですよね。 これの原因がinline-blockのvertical-alignの初期値がbase-lineだからです。 http://www.htmq.com/style/vertical-align.shtml なので、高さを調節するためには、vertical-align: top;を指定すると高さがそろってくれます。 See the Pen inline-block by TakahiroOkada (@okalog) on CodePen.
要素を横並びにするときに、今だとdisplay:flexが主流かなと思います。 でも、他にも要素を横並びにする方法はあって、その1つにinline-blockを使って横並びにする方法があります。
display:flex
inline-block
でも、inline-blockを使って横並びにすると1つぶつかる問題があって、それが高さがずれる問題です。 こちらみてみてください！
このように、高さがずれてしまうんですよね。 これの原因がinline-blockのvertical-alignの初期値がbase-lineだからです。
vertical-align
base-line
http://www.htmq.com/style/vertical-align.shtml
なので、高さを調節するためには、vertical-align: top;を指定すると高さがそろってくれます。
vertical-align: top;
See the Pen inline-block by TakahiroOkada (@okalog) on CodePen.
どうも7noteです。透過時に背景が見えてしまう対策方法 背景色が入っている箇所の上に画像のボタンを配置した時、ボタンがhoverで透過した際に背景色がうっすら見えてしまう対策方法について。 画像で作成したボタンの場合、2つの方法で対応することができます。 ※ボタンをCSSのみ（背景色）で作成した場合はこちら 通常時 ただ透明にしたら後ろが透ける 対策すると・・・ ①画像の背景に白を入れておく index.html <div class="box"> <div class="btn"><a href="#"><img src="sample.png" alt=""></a></div> </div> style.css .box { padding: 50px; /* 適当な余白を確保 */ background-size: auto auto; /* 分かりやすいよう赤のストライプを指定 */ background-color: rgba(255, 255, 255, 1); background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 1, 1, 1) 10px, rgba(255, 1, 1, 1) 20px ); } .btn { width: 150px; /* 横幅を適当なサイズに指定 */ margin: 10px; /* ボタン同士が見やすいよう適度な余白 */ background: #fff; /* 背景に白を挿入 */ } .btn a:hover { opacity: .8; /* 透過させる */ } 解説 透過させるのはaタグだけ透過させ、親要素のdivは背景色として白がはいっているのでその後ろのストライプは透けずに済むという方法です。 親子構造になって、子要素だけが透過しているのがポイント。 ただし、CSSで再現可能な形（四角や楕円系）でなければ白い枠がはみ出たり、透過を綺麗に防ぐことができないので万能というわけではありません。 ②背景画像に指定して、hover時だけ画像を変更する index.html <div class="box"> <div class="btn"><a href="#"></a></div> </div> style.css .box { padding: 50px; /* 適当な余白を確保 */ background: #f36 25%, /* 分かりやすいよう赤のストライプを指定 */ #fff 25%, #fff 50%, #f36 50%, #f36 75%, #fff 75%, #fff ); background-size: 40px 40px; /* 適度な大きさに指定 */ } .btn { width: 150px; /* 横幅を適当なサイズに指定 */ height: 50px; /* 縦幅を適当なサイズに指定 */ margin: 10px; /* ボタン同士が見やすいよう適度な余白 */ background: #fff; /* 背景に白を挿入 */ } .btn a { display: block; background-image: url("sample.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn a:hover { background-image: url("sample-hover.png"); } 解説 imgタグではなく、aタグの背景画像としてボタンを設置しておき、hover時に背景画像を変更する方法です。 2種類の画像を用意する必要がありますが、CSSでは再現が難しい形のボタンでもこの方法なら対応することができます。 ※imgタグでやる場合はjavascriptでの制御することができます。 まとめ ★や◆など変な形のボタンでなければ①の方法が修正などの手間が少なく済むのでオススメ。 少し変った形などにしなければいけない時は②の方法で画像を2種類用意しましょう！ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
背景色が入っている箇所の上に画像のボタンを配置した時、ボタンがhoverで透過した際に背景色がうっすら見えてしまう対策方法について。
画像で作成したボタンの場合、2つの方法で対応することができます。
※ボタンをCSSのみ（背景色）で作成した場合はこちら
通常時
ただ透明にしたら後ろが透ける
対策すると・・・
<div class="box"> <div class="btn"><a href="#"><img src="sample.png" alt=""></a></div> </div>
.box { padding: 50px; /* 適当な余白を確保 */ background-size: auto auto; /* 分かりやすいよう赤のストライプを指定 */ background-color: rgba(255, 255, 255, 1); background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 1, 1, 1) 10px, rgba(255, 1, 1, 1) 20px ); } .btn { width: 150px; /* 横幅を適当なサイズに指定 */ margin: 10px; /* ボタン同士が見やすいよう適度な余白 */ background: #fff; /* 背景に白を挿入 */ } .btn a:hover { opacity: .8; /* 透過させる */ }
透過させるのはaタグだけ透過させ、親要素のdivは背景色として白がはいっているのでその後ろのストライプは透けずに済むという方法です。 親子構造になって、子要素だけが透過しているのがポイント。
ただし、CSSで再現可能な形（四角や楕円系）でなければ白い枠がはみ出たり、透過を綺麗に防ぐことができないので万能というわけではありません。
<div class="box"> <div class="btn"><a href="#"></a></div> </div>
.box { padding: 50px; /* 適当な余白を確保 */ background: #f36 25%, /* 分かりやすいよう赤のストライプを指定 */ #fff 25%, #fff 50%, #f36 50%, #f36 75%, #fff 75%, #fff ); background-size: 40px 40px; /* 適度な大きさに指定 */ } .btn { width: 150px; /* 横幅を適当なサイズに指定 */ height: 50px; /* 縦幅を適当なサイズに指定 */ margin: 10px; /* ボタン同士が見やすいよう適度な余白 */ background: #fff; /* 背景に白を挿入 */ } .btn a { display: block; background-image: url("sample.png"); background-repeat: no-repeat; background-size: 100% auto; } .btn a:hover { background-image: url("sample-hover.png"); }
imgタグではなく、aタグの背景画像としてボタンを設置しておき、hover時に背景画像を変更する方法です。 2種類の画像を用意する必要がありますが、CSSでは再現が難しい形のボタンでもこの方法なら対応することができます。
※imgタグでやる場合はjavascriptでの制御することができます。
★や◆など変な形のボタンでなければ①の方法が修正などの手間が少なく済むのでオススメ。 少し変った形などにしなければいけない時は②の方法で画像を2種類用意しましょう！
~ Qiitaで毎日投稿中!! ~ 【初心者向け】HTML・CSSのちょいテク詰め合わせ
はじめに 「画像でゴミ分類！」アプリ作成日誌7日目の今日はサイドバーのスマホ対応ということでHTML,CSS,JavaScriptをガッツリ書いて、横から出てくるスライドメニューを実装していく回です。 ＜記事一覧＞ 「画像でゴミ分類！」アプリ作成日誌day1～データセットの作成～ 「画像でゴミ分類！」アプリ作成日誌day2～VGG16でFine-tuning～ 「画像でゴミ分類！」アプリ作成日誌day3～Djangoでwebアプリ化～ 「画像でゴミ分類！」アプリ作成日誌day4～Bootstrapでフロントエンドを整える～ 「画像でゴミ分類！」アプリ作成日誌day5～Bootstrapでフロントエンドを整える2～ 「画像でゴミ分類！」アプリ作成日誌day6～ディレクトリ構成の修正～ 前回までのあらすじ 前回までの記事では画像認識アプリを実装してDjangoに載せたうえで、Bootstrapを使ってフロントエンドを整えるところまでやりました。サイドバーに関してはスマホの際は非表示にするような設定にしていましたが、それでは味気ないのでボタンをタップしたら表示されるようにしたいと思います。 garbage/templates/garbage/base.html # トグル用のボタンの設置 <button class="toggler d-md-none display-toggler-inline" type="button" id="toggler" onclick="Sidebar()"> <i class="fas fa-bars fa-2x"></i> </button> Font Awesomeを利用してアイコンを設置していきます。d-md-noneというクラスを設定することで、画面が小さい時しか表示しないというのをBootstrapで制御しています。なお、Sidebar()は何もしない関数にしてあります。 次にボタンクリック時に表示されるサイドバーを作っていきます。 garbage/templates/garbage/base.html <body> <div id="side-bar" class="display-sidebar-none d-md-none"> <div type=button id="close-button" class="mr-1" onclick="Sidebar()"> × </div> <p role="button" class="mb-2 btn border-dark rounded-0 btn-secondary">外部リンク集</p> <a href="https://manage.delight-system.com/threeR/web/bunbetsu?menu=bunbetsu&jichitaiId=kashiwashi&areaId=22125&areaName=%2F&lang=ja&benriCateId=7&bunbetsuCateId=7&faqCateId=%2F&howToCateId=&search=%E3%83%9A%E3%83%83%E3%83%88%E3%83%9C%E3%83%88%E3%83%AB&dummy=" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">分別検索</a> <a href="https://manage.delight-system.com/threeR/web/benri?menu=benri&jichitaiId=kashiwashi&areaId=22125&benriCateId=7&bunbetsuCateId=7&faqCateId=%2f&lang=ja" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">ごみの分け方・出し方</a> </div> これは、ほかの要素にかぶせて使うので、body直下に置いています。3~5行目で閉じるボタンを文字で直接実装しています。それ以降は中身なので、PC版の記述をそのまま利用しています。 そして、CSSは以下のようにすると、ほかの要素の上にかぶせて表示することができます。 garbage/static/garbage/css/style.css #side-bar{ position: fixed; z-index: 1; height: 100vh; width: 250px; opacity: 0.9; background-color: white; } #close-button{ float: right; font-size: 400%; font-weight: bold; height: 90px; } positionで固定位置に表示できるようにし、height,widthで大きさを指定します。また、z-indexで前面に表示するようにしています。 閉じるボタンについてもいい感じになるようにしています。 JavaScriptの実装 ここまでで基本的な形はできたので、JSで動きを実装していきます。 まず、JavaScriptで追加・削除するためのクラスを書いていきます。 garbage/static/garbage/css/style.css .display-sidebar-none{ transition: all 0.5s; left: -250px; } .display-sidebar-inline{ transition: all 0.5s; left: 0; } .display-toggler-none{ transition: all 0.3s; opacity: 0; } .display-toggler-inline{ transition: all 1.5s; opacity: 1.0; } やっていることとしては、上二つでsidebarの位置を動かします。こうすることであたかも左から出てきたかのような効果を演出できます。 また、下二つでtoggleボタンの表示非表示を切り替えています。fadeのようなことをしたかったので、透明度を変化させます。 それぞれ、transitionを設定することで、クラスを付与した際に起こる変化をゆっくりにすることができ、視覚的になじみやすく表現することができます。 それではいよいよJavaScriptの実装です。 garbage/templates/garbage/base.html <script> function Sidebar(){ document.getElementById("side-bar").classList.toggle("display-sidebar-none"); document.getElementById("side-bar").classList.toggle("display-sidebar-inline"); document.getElementById("toggler").classList.toggle("display-toggler-none"); document.getElementById("toggler").classList.toggle("display-toggler-inline"); } </script> classList.toggleでクラスがあれば削除し、なければ追加ということを一括で処理しています。 実際に実装できたものは以下のような挙動になります。めっちゃちゃんと動いてる!!!
「画像でゴミ分類！」アプリ作成日誌7日目の今日はサイドバーのスマホ対応ということでHTML,CSS,JavaScriptをガッツリ書いて、横から出てくるスライドメニューを実装していく回です。
＜記事一覧＞
前回までの記事では画像認識アプリを実装してDjangoに載せたうえで、Bootstrapを使ってフロントエンドを整えるところまでやりました。サイドバーに関してはスマホの際は非表示にするような設定にしていましたが、それでは味気ないのでボタンをタップしたら表示されるようにしたいと思います。
# トグル用のボタンの設置 <button class="toggler d-md-none display-toggler-inline" type="button" id="toggler" onclick="Sidebar()"> <i class="fas fa-bars fa-2x"></i> </button>
Font Awesomeを利用してアイコンを設置していきます。d-md-noneというクラスを設定することで、画面が小さい時しか表示しないというのをBootstrapで制御しています。なお、Sidebar()は何もしない関数にしてあります。
d-md-none
次にボタンクリック時に表示されるサイドバーを作っていきます。
<body> <div id="side-bar" class="display-sidebar-none d-md-none"> <div type=button id="close-button" class="mr-1" onclick="Sidebar()"> × </div> <p role="button" class="mb-2 btn border-dark rounded-0 btn-secondary">外部リンク集</p> <a href="https://manage.delight-system.com/threeR/web/bunbetsu?menu=bunbetsu&jichitaiId=kashiwashi&areaId=22125&areaName=%2F&lang=ja&benriCateId=7&bunbetsuCateId=7&faqCateId=%2F&howToCateId=&search=%E3%83%9A%E3%83%83%E3%83%88%E3%83%9C%E3%83%88%E3%83%AB&dummy=" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">分別検索</a> <a href="https://manage.delight-system.com/threeR/web/benri?menu=benri&jichitaiId=kashiwashi&areaId=22125&benriCateId=7&bunbetsuCateId=7&faqCateId=%2f&lang=ja" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">ごみの分け方・出し方</a> </div>
これは、ほかの要素にかぶせて使うので、body直下に置いています。3~5行目で閉じるボタンを文字で直接実装しています。それ以降は中身なので、PC版の記述をそのまま利用しています。
そして、CSSは以下のようにすると、ほかの要素の上にかぶせて表示することができます。
#side-bar{ position: fixed; z-index: 1; height: 100vh; width: 250px; opacity: 0.9; background-color: white; } #close-button{ float: right; font-size: 400%; font-weight: bold; height: 90px; }
positionで固定位置に表示できるようにし、height,widthで大きさを指定します。また、z-indexで前面に表示するようにしています。 閉じるボタンについてもいい感じになるようにしています。
position
height,width
z-index
ここまでで基本的な形はできたので、JSで動きを実装していきます。 まず、JavaScriptで追加・削除するためのクラスを書いていきます。
.display-sidebar-none{ transition: all 0.5s; left: -250px; } .display-sidebar-inline{ transition: all 0.5s; left: 0; } .display-toggler-none{ transition: all 0.3s; opacity: 0; } .display-toggler-inline{ transition: all 1.5s; opacity: 1.0; }
やっていることとしては、上二つでsidebarの位置を動かします。こうすることであたかも左から出てきたかのような効果を演出できます。 また、下二つでtoggleボタンの表示非表示を切り替えています。fadeのようなことをしたかったので、透明度を変化させます。 それぞれ、transitionを設定することで、クラスを付与した際に起こる変化をゆっくりにすることができ、視覚的になじみやすく表現することができます。
それではいよいよJavaScriptの実装です。
<script> function Sidebar(){ document.getElementById("side-bar").classList.toggle("display-sidebar-none"); document.getElementById("side-bar").classList.toggle("display-sidebar-inline"); document.getElementById("toggler").classList.toggle("display-toggler-none"); document.getElementById("toggler").classList.toggle("display-toggler-inline"); } </script>
classList.toggleでクラスがあれば削除し、なければ追加ということを一括で処理しています。
実際に実装できたものは以下のような挙動になります。めっちゃちゃんと動いてる!!!
flex-growは兄弟要素の中で大きくなる割合を示している。 1 2 3 4 5 6 とあり、すべての数字にflex-growに１といれたら、合計６セクションになって大きくなっていく。 一方 3 にだけ、felx-grow:2といれたら、合計セクションは７になり、３だけほかの要素の2倍の大きさになる。 すべての要素にflex-grow 3 といれて、５にだけ、９といれたら、５だけほかの要素の3倍おおきくなっていく。 一方で、flex-shrinkは 1 2 3 4 5 6とあり、 すべての要素にflex-shrink 1と入力したら、親要素が小さくなったら、同じスピードで縮んでいく。 ３ だけflex-shrinkを３にしたら3倍の速さで親要素に合わして縮んでいく。 flex-basisは基本幅です。
flex-growは兄弟要素の中で大きくなる割合を示している。 1 2 3 4 5 6 とあり、すべての数字にflex-growに１といれたら、合計６セクションになって大きくなっていく。 一方 3 にだけ、felx-grow:2といれたら、合計セクションは７になり、３だけほかの要素の2倍の大きさになる。 すべての要素にflex-grow 3 といれて、５にだけ、９といれたら、５だけほかの要素の3倍おおきくなっていく。
一方で、flex-shrinkは 1 2 3 4 5 6とあり、 すべての要素にflex-shrink 1と入力したら、親要素が小さくなったら、同じスピードで縮んでいく。 ３ だけflex-shrinkを３にしたら3倍の速さで親要素に合わして縮んでいく。
flex-basisは基本幅です。
目的：rails6にてform_withでラジオボタンを実装、それに対してCSSで装飾を行います。 苦戦したこと：ヘルパーを使っていることにより、ラジオボタンの内部構造が見えなくなってしまった。 ①他のオプションと違いラジオボタンはclassをセレクタにしてもCSSを反映する事ができない。 ②label forが設定されていない事により、選択作業が反映できないバグが発生。 以下、内容を記載。 ①ラジオボタンはclassセレクタではCSSが反映されない。 HTML CSS .second{ font-size: 14px; font-weight: bold; display: block; /* ブロックレベル要素化する / float: left; / 要素の左寄せ・回り込を指定する */ . . } このような記述では全くCSSが反映されません。検証ツールで見てみると、 一見OKな気もします。ちなみに、検証ツールで見えるのはヘルパーの記述がHTMLに変換されたものなので、ツール上で修正を加えて正しく動作すればその修正したコードを丸々コピーしてHTML型に変えてしまうのも一つの手です（データの送信自体はHTML形式でも問題なし）。 結論を言ってしまうとラジオボタンにCSSを設定する場合はclassではなくlabel属性に記述をしなくてはいけません。その際、合わせてtype="radio"属性で設定されている標準のラジオボタンの表示を見えなくする必要もあります。 というわけで、 CSS .fields-label label{ font-size: 14px; font-weight: bold; display: block; /* ブロックレベル要素化する / float: left; / 要素の左寄せ・回り込を指定する */ . . } とし、 input[type=radio] { display: none; /* ラジオボタンを非表示にする */ } の記述を加えます。これで外見上は装飾されたラジオボタンのでき上がりです。 しかし、実際に入力作業をしてみると問題発生。 ボタンをクリックしたら変色する仕様を以下のように記述したはずが全く動作しません。 input[type="radio"]:checked + label{ background:blue;/* マウス選択時の背景色を指定する / color: #ffffff; / マウス選択時のフォント色を指定する */ } これはtype="radio"属性（labelの要素まで含めて）がクリックされたら指定の動きをする記述です。 再び検証ツールで確認。 一見問題が無いように見えます。ちゃんと選択肢事にid、valueも違う値が登録されています。 ②label for属性の指定がないことによるlabel要素の読み込みエラー この原因を特定するのにかなり苦労しましたが、ヘルパーを使わない場合のlabel設定の仕方を確認し、わかりました。 idに対して、label forが設定されていない事で、それぞれの選択肢がうまくVIEWに反映されていなかった。意味わかんないですね、とりあえずidとlabel forが一致して初めてラジオボタンのCSS設定が反映されるという事です。なので、label forにidと同じ値を設定します。 // これが完成形です。 label for="id" 選択肢 /label の書き方はこの指定となりますので、順番も変えました。 このように動作しました。ちなみに検証ツールで確認すると、 このようにlabel forが定義されており、idと紐づいている状態です。 ※ちなみに、別箇所でcollection_selectでラジオボタンを作っていた箇所は選択肢事の全てのlabel forが同じ値になっており、どれを選択しても最初の選択肢が選択されてしまうというエラーも発生。 railsのフォームヘルパーでラジオボタンを作成する場合はlabel forの設定が必須になると思われますので、注意が必要です。
目的：rails6にてform_withでラジオボタンを実装、それに対してCSSで装飾を行います。
苦戦したこと：ヘルパーを使っていることにより、ラジオボタンの内部構造が見えなくなってしまった。
①他のオプションと違いラジオボタンはclassをセレクタにしてもCSSを反映する事ができない。 ②label forが設定されていない事により、選択作業が反映できないバグが発生。
以下、内容を記載。
①ラジオボタンはclassセレクタではCSSが反映されない。
HTML
CSS .second{ font-size: 14px; font-weight: bold; display: block; /* ブロックレベル要素化する / float: left; / 要素の左寄せ・回り込を指定する */ . . }
このような記述では全くCSSが反映されません。検証ツールで見てみると、
一見OKな気もします。ちなみに、検証ツールで見えるのはヘルパーの記述がHTMLに変換されたものなので、ツール上で修正を加えて正しく動作すればその修正したコードを丸々コピーしてHTML型に変えてしまうのも一つの手です（データの送信自体はHTML形式でも問題なし）。
結論を言ってしまうとラジオボタンにCSSを設定する場合はclassではなくlabel属性に記述をしなくてはいけません。その際、合わせてtype="radio"属性で設定されている標準のラジオボタンの表示を見えなくする必要もあります。
というわけで、
CSS .fields-label label{ font-size: 14px; font-weight: bold; display: block; /* ブロックレベル要素化する / float: left; / 要素の左寄せ・回り込を指定する */ . . }
とし、
input[type=radio] { display: none; /* ラジオボタンを非表示にする */ }
の記述を加えます。これで外見上は装飾されたラジオボタンのでき上がりです。
しかし、実際に入力作業をしてみると問題発生。 ボタンをクリックしたら変色する仕様を以下のように記述したはずが全く動作しません。
input[type="radio"]:checked + label{ background:blue;/* マウス選択時の背景色を指定する / color: #ffffff; / マウス選択時のフォント色を指定する */ }
これはtype="radio"属性（labelの要素まで含めて）がクリックされたら指定の動きをする記述です。 再び検証ツールで確認。
一見問題が無いように見えます。ちゃんと選択肢事にid、valueも違う値が登録されています。
②label for属性の指定がないことによるlabel要素の読み込みエラー
この原因を特定するのにかなり苦労しましたが、ヘルパーを使わない場合のlabel設定の仕方を確認し、わかりました。
idに対して、label forが設定されていない事で、それぞれの選択肢がうまくVIEWに反映されていなかった。意味わかんないですね、とりあえずidとlabel forが一致して初めてラジオボタンのCSS設定が反映されるという事です。なので、label forにidと同じ値を設定します。 //
これが完成形です。 label for="id" 選択肢 /label の書き方はこの指定となりますので、順番も変えました。
このように動作しました。ちなみに検証ツールで確認すると、
このようにlabel forが定義されており、idと紐づいている状態です。
※ちなみに、別箇所でcollection_selectでラジオボタンを作っていた箇所は選択肢事の全てのlabel forが同じ値になっており、どれを選択しても最初の選択肢が選択されてしまうというエラーも発生。 railsのフォームヘルパーでラジオボタンを作成する場合はlabel forの設定が必須になると思われますので、注意が必要です。
条件式でexists?メソッドを使用し、指定したテーブル内のカラム名(item_id)と売れた商品(item.id)が一致したら商品にSoldOutの文字を出力するコードを書きました。 qiita.rb <% if Order.exists?(item_id: [item.id]) %> <div class='sold-out'> <span>Sold Out!!</span> </div> <% end %> 私のコードの書き方で当たり前なことかもしれませんが、こういう動作をさせたいといいう目的がある場合、今回の動作であれば売れた商品にSoldOutを表示させたいという目的がありました。 その目的に対して、exists?メソッドはいきなり見つけたわけではなく、まず商品を購入してitem_idを商品情報と一緒にorderテーブル保存しているのでitem_idがorderテーブルにあることに気が付きます。 商品のid、item_idを見境なしに判別してしまうのは違うので、orderテーブルにitem_idが存在した場合トップページに存在するitem_idとorderテーブルの中のitem_idを判別してくれればうまくいきそうだなと考え、トップページ商品id、item_idとorderテーブルのitem_idと見比べたいなと思いexists?メソッドにたどり着きました。 文章で書くときはなんとなく順番通り書きましたが、考えている時は初めにorderテーブルのitem_idと見比べるのではないかと思い付きまずさかのぼって考え、答えに至りました。 プログラミングで目的の動作を考える時は、抽象化された目的に対し細かくプロセスを考えることが大切だと分かりました。
条件式でexists?メソッドを使用し、指定したテーブル内のカラム名(item_id)と売れた商品(item.id)が一致したら商品にSoldOutの文字を出力するコードを書きました。
<% if Order.exists?(item_id: [item.id]) %> <div class='sold-out'> <span>Sold Out!!</span> </div> <% end %>
私のコードの書き方で当たり前なことかもしれませんが、こういう動作をさせたいといいう目的がある場合、今回の動作であれば売れた商品にSoldOutを表示させたいという目的がありました。
その目的に対して、exists?メソッドはいきなり見つけたわけではなく、まず商品を購入してitem_idを商品情報と一緒にorderテーブル保存しているのでitem_idがorderテーブルにあることに気が付きます。
商品のid、item_idを見境なしに判別してしまうのは違うので、orderテーブルにitem_idが存在した場合トップページに存在するitem_idとorderテーブルの中のitem_idを判別してくれればうまくいきそうだなと考え、トップページ商品id、item_idとorderテーブルのitem_idと見比べたいなと思いexists?メソッドにたどり着きました。
文章で書くときはなんとなく順番通り書きましたが、考えている時は初めにorderテーブルのitem_idと見比べるのではないかと思い付きまずさかのぼって考え、答えに至りました。
プログラミングで目的の動作を考える時は、抽象化された目的に対し細かくプロセスを考えることが大切だと分かりました。
どうも、三町哲平です！ 以前作成した【JavaScript】分からない部分まとめてみたら最強だった件 - Qiitaの記事は、現在(2020/11/14 時点)なんと25,000PVを超えました！ 本当に読んでくれた皆様には、感謝、感謝なのですが、実際私は、確かにJavaScriptの分からない部分はまとめたのですが、JavaScriptに関しては依然素人も素人... もう超ド素人な訳なんです。 そんな私のJavaScriptの謎の中にDOM操作というものがあります。 JavaScriptの特徴の一つにDOM操作がありますよ！なんて言われても超ド素人からすれば、そのDOMが分からんよ...てな話 では、そのDOMについてのお話。 まずは、ググってみる Google先生に頼ってみますか。 「ドム とは」 え〜っと... ドム (DOM) は、「ガンダムシリーズ」に登場する架空の兵器。有人操縦式の人型ロボット兵器「モビルスーツ」 (MS) の一種。初出は、1979年放送のテレビアニメ『機動戦士ガンダム』。 引用元:ドム - Wikipedia なるほど...DOMは、ガンダムに関係あるんですね...。 ドムとは、テレビアニメ『機動戦士ガンダム』に登場するモビルスーツである。 引用元:ドム (どむ)とは【ピクシブ百科事典】 ピクシブ百科事典に答えが載っていましたね。 DOM操作っていうのは、モビルスーツの操作の事だったんですね。 いや〜勉強になりましたね。 では、また！ ............ ...... ...て、おいおい おふざけは、ここまで 本題です。 ここで終わってたら、流石に怒られますからね...（汗） 「DOM とは」 求めていた記事が沢山出てきましたね。 DOMとは？ Document 文書、資料 Object 物体、対象 Model 模型、原型 Google 翻訳では、上記のような日本語訳になります。 文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。 引用元:DOMとは何か なるほど...分からん そんなあなたに↓ オブジェクトのような感じで、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりすることが出来る形のこと 引用元:JavaScriptでDOMを操作する方法【初心者向け】 | TechAcademyマガジン 初心者なりに噛み砕いてみた JavaScriptの特徴からDOM操作 ここでDOM操作を考えていく上で必要になるのが、JavaScriptって何ができるのかという事です。 JavaScriptと言えば、Node.jsによるバックエンド開発も有名ですが、やっぱりメインはフロントエンドに動きをつけてUI/UXの向上であり、 その時のJavaScriptを使って、HTML表示を変える処理こそが、DOM操作！ では、実践で確認していきましょう！ HTMLを書いてみる index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id="title">アムロ・レイ</h1> </body> </html> このHTMLのアムロ・レイ表示をJavaScriptを用いて変更してみましょう！ index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id="title">アムロ・レイ</h1> </body> <!-- 追加 --> <script> const h1 = document.getElementById("title"); console.log(h1); h1.textContent = "シャア・アズナブル"; </script> </html> h1は、アムロ・レイのままですが、JavaScriptの追加によりシャア・アズナブルになりました。 これが、DOM操作です。 何となくイメージは摑んでいただけましたでしょうか？ 参考記事:JavaScriptでDOMを操作する方法【初心者向け】 | TechAcademyマガジン さいごに この記事は、上記でも書いてある通りDOM操作の何となくのイメージしか掴めないと思います。 詳しい方からすると何でDOM操作を解説する記事なのにツリー構造の説明がないの？ノードのノの字もないぞ！などといった意見はあると思いますが、対象は、そこでは無いことをご了承下さい。 さらにDOMについて気になった方は、個々人で調べてみることをお勧めします。 例えばこの記事とか↓が分かりやすいかと JavaScript初心者でもすぐわかる！DOMとは何か？
どうも、三町哲平です！
以前作成した【JavaScript】分からない部分まとめてみたら最強だった件 - Qiitaの記事は、現在(2020/11/14 時点)なんと25,000PVを超えました！
本当に読んでくれた皆様には、感謝、感謝なのですが、実際私は、確かにJavaScriptの分からない部分はまとめたのですが、JavaScriptに関しては依然素人も素人...
もう超ド素人な訳なんです。
そんな私のJavaScriptの謎の中にDOM操作というものがあります。
JavaScriptの特徴の一つにDOM操作がありますよ！なんて言われても超ド素人からすれば、そのDOMが分からんよ...てな話
では、そのDOMについてのお話。
Google先生に頼ってみますか。
「ドム とは」
え〜っと...
ドム (DOM) は、「ガンダムシリーズ」に登場する架空の兵器。有人操縦式の人型ロボット兵器「モビルスーツ」 (MS) の一種。初出は、1979年放送のテレビアニメ『機動戦士ガンダム』。 引用元:ドム - Wikipedia
なるほど...DOMは、ガンダムに関係あるんですね...。
ドムとは、テレビアニメ『機動戦士ガンダム』に登場するモビルスーツである。 引用元:ドム (どむ)とは【ピクシブ百科事典】
ピクシブ百科事典に答えが載っていましたね。
DOM操作っていうのは、モビルスーツの操作の事だったんですね。
いや〜勉強になりましたね。
では、また！
............
......
...て、おいおい
本題です。
ここで終わってたら、流石に怒られますからね...（汗）
「DOM とは」
求めていた記事が沢山出てきましたね。
Google 翻訳では、上記のような日本語訳になります。
文書オブジェクトモデル(DOM)とは、HTML文書およびXML文書のためのアプリケーション=プログラミング=インターフェイス(API)である。これは、文書の論理的構造や、文書へのアクセスや操作の方法を定義するものである。 引用元:DOMとは何か
なるほど...分からん
そんなあなたに↓
オブジェクトのような感じで、HTMLのタグなどにアクセスして、CSSを追加したり、あるいはタグを追加したり・削除したりすることが出来る形のこと 引用元:JavaScriptでDOMを操作する方法【初心者向け】 | TechAcademyマガジン
ここでDOM操作を考えていく上で必要になるのが、JavaScriptって何ができるのかという事です。 JavaScriptと言えば、Node.jsによるバックエンド開発も有名ですが、やっぱりメインはフロントエンドに動きをつけてUI/UXの向上であり、 その時のJavaScriptを使って、HTML表示を変える処理こそが、DOM操作！
では、実践で確認していきましょう！
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id="title">アムロ・レイ</h1> </body> </html>
このHTMLのアムロ・レイ表示をJavaScriptを用いて変更してみましょう！
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1 id="title">アムロ・レイ</h1> </body> <!-- 追加 --> <script> const h1 = document.getElementById("title"); console.log(h1); h1.textContent = "シャア・アズナブル"; </script> </html>
h1は、アムロ・レイのままですが、JavaScriptの追加によりシャア・アズナブルになりました。 これが、DOM操作です。
何となくイメージは摑んでいただけましたでしょうか？
参考記事:JavaScriptでDOMを操作する方法【初心者向け】 | TechAcademyマガジン
この記事は、上記でも書いてある通りDOM操作の何となくのイメージしか掴めないと思います。 詳しい方からすると何でDOM操作を解説する記事なのにツリー構造の説明がないの？ノードのノの字もないぞ！などといった意見はあると思いますが、対象は、そこでは無いことをご了承下さい。
さらにDOMについて気になった方は、個々人で調べてみることをお勧めします。 例えばこの記事とか↓が分かりやすいかと JavaScript初心者でもすぐわかる！DOMとは何か？
flex:0(flex-grow) 0(flex-shrink) 320px(flex-basis=基本幅）; flex-growを１にすると余白を埋める flex-shrinkを0にすると幅が自動的に縮まらなくなる flex-basisで設定した幅は完全固定ではなくほかの指定との兼ね合いでコンテンツに自動的に収まるように自動調整される
HTML・CSSの役割 HTMLとはウェブページの見た目を作る言語で、CSSはその見た目を整える言語です。 つまり、HTMLはウェブページについての情報を記載する言語であり、CSSは記載した情報をユーザーにとって見やすいものにするための言語です。 それでは実際にどういう感じにプログラムを書くのか見てみましょう。 HTMLの実際のコード <h1>これは見出しです</h1> このような感じでHTMlのコードを書いていきます。 重要なのは要素をタグで囲うことです。 タグとは<>このカッコのことで、ここに囲まれている部分が要素です この例では「これは見出しです」が要素ということになります。 そして、この要素には様々な種類のものがあり、それぞれに役割があります。 例えば、このコードのh1要素は見出しを作る要素です。 h1要素の他にもh2~h6まであり、数が小さくなるほど見出しも小さくなります。 このようにHTMLではタグと要素の関係が基礎となってきます。 CSSの実際のコード h1 { color: red; } CSSのコードはこのように書きます。 これは先程のHTMLのh1要素の色を変えるよう指示したものです。 CSSではセレクタ・プロパティ・値の3つのものでプログラムを構成していきます。 それぞれ順に見ていきましょう。 セレクタ・プロパティ・値とは セレクタとは、CSSによる装飾をどの部分のHTMLに適用するかを選択するものです。 つまり、ここではh1要素に適用しています。 次にプロパティですが、これはセレクタで選択したHTMLの「何を変えるか」を選択するものです。 つまり、ここではh1要素の色を変えるという選択をしています。 この色を変えるプロパティをcolorプロパティといいます。 最後に値ですが、プロパティで何を変えるかを選択したら、どう変えるかといった値を決めないといけません。 ここでは、何：見出しの色 どう変えるか：赤色に変える ということになります。 このようにCSSでは、HTMLの「何をどう変えるか」を選択しており、これによってウェブページの装飾がなされていくのです。
HTMLとはウェブページの見た目を作る言語で、CSSはその見た目を整える言語です。 つまり、HTMLはウェブページについての情報を記載する言語であり、CSSは記載した情報をユーザーにとって見やすいものにするための言語です。
それでは実際にどういう感じにプログラムを書くのか見てみましょう。
<h1>これは見出しです</h1>
このような感じでHTMlのコードを書いていきます。 重要なのは要素をタグで囲うことです。
タグとは<>このカッコのことで、ここに囲まれている部分が要素です この例では「これは見出しです」が要素ということになります。 そして、この要素には様々な種類のものがあり、それぞれに役割があります。
例えば、このコードのh1要素は見出しを作る要素です。 h1要素の他にもh2~h6まであり、数が小さくなるほど見出しも小さくなります。 このようにHTMLではタグと要素の関係が基礎となってきます。
h1 { color: red; }
CSSのコードはこのように書きます。 これは先程のHTMLのh1要素の色を変えるよう指示したものです。
CSSではセレクタ・プロパティ・値の3つのものでプログラムを構成していきます。 それぞれ順に見ていきましょう。
セレクタとは、CSSによる装飾をどの部分のHTMLに適用するかを選択するものです。 つまり、ここではh1要素に適用しています。
次にプロパティですが、これはセレクタで選択したHTMLの「何を変えるか」を選択するものです。 つまり、ここではh1要素の色を変えるという選択をしています。 この色を変えるプロパティをcolorプロパティといいます。
最後に値ですが、プロパティで何を変えるかを選択したら、どう変えるかといった値を決めないといけません。 ここでは、何：見出しの色 どう変えるか：赤色に変える ということになります。
このようにCSSでは、HTMLの「何をどう変えるか」を選択しており、これによってウェブページの装飾がなされていくのです。
この記事は2020年11月14日にWCAN 2020 Frontend Specialというイベントで行うLTのスライドと原稿です。 投稿時点ではまだイベントは始まっていませんが、先んじて公開します。 以下が実際の内容です。 それでは「CSS in JSで変わること変わらないこと」と題して私のLTを始めます。 なお今回のスライドと台本は既にアップしてあります。今日は相当早口で進めてしまいますが、後でまた読んでいただけたら非常に嬉しいです。 みなさんこんにちは。エイチームグループのIncrements株式会社でデザイナーをしている綿貫佳祐と言います。 少しだけご紹介しますと、Incrementsではこれらのサービスを展開しています。 プログラミングに特化した情報共有コミュニティのQiita 社内向け情報共有のためのQiita Team エンジニアの採用を支援するQiita Jobs 私はデザイナーでありますが、これらのプロダクトのフロントエンドまで、ある程度担当しています。 個人開発でもCSS in JSを使用しており、普段から使用する中で見えてきたCSSとの変わること・変わらないことについてお話します。 まずは変わることです。色々ありますが、絞ってこの3つ。 スタイルの競合と命名規則 ロジックによるスタイル分岐のしやすさ ライブラリを理解する必要性 はじめのスタイルの競合については、CSS in JSが分かりやすく魅力的に映るポイントではないでしょうか？ 例はEmotionでのコードです。コンポーネントAとBでそれぞれsomeClassという命名でスタイルを指定しても、ハッシュがついたクラス名に変換されて競合しなくなります。 コンポーネントのコード量とかにもよりますが、クラス名をほとんど考えなくても良くなる場合も結構多いんですね。 今まで人間がBEMなどの規則を用いて解消していたクラス名の衝突は、最早意識しなくて良い存在へと変化します。 次にロジックによるスタイルの分岐ですが、CSSとJSが同じ世界にあることで格段にやりやすくなりました。 どういうことか？これまでのCSSだと「ほとんど一緒なんだけどわずかに違う」スタイルを実装する際はそのパターン数と同じだけクラスを作り、modifierとして定義する必要がありました。 この例でいうとerrorとかsuccessのmodifierを定義しています。 しかしCSS in JSの場合はpropsがあります。なんでもかんでも制限なく渡せてしまうのは良くないですが、上手に使うと非常に柔軟です。 自分のポートフォリオではFigmaの活動をGItHubの芝っぽく表示していますが、これは1つのコンポーネントにpropsを渡すだけで青色の濃淡の調整が出来ています。 事前に網羅的に宣言しないといけなかったのが、変化した内容を受けて対応出来るように変わっています。 そして変わることの最後。ライブラリを理解する必要性です。 色々ライブラリがある中で自分はEmotionが好きなのですが、このような書き方が出来ずハマったことがあります。 あるcss propを他のcss propの中でだけオーバーライドするのが出来ません。 ハックした書き方をすれば一応解消出来るのですが、とにかく生のCSSとは違いライブラリの機能に依存して書き方を考えないといけない場面も出てくる、というお話です。 次は変わらないこと。こちらも3つに絞りますと CSS設計の必要性 タイプセレクターの扱い マークアップとの関わり方 まずCSS設計の必要性です。ときどき「CSS in JSになればCSS設計は要らないよね？」と聞かれるんですが、私は必要だと思っています。 と言っても今までの設計内容と同じではありません。自分がよく考えるのは調整系のスタイルの扱い方についてです。 例えばFLOCSSでいうUtilityやITCSSでいうTrumpsのスタイル。どこかでまとめて宣言して各コンポーネントで呼ぶのはアリとするのか？ 「毎回同じ記述するのはダルい」と「ユーティリティーを用いたらせっかくコンポーネントに閉じ込めた意味がなくなる」はどちらの主張も分かるので、線引きは難しいです。 厳密な命名規則を考える……とかからは開放されますが、CSS設計という概念自体は変わらず必要だと思っています。 次にタイプセレクターの話。 画像は1番最初に例に出したものと同じです。クラス名にハッシュがついてユニークになったとは言え、結局はグローバルに宣言された存在でしかありません。 CSS in JSでもこのようにネストしてタイプセレクターを使えば、あるコンポーネントの内側にあるdiv要素は全部margin-topがついてしまい、p要素は赤くなってしまいます。このあとのスタイリングで不要な打ち消しを余儀なくされるでしょう。 Shadow DOMが良い感じに扱えるようになるとこれらも解消出来るはずなんですが……まだしばらくはタイプセレクターでスタイルを宣言するのはやめた方が良さそうです。 最後にマークアップとの関わり方。 これは一言で言えば「CSS in JSを導入したからってマークアップが適当で良くなることは無い」に集約されます。 spanを使えば良い場所を全部divで書いてdisplay: inline;を書くのは手間ですし、変な階層構造のマークアップをするとpositionとかz-indexで苦しめられがちです。 マークアップはマークアップでちゃんと書けた上で、CSS in JSはプラスアルファ便利になるツールでしかありません。 かなり詰め込んでしまいましたが、変わること変わらないことそれぞれ3つご紹介しました。 変わることは スタイルの競合と命名規則 ロジックによるスタイル分岐のしやすさ ライブラリを理解する必要性 変わらないことは CSS設計の必要性 タイプセレクターの扱い マークアップとの関わり方 自分のLTは以上です。ご清聴ありがとうございました。
この記事は2020年11月14日にWCAN 2020 Frontend Specialというイベントで行うLTのスライドと原稿です。
投稿時点ではまだイベントは始まっていませんが、先んじて公開します。 以下が実際の内容です。
それでは「CSS in JSで変わること変わらないこと」と題して私のLTを始めます。
なお今回のスライドと台本は既にアップしてあります。今日は相当早口で進めてしまいますが、後でまた読んでいただけたら非常に嬉しいです。
みなさんこんにちは。エイチームグループのIncrements株式会社でデザイナーをしている綿貫佳祐と言います。
少しだけご紹介しますと、Incrementsではこれらのサービスを展開しています。
私はデザイナーでありますが、これらのプロダクトのフロントエンドまで、ある程度担当しています。
個人開発でもCSS in JSを使用しており、普段から使用する中で見えてきたCSSとの変わること・変わらないことについてお話します。
まずは変わることです。色々ありますが、絞ってこの3つ。
はじめのスタイルの競合については、CSS in JSが分かりやすく魅力的に映るポイントではないでしょうか？
例はEmotionでのコードです。コンポーネントAとBでそれぞれsomeClassという命名でスタイルを指定しても、ハッシュがついたクラス名に変換されて競合しなくなります。
someClass
コンポーネントのコード量とかにもよりますが、クラス名をほとんど考えなくても良くなる場合も結構多いんですね。
今まで人間がBEMなどの規則を用いて解消していたクラス名の衝突は、最早意識しなくて良い存在へと変化します。
次にロジックによるスタイルの分岐ですが、CSSとJSが同じ世界にあることで格段にやりやすくなりました。
どういうことか？これまでのCSSだと「ほとんど一緒なんだけどわずかに違う」スタイルを実装する際はそのパターン数と同じだけクラスを作り、modifierとして定義する必要がありました。
この例でいうとerrorとかsuccessのmodifierを定義しています。
しかしCSS in JSの場合はpropsがあります。なんでもかんでも制限なく渡せてしまうのは良くないですが、上手に使うと非常に柔軟です。
自分のポートフォリオではFigmaの活動をGItHubの芝っぽく表示していますが、これは1つのコンポーネントにpropsを渡すだけで青色の濃淡の調整が出来ています。
事前に網羅的に宣言しないといけなかったのが、変化した内容を受けて対応出来るように変わっています。
そして変わることの最後。ライブラリを理解する必要性です。
色々ライブラリがある中で自分はEmotionが好きなのですが、このような書き方が出来ずハマったことがあります。
あるcss propを他のcss propの中でだけオーバーライドするのが出来ません。
ハックした書き方をすれば一応解消出来るのですが、とにかく生のCSSとは違いライブラリの機能に依存して書き方を考えないといけない場面も出てくる、というお話です。
次は変わらないこと。こちらも3つに絞りますと
まずCSS設計の必要性です。ときどき「CSS in JSになればCSS設計は要らないよね？」と聞かれるんですが、私は必要だと思っています。
と言っても今までの設計内容と同じではありません。自分がよく考えるのは調整系のスタイルの扱い方についてです。
例えばFLOCSSでいうUtilityやITCSSでいうTrumpsのスタイル。どこかでまとめて宣言して各コンポーネントで呼ぶのはアリとするのか？
Utility
Trumps
「毎回同じ記述するのはダルい」と「ユーティリティーを用いたらせっかくコンポーネントに閉じ込めた意味がなくなる」はどちらの主張も分かるので、線引きは難しいです。
厳密な命名規則を考える……とかからは開放されますが、CSS設計という概念自体は変わらず必要だと思っています。
次にタイプセレクターの話。
画像は1番最初に例に出したものと同じです。クラス名にハッシュがついてユニークになったとは言え、結局はグローバルに宣言された存在でしかありません。
CSS in JSでもこのようにネストしてタイプセレクターを使えば、あるコンポーネントの内側にあるdiv要素は全部margin-topがついてしまい、p要素は赤くなってしまいます。このあとのスタイリングで不要な打ち消しを余儀なくされるでしょう。
div
margin-top
p
Shadow DOMが良い感じに扱えるようになるとこれらも解消出来るはずなんですが……まだしばらくはタイプセレクターでスタイルを宣言するのはやめた方が良さそうです。
最後にマークアップとの関わり方。
これは一言で言えば「CSS in JSを導入したからってマークアップが適当で良くなることは無い」に集約されます。
spanを使えば良い場所を全部divで書いてdisplay: inline;を書くのは手間ですし、変な階層構造のマークアップをするとpositionとかz-indexで苦しめられがちです。
display: inline;
マークアップはマークアップでちゃんと書けた上で、CSS in JSはプラスアルファ便利になるツールでしかありません。
かなり詰め込んでしまいましたが、変わること変わらないことそれぞれ3つご紹介しました。
変わることは
変わらないことは
自分のLTは以上です。ご清聴ありがとうございました。
背景画像を少し暗くしたいときに今まではopacityを使っていたが、中にあるコンテンツまでも暗くなってしまう。背景画像がだけ暗くして、中にある要素はそのままにしたいときはどうするのか？ 背景画像のところにposition:relativeを設定して、その要素にbeforeを当ててposition:absolute;を指定、そこに top:0; left:0; bacgkround:自分が暗くしたい内容； に設定。 中にある、文字が書かれている要素にposition:relativeを使うことによって背景画像要素の内容が被らないようになる。 背景画像だけが暗くなり、中の要素は暗くならないようにできる。
CSSのpositionとは positionとは要素の位置を決めるためのプロパティです。 どんな使い方ができるのか 要素を指定したぶんだけ動かしたり、要素の上に別の要素を重ねてのせることができたり（画像の上に要素をのせるイメージ）、常に画面の同じ位置に要素を固定したりできます。 positionの書き方 positionプロパティはCSSで以下のように書きます。 セレクタ名 { position : 値 } 値には次の４つのどれかを指定します。 positionの値 static : 初期値。指定することはほとんどない relative : 現在の位置を基準に相対的な位置を決める absolute : 親要素を基準に絶対的な位置を決める fixed : 画面の決まった位置に固定する positionは基本的にtop、bottom、left、rightというプロパティとセットで使います。 位置を指定する流れ ①positionで基準を決める。 ②top bottom left rightで具体的な位置を数字で調整 staticとは？ 初期値 : CSSで何も指定していなければこれになっている 要素は通常の位置に : 上下左右に動かすことができない 要素の位置を調整できない : topやleftなどを指定しても効果がない z-indexを指定できない : 要素の重なり順を変えられない 基本的にstaticを指定することはない。 position: relative position: relativeは現在の表示位置から相対的に要素の位置を動かした糸気に使います。 position: relativeとしても、topやbottomを指定しなければstaticと同じ位置に表示されます。 そのため一見同じように感じられるが、①位置調整の可否や②z-index指定の可否という違いがあります。「z-indexやtopなどが指定できないときはrelativeにする！」とおぼえておくと良いでしょう。 position:absolute absoluteだと親要素を基準に、絶対的な位置を指定することになります。この「絶対的な位置」というのは、要素がどんな形であろうと、間に他の要素や余白が入っていようと、その位置に配置してくれるということ意味します。 親要素はrelativeにしておく absoluteを使って位置調整するときは、親要素にposition: relative（もしくはfixed）を指定しましょう。これを忘れると基準位置がずれて思ったように表示されません。absoluteを使うときは、親要素もセットで変えるようにしましょう。 position: fixed これは、画面の決まった位置に要素を固定させたい時に使う。スクロールしても位置が変わらないメニューバーなどを表示させたい時に使うと便利。 absoluteと指定方法がほとんど同じですが、位置の基準は親要素ではなく「ウィンドウ全体」です。そのため、要素の位置に関係なくtop: 0と指定したら画面の最上部に表示されます。
positionとは要素の位置を決めるためのプロパティです。
要素を指定したぶんだけ動かしたり、要素の上に別の要素を重ねてのせることができたり（画像の上に要素をのせるイメージ）、常に画面の同じ位置に要素を固定したりできます。
positionプロパティはCSSで以下のように書きます。
セレクタ名 { position : 値 }
値には次の４つのどれかを指定します。
positionの値 static : 初期値。指定することはほとんどない relative : 現在の位置を基準に相対的な位置を決める absolute : 親要素を基準に絶対的な位置を決める fixed : 画面の決まった位置に固定する
static
relative
現在の位置を基準
相対的
absolute
親要素を基準
絶対的
fixed
positionは基本的にtop、bottom、left、rightというプロパティとセットで使います。 位置を指定する流れ ①positionで基準を決める。 ②top bottom left rightで具体的な位置を数字で調整
top
bottom
left
right
初期値 : CSSで何も指定していなければこれになっている 要素は通常の位置に : 上下左右に動かすことができない 要素の位置を調整できない : topやleftなどを指定しても効果がない z-indexを指定できない : 要素の重なり順を変えられない
基本的にstaticを指定することはない。
position: relativeは現在の表示位置から相対的に要素の位置を動かした糸気に使います。
position: relative
position: relativeとしても、topやbottomを指定しなければstaticと同じ位置に表示されます。 そのため一見同じように感じられるが、①位置調整の可否や②z-index指定の可否という違いがあります。「z-indexやtopなどが指定できないときはrelativeにする！」とおぼえておくと良いでしょう。
absoluteだと親要素を基準に、絶対的な位置を指定することになります。この「絶対的な位置」というのは、要素がどんな形であろうと、間に他の要素や余白が入っていようと、その位置に配置してくれるということ意味します。
absoluteを使って位置調整するときは、親要素にposition: relative（もしくはfixed）を指定しましょう。これを忘れると基準位置がずれて思ったように表示されません。absoluteを使うときは、親要素もセットで変えるようにしましょう。
これは、画面の決まった位置に要素を固定させたい時に使う。スクロールしても位置が変わらないメニューバーなどを表示させたい時に使うと便利。 absoluteと指定方法がほとんど同じですが、位置の基準は親要素ではなく「ウィンドウ全体」です。そのため、要素の位置に関係なくtop: 0と指定したら画面の最上部に表示されます。
親要素ではなく「ウィンドウ全体」
