木+木+木=森

できるだけ言葉にする

2023-01-01から1年間の記事一覧

要素の順番を変える

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

写真の修正

レンズ補正では思うように形が整わなかったので遠近法ワープを使用した 【簡単】Photoshopの写真ゆがみ補正を5パターン紹介! - PENGIN BLOG 光の反射は「コンテンツに応じた塗りつぶし」 暗い部分を明るくしたいときは「シャドウ・ハイライト」

flexboxの高さ

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

position: absoluteの使い方

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

vertical-align: middleの使い方

結局この使い方に落ち着いた あんま使いたくないからもっと良い方法ないのかな .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

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

vmin

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

overflow

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

このボタンのデザインかわいい

エンボスっぽいボタン リモプルの運営会社 株式会社Vanquet(バンケット) | Web総合プロダクション Web制作会社のコーポレートサイトって目がチカチカするデザインが多いけど、ここのは落ち着いたマットな感じでいいなと思った。見やすいし

ページ内遷移のズレ

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