2023-01-01から1年間の記事一覧
ずっと気になってたことを調べた 要素の順番を入れ替える 【1分で完了】レスポンシブで要素の順番を入れ替えるCSSの書き方|CORECOLORS(コアカラ) 知らないことだらけだぁ
レンズ補正では思うように形が整わなかったので遠近法ワープを使用した 【簡単】Photoshopの写真ゆがみ補正を5パターン紹介! - PENGIN BLOG 光の反射は「コンテンツに応じた塗りつぶし」 暗い部分を明るくしたいときは「シャドウ・ハイライト」
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…
エンボスっぽいボタン リモプルの運営会社 株式会社Vanquet(バンケット) | Web総合プロダクション Web制作会社のコーポレートサイトって目がチカチカするデザインが多いけど、ここのは落ち着いたマットな感じでいいなと思った。見やすいし
【HTML】 <section id="point" class="point"> 【CSS】 .point { padding-top: 85px; margin-top: -85px; } ※検証で固定しているヘッダーの縦幅を確認する</section>