cssプロパティの aspect-ratio という、とても便利なものを最近見つけました。 大体のブラウザで使えます（詳細はこちら）。 使い方を実際に書いて調べてみます。 ☆CSSメディアクエリの「aspect-ratio」やアスペクト比については（その1）にまとめました。 …

メディアクエリの「aspect-ratio」を使う機会に遭遇しました。 動画をスクロールなしの1画面に収めたい場面です。 そこではメディアクエリで aspect-ratio が使われていました。 使い方はなんとなく意味は分かりそうですがなんとなくでしか分からない。 そも…

Hugoブログを絶賛カスタム中です。 （テーマは「Clarity」を使っています） このテーマではSassが使われているのですが、変数を用いて色やwidthの数値を設定しています。 そしてなぜかSassの中でcssのカスタムプロパティを使っていました。 しかも私にとって…

ようやくNetlifyでHugoサイトを公開しましたが、元のThemeのままです。 少しずつカスタマイズしていこうと思います。 ☆使っているテーマは「hugo-clarity」です。 sassファイルを確認してみる デザインを変えたいのでcssを調べます。 cssファイルは見当たら…

投稿するコンテンツの場合、アップする画像サイズを統一させられないのが常です。 いろいろな縦横比の画像を画面いっぱいに表示させる方法を模索しています。 wordpressなどでは、リサイズさせた画像を表示させたりするので、あまり頻繁ではありませんが、た…

テキストのすき間問題。見て見ぬふりしてきたシリーズの1つです。 vertical-align も気になっているのですが、今回は line-height を見つめ直す機会があったのでおさらいします。 まずこちらの記事を読んで「なるほど」と理解してから考えます。 【CSS】line…

調べてその場で納得して終わりのケースが多いcss。いつでも振り返られるようにメモしました。 floatの解除に display: flow-root 【2017年最新】clearfix一番短い書き方は親要素にdisplay:flow-root;を書き加えるだけ - 自動化厨のプログラミングメモブログ│…

ソースマップの記事を書いていたら「コンパイル」が気になってしまいました。 scss→cssはコンパイルなの？ 過去の記事でも混乱していました（笑） 調べているとコンパイラ言語からプログラムの実行をする過程の中でコンパイルが出てくるので図にしました。 …

W3CのMarkup Validation Service（マークアップバリデーションサービス）でウェブページを確認する機会がありました。 これって警告・エラーなんだ！という新しい発見がありましたのでメモします。 ※2020年7月現在の内容です。 コメントの中にハイフン2つが…

今回のエラーはChromeのデベロッパーツールのコンソールエラーを調べていて気になったもののうちの1つです。 （もう一つはCookieのエラーです） DevTools failed to load SourceMap: Could not load content for （Chromeの拡張機能のjsのソースマップ）: HT…

疑似要素の扱いがまだまだな今日このごろです。 こちらのページを元に、ボタンを作りました。 https://www.nxworld.net/tips/10-css-cute-design-good-chemistry-button-design-and-hover-effect.html#anchor09 9 . 背景が枠からズレたボタン このボタンも以…

cssでグラデーションのボタンを作っていて、hover時にグラデーションを反転させたアニメーションを付けたいと思いました。 background-imageはtransitionでアニメーションできない 知らなかったです。animationでも動かないそうです。 linear-gradient()に数…

cssでボックスの背景を斜めのストライプ状にしたい場合があります。 背景にグラデーションをかけるlinear-gradient()を使った応用で、ベンダープレフィックスやら書き方がごちゃごちゃしているので、ついつい調べてコードをコピペして終わりにしていることが…

min-widthとmax-widthについて、理解があやふやなところに、こちらの記事を読んで、詰まったところがあったので、検証して腑に落ちたらいいなと思いました。 CSSの便利なプロパティmin-widthとmax-width、min-heightとmax-heightの効果的な使い方のまとめ | …