display:flexで横並びにした子要素の高さが変になってしまった時の対処法 最近携わった案件で使用した、テクニックとして定着していなかった技術について。 これからHTML・CSSを学ぶエンジニアのヒントになればと思います。 もくじ 1.　どういう問題が起きたか。 2.　問題に対する対処法。 3.　align-itemsについて。 4.　まとめ 1.　どういう問題が起きたか。 ・よくあるカードを横並びにしたやつ。上辺の基準として揃えたい。 ・子要素に当たるカードは body に当たる部分に、全方向 padding 10pxを入れて、borderで囲みたい。 ・子要素の高さはそれぞれ異なり、内容は変更される可能であるため、決め打ちではなくheight:autoを使いたい。 以上の条件を踏まえて、 親要素をdisplay:flexとし、子要素を横並びにすると、一番長い高さに揃えられてしまった。 See the Pen by ShinEndo (@shinendo) on CodePen. 2.　問題に対する対処法。 display:flexを指定した要素に「align-items:flex-start」を追加。 ※上との違いをわかりやすくするためにborderの色をred → blue に変更しています。 See the Pen by ShinEndo (@shinendo) on CodePen. 無事、bodyの全方向に padding 10pxを含んだカードができた。 3.　align-itemsについて。 align-itemsは「flexboxの交差軸に対しての子要素の配置を決める」 ※flex-direction:rowの場合はy軸方向の配置を。flex-direction:columnの場合はx軸方向の配置を。 flexboxのプロパティであるalign-itemsの初期値はalign-items:stretchである。 align-items:stretchはflexboxの子要素（flexboxアイテム）を伸縮する。 4. まとめ 問題が生じた際、align-itemsの初期値がstretchであることを知らなかった。 というのも今まで、flexboxの子要素の高さは決め打ちしているものが多かったためである。 （あるいは、align-items:centerで中央揃えにしていた） flexboxで複数個の子要素を並べる際は、align-itemsの指定をあらかじめしておくほうが、予期せぬ動きは避けられるだろう。 この機会に、align-items:flex-startを習得したい。

はじめに プログラミング学習を始めた当初、idとclassってどういう使い分けをしてるんだろうって思っていました。 同じように思っている初学者がいると思うので、簡単に説明していきます。 id属性 同じwebページ内で一度しか同じ値を使えません。 その代わり、class属性に優先してスタイルをつけることができます。 CSSに書く際は、頭に「#」を付けて記述します。 HTML <div id="id名">hello</div> css #id名{ color: red; } ・同じ値は一度しか使えないので、これはダメ！ HTML <div id="hello">hello</div> <div id="hello">こんにちは</div> class属性 idと違い、同じwebページ内で何度も同じ値を使うことができます。 CSSに書く際は、頭に「.」を付けて記述します。 html <div class="class名">hello</div> css .class名{ color: red; } ・同じ値を何度でも使えるので、これはオッケー！ HTML <div class="hello">hello</div> <div class="hello">HELLO</div> <div class="hello">こんにちは</div> おわりに 基本的にはclass属性を使い、ピンポイントでスタイルを適用したいようなときがあればid属性を使えば良いでしょう。

　はじめに CSSを勉強してて、ボックスモデルを説明できるように簡単にまとめてみました。 コンテントボックスとは 実際の横幅と高さ 基本はwidthとheight html <div class="box">ボックススタイルブロック</div> css .box { /* background-color: green; */ /* Content Box*/ width: 200px; height: 200px; } パディングボックスとは コンテントボックスから外側までどのくらい空けるか padding:上　右　左　下の順で書く(ショートハンドという) html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Padding Box */ padding: 8px 10px 15px 30px; } マージンボックスとは 他の要素からどのくらい空けるか html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Margin Box */ margin: 8px 10px 15px 30px;; } マージンの相殺とは マージが重なると値が大きいほうが優先される 下記のコードの場合margin-topの値が大きいため、margin-top: 40px;が適用される html <div class="box">ボックススタイルブロック</div> <div class="margin">マージン相殺用の説明のブロック</div> css .box { background-color: green; margin-bottom: 20px; } .margin { background-color: blue; margin-top: 40px; } ボーダーボックスとは border: 先の太さ 線の種類 線の色と書く html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Content Box*/ width: 200px; height: 200px; /* Border Box */ border: 5px solid black; } Box-Sizing プロパティについて ボーダーとパディングの値が加わって、実際の指定した値よりも大きくなることがある。これは、直感的ではないのでBox-Sizing プロパティを使うと良い Box-Sizingプロパティをつかうとwidthとheightで指定した大きさになる MDNのドキュメント　CSS ボックスモデルの代替 html <div class="box">ボックススタイルブロック</div> css .box { background-color: green; /* Content Box*/ width: 200px; height: 200px; /* Padding Box*/ padding: 8px 10px 15px 30px; /* Margin Box */ margin: 8px 10px 15px 30px; box-sizing: border-box; }

ReactRouterのドキュメントにあるuseParams1をそのまま試しても自分のプロジェクトではうまく動作しませんでした。 試したコードは以下になります。 index.tsx import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Switch, Route, useParams } from "react-router-dom"; function BlogPost() { let { slug } = useParams(); return <div>Now showing post {slug}</div>; } function HomePage() { return <div>HomePage</div>; } ReactDOM.render( <Router> <Switch> <Route exact path="/"> <HomePage /> </Route> <Route path="/blog/:slug"> <BlogPost /> </Route> </Switch> </Router>, document.getElementById("root") ); HomePage（/）だとreset.cssが効いて、自分で定義していた全体に反映されるindex.cssも効いていました。 ところが、BlogPost（/blog/hello-world）に遷移した時にどちらのcssも効かなくなってしまっていました。 自分で定義したcss（reset.cssとindex.css）はpublicフォルダ内に保存されていて、index.html内で適用されていました。 暫定的な解決方法 index.cssとreset.cssをindex.tsx内で呼び出すようにしてうまくcssが適用されるようになりました。 index.tsx import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Switch, Route, useParams } from "react-router-dom"; import "./index.css"; import "./reset.css"; function BlogPost() { let { slug } = useParams(); return <div>Now showing post {slug}</div>; } function HomePage() { return <div>HomePage</div>; } ReactDOM.render( <Router> <Switch> <Route exact path="/"> <HomePage /> </Route> <Route path="/blog/:slug"> <BlogPost /> </Route> </Switch> </Router>, document.getElementById("root") ); https://reactrouter.com/web/api/Hooks/useparams ↩

はじめに なんでフッターがコンテンツに被ってるねん！！！ フッターをposition:fixedで固定したからか？ でも下で固定しとかな、コンテンツが少ない時フッターが上にあがってきてしまう。。。 ・コンテンツ量が多い時、スクロールしたら下にフッターがある ・コンテンツ量が少ない時、常に下にフッターがある ?を同時に実現するにはどうしたらいいか・・・ Webのcssを触るのが久々で、結構な時間こんな問題と格闘してしまった。。 cssだけで解決してみせます <body> <div class="wrapper"> <header> <!--グローバルナビなど--> </header> <main> <!--ここにコンテンツの内容--> </main> <footer> <p>Copyright © 2021</p> </footer> </div> </body> .wrapper{ min-height: 100vh; /* ←コンテンツの高さの最小値＝ブラウザの高さに指定 */ position: relative;/* ←相対位置 */ padding-bottom: 60px; /* ←フッターの高さを指定 */ /* ↑ヘッダーやフッターを含むすべての要素の高さ＝min-height:100vhになるように指定 */ } footer{ position: absolute;/* ←絶対位置 */ bottom: 0; text-align: center; } か、解決した。。。！！ コメントより 別のやり方も教えてもらいました！① headerとfooterのheightが分かっているならmainのmin-heightをcalc(100vh - var(--header-height) - var(--footer-height))と言う感じに設定してあげればfooterのpositionをabsoluteにする必要はなくなりますよ。 mainの中に下方向マージンが大きく取られたものが入るとfooterが押しやられるので、mainに適当な幅で下方向paddingを入れてやると崩れにくくなります。 @felis さん、ありがとうございます！ 別のやり方も教えてもらいました！② wrapperをフレックスブロックのmin-height: 100vh; flex-direction: columnで縦積みにし、mainをflex: 1 1 auto;にするとmainがフレックスアイテムになって良い具合に伸びます。 というやり方もできます @right714 さん、ありがとうございます！

transformプロパティのtranslate関数の使い方と動き方について下記にまとめます。 目次 1.transform translateでできること 2.値 3.値を整数にした際の要素の変化 4.値を％にした際の要素の変化 5.まとめ 6.参考記事 1. transform translateでできること transformは与えられた要素を回転、拡大縮小、傾斜、移動することできます。 transformで使用する関数のtranslateは、要素を水平方向や垂直方向で再配置（移動）する際に使用します。 style.css transform: translate(X軸,Y軸); 要素を移動するには上記のX軸、Y軸に数値を入れる必要があります。 translate関数の値については下記のとおりです。 2. 値 translate(X方向の距離, Y方向の距離) →X方向とY方向の距離で指定します。 translateX(X方向の距離)　・・・　縦方向 →X方向の距離で移動を指定します。 translateY(Y方向の距離)　・・・　横方向 →Y方向の距離で移動を指定します。 translateZ(Z方向の距離)　・・・　近づいたり、遠ざかったりする。 →Z方向の距離で移動を指定します。 　※translateZ()関数にはパーセンテージ値を指定することができないので注意。 　 もし、パーセンテージで値を指定しても0と同じになります。 translate3d(X方向の距離, Y方向の距離, Z方向の距離)　・・・　 3D空間内で配置する。 →X方向とY方向とZ方向の距離で3D移動を指定します。 　Y方向とZ方向の距離は省略することができますが、 　この場合のY方向とZ方向の距離は0となります。[tx,ty,tz] 以下では数値をpxと％にしたものを記載しています。 3. 値を整数にした際の要素の変化 X軸とY軸に正数を入れると下記のように移動しました。 style.css box { translate（ 100px , 100px ）; } 正数であれば 　・右に正数分 　・下に正数分 　移動することがわかりました。 では、負数を入れるとどうなるでしょうか。 style.css box { translate（ -100px , -100px ）; } 負数であれば ・左に負数分 ・上に負数分 正数とは逆に移動することがわかりました。 4. 値を％にした際の要素の変化 ％の値で書くとどうなるでしょうか。 正数で記載したものは下記の通りとなりました。 style.css box { translate（ 100％ , 100％ ）; } ボックス1つ分のサイズが、縦（下）と横（右）に移動したことがわかりました。 なお、負数で示すとこの動きは逆になります。 style.css box { translate（ -100％ , -100％ ）; } ボックス1つ分のサイズが縦（上）と横（左）に移動しています。 5. まとめ translateは、pxや％の値によって動き方が異なることがわかりました。 要素やレイアウトにあった適切な数値を入れて要素の位置を移動しましょう。 6. 参考記事 https://developer.mozilla.org/ja/docs/Web/CSS/transform https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate() https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translateZ() http://www.htmq.com/css3/transform_translate.shtml https://developer.mozilla.org/ja/docs/Web/CSS/transform-function/translate3d()

transformプロパティの使い方と動き方について下記にまとめます。 style.css transform: translate(); transformはtranslateを一緒に記載する必要があります。 このtranslateは、要素を水平・垂直方向に移動して配置します。 要素を移動するには下記のX軸、Y軸に数値を入れ流必要があり、 数値はpx、％で指定が可能です。 style.css translate（ X軸：左右 , Y軸:上下 ）; なお、X軸とY軸に数値を入れた結果はこちらです。 style.css box { translate（ 100px , 100px ）; } X軸とY軸に正数を入れるとこのように動きました。 では、マイナスの負数を入れるとどうなるでしょうか。 style.css box { translate（ -100px , -100px ）; } 逆に移動しました。 続いては％の値で書くとどうなるでしょうか。 style.css box { translate（ 100％ , 100％ ）; } ボックス1つ分の横と縦のサイズ分動いたことがわかりました。 なお、下記の％を負数で示すとこの動きも逆になります。 style.css box { translate（ -100％ , -100％ ）; }