flex-direction - CSS: カスケーディングスタイルシート | MDN

ローディングアニメーションの導入方法 CSS コピペだけで実装できるローディングアニメーション！ | Recooord | Web制作で扱うコーディングスニペットを紹介 今回使用したアニメーション Single Element CSS Spinners テスト環境ではうまくいったのに本番で…

これよく見るけどやったことなかったやつ 意外と簡単に実装できた cssは背景画像をno-repeatにするとレスポンシブ のときに高さが全然足りなかったので指定しなかった 以下js $(window).on('scroll', function(){ var scrollTop = $(window).scrollTop(); va…

これもいつも調べてる いい加減覚えよう 親要素に画像を指定、子要素を透過 .haikei{ background-image: url(computer.jpg); .toumei{ background-color: rgba(255, 255, 255, 0.562); } CSSで背景を透過させる方法3つを徹底解説 - WEBCAMP MEDIA

body { animation: fadeIn .4s ease-in 0s 1 normal; } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } 【CSS】読み込みが終わったらふわっと表示 | g lance

初歩的すぎるけど、毎回調べてる気がするので覚え 【CSS】超簡単！テキストを「左揃え」のまま「中央寄せ」にする方法【プログラミング】 .sample { text-align: center;} .sample p { display: inline-block; text-align: left; }

sample_box{ width:300px; // サイズがサンプルなので適時変更してください。 margin:0 auto; //サンプルで中央に寄せたいので書かせていただいております。 overflow:hidden; //これを記述することではみ出た部分を非表示にします。 } .sample_box img{ tra…

今回ポートフォリオをWordpressの自作テーマで作り直すことにした どうせなら画像を敷き詰めたいと思い、調べてみるとFlexboxではないよう Pintarestのように画像を敷き詰めるレイアウトをmasonryレイアウトと言うらしい いくつかやり方があるみたいだけど、…

親要素にはposition: relative; 位置を指定したい子要素にpotision: absolute; レスポンシブ にしても位置がずれないようにするためには top: ●vhのようにvh,vwを使用する 左右の位置は下記を指定 left: 50%; transform: translate(-50%, 0); -webkit-transf…

ずっと気になってたことを調べた 要素の順番を入れ替える 【1分で完了】レスポンシブで要素の順番を入れ替えるCSSの書き方｜CORECOLORS（コアカラ） 知らないことだらけだぁ

flexboxを使えば、高さは揃えられる 孫要素の高さを揃えたい場合は下記のように記載する .parent { display: flex; } .child { display: flex; flex-direction: column; } .grandchild{ flex-grow: 1; } （参考）ゴリゴリコード

あとz-indexも追加して使った 最後の2行って絶対必要なのかな？ 【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右) | WEBクリエイターの部屋 .box{ position: relative; } .box p{ position: absolute; top: 50%; left: 50%;…

結局この使い方に落ち着いた あんま使いたくないからもっと良い方法ないのかな .wrap.pattern-3{ height:60px; display:table; text-align:center; } .wrap.pattern-3 div{ display:table-cell; vertical-align:middle; } CSSで文字を上下左右中央に配置する…

文字サイズ 今までemを使っていたけどremを使ったほうがやりやすいかなぁ また単位について分からなくなりそうなので参考置いとく 【CSS】vw、vh、vmin、vmaxとは？基本的な使い方 | JAJAAAN

background-imageを透過させたいとき いつも調べてる気がする ちゃんと記録しておこう background-image: url(画像); background-color: rgba(251, 250, 245, 0.8); background-blend-mode: lighten;

borderを使って横幅いっぱいの三角形シェイプ | tipswork.net チップスワークドットネット 擬似要素を使ったレイアウト まだまだ？なことが多いけど備忘録 なんとかうまくいった

まだ未解決だけど分かったことだけ記す とりあえず、下記2行を子要素に指定すればいいらしい margin: 0 calc(50% - 50vw); width: 100vw; CSS 子要素を親要素よりはみ出して全体表示にするには – 魔王様、フロントエンドエン ジニアを目指す で、横スクロー…

z-indexの使い方って分かっているようで分かってない なんで効かないんだろうと思ったら positionプロパティと一緒に使わないといけないのを忘れてた （参考） 【CSS】z-indexの基本と使い方｜効かない時の原因はコレ | JAJAAAN

縦と横の幅に合わせて文字の大きさを可変できる単位があると知った その名もvmin これからはよく使いそう （参考） 【CSS】見出しが変に改行しない！スマホのfont-size指定にvminを使ってみよう

ヘッダー部分のpaddingをコメントアウトしたところ、ハンバーガーメニューをクリックすると現れるはずのメニューが途中で切れてしまう しかも検証のスマホ画面では表示されてるのに〜謎 理屈はよく分からないけど同じ要素にposition: fixed;とoverflow: auto…

【HTML】 <section id="point" class="point"> 【CSS】 .point { padding-top: 85px; margin-top: -85px; } ※検証で固定しているヘッダーの縦幅を確認する</section>