WEB制作 全般 font-sizeはclamp()関数で指定するのが良さそう
これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。
css
WEB制作 全般 
WEB制作 全般 CSS:text-decorationでできること
text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line（線の位置） text-decoration-style（線の形） text-decoration-color（線の色） text-decoration-thickness（線の厚み）
WEB制作 全般 サイトをダークモードに対応させる
長引く自粛につれてディスプレイを眺めている時間が増え、ダークモードを利用する人が急に増えたような気がします。身近になったダークモードですが、ブラウザやOSが自動...
WEB制作 全般 疑似クラス nth-child の使い方いろいろ
今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。かるい気持ちで使用すると、css指定が効かなかったり、全然違う要素...
WEB制作 全般 cssで作るイメージギャラリー
htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたの...
WEB制作 全般 iPhoneでaタグが動作しない不具合が予想外の方法で直った話
何かと独特な不具合が出がちなiOS。今回、サイト製作中に起きたのが、「ナビゲーションメニューのリンクが全く反応しない（ただしiPhoneに限る)」というものでし...
WEB制作 全般 SVGを使わずにcssで区切り線を作ってみる
１カラム型のページが増えて、増えてというか主流になってきて、各セクションをSVGで区切るサイトをしょっちゅう見かけるようになりました。セクションの背景を斜めにカ...
WEB制作 全般 ARIA属性をCSSスタイリングに利用する
昨年あたりからARIA属性を利用してCSSをスタイリングするようになったので、その有用性を書き残しておきます。WAI-ARIAとアクセシビリティまず簡単にWAI...
WEB制作 全般 mix-blend-modeプロパティ
個人的にはあまり使うことのないプロパティですが、知っていて損はないmix-blend-modeプロパティについてまとめておきます。mix-blend-modeは...
WEB制作 全般 z-indexに頼らない。HTML要素の重なり方を再確認する
css記事のアクセス数を眺めているとstickyやz-indexなどの重なり系トラブルに関する記事が多いので、その辺りに関する基本をまとめておこうかと思います。...
WEB制作 全般 floatの存在意義を考える
暇つぶしのような記事ですので暇なときに読んでいただくことを推奨します。得られるものはほとんどありません。古いサイトの改修をしていた関係で、float: left...
WEB制作 全般 position: absolute で位置を指定しない場合
要素の配置情報を指定するpositionプロパティに「absolute」があります。通常の使い方では、absoluteを指定された要素は「position: s...