css

HTML/CSS

画像やiframeのサイズ(アスペクト比)を指定できるcssプロパティ、「aspect-ratio」

aspect-rarioプロパティ レスポンシブデザインにおいて、画像のサイズ(アスペクト比)は、width height属性をきちんと記述しておけ...
HTML/CSS

レスポンシブ画像のまとめ

ブラウザサイズや解像度(retinaディスプレイ / デバイスピクセル比)に応じて画像ファイルを振り分けるレスポンシブイメージ。srcset sizes などのタグを使ったレスポンシブ画像の記述方法についてまとめます。
HTML/CSS

font-sizeはclamp()関数で指定するのが良さそう

これまでcssのサイズ指定はスクリーンサイズ別に指定していましたが、clamp関数を使うことで一行にすべてが収まります。たとえばwidth:50vw;min-width:300px;max-width:1000px というcss指定は、width:clamp(300px,50vw,1000px); の一行に収まります。
2021.08.26
HTML/CSS

CSS:text-decorationでできること

text-decorationプロパティは以下のプロパティを一括指定するショートハンドです。text-decoration-line(線の位置) text-decoration-style(線の形) text-decoration-color(線の色) text-decoration-thickness(線の厚み)
HTML/CSS

疑似要素 nth-child の使い方いろいろ

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効か...
HTML/CSS

cssで作るイメージギャラリー

htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していた...
2021.04.22
HTML/CSS

iPhoneでaタグが動作しない不具合が予想外の方法で直った話

何かと独特な不具合が出がちなiOS。 今回、サイト製作中に起きたのが、「ナビゲーションメニューのリンクが全く反応しない(ただしiPhoneに限る)」とい...
HTML/CSS

abbrタグとrubyタグ

自分の無知を晒す話ですが、今の今まで< abbr >タグの意味を二重に取り違えていたので、反省の意味を込めて正しい意味と使い方をまとめておきます。利用頻...
HTML/CSS

SVGを使わずにcssで区切り線を作ってみる

CSSでセクションを区切ってみる 1カラム型のページが増えて、増えてというか主流になってきて、各セクションをSVGで区切るサイトをしょっちゅう見かけ...
HTML/CSS

トグルボタンを使ったメニューの開閉をaria-hiddenで統一したら楽になった

トグルボタンやタブパネルなど、表示のオンオフを切り替える方法はいくつもありますが、WAI-ARIAのaria-controls属性を利用してaria-hidden属性を切り替える形で統一したらCSSスタイリングが非常に楽になったので、備忘録として残しておきます。アクセシビリティにも対応できるのでおすすめです。
2021.06.24
wordpress

WP Dark Modeの使い方と簡単な修正方法について

このところダークモード系プラグインについて書いた記事へのアクセスが続いているのですが、記事内で紹介していたプラグインは現在公開されていないようです。 ...
2021.06.11
HTML/CSS

ARIR属性をCSSスタイリングに利用する

昨年あたりからARIA属性を利用してCSSをスタイリングするようになったので、その有用性を書き残しておきます。 WAI-ARIAとアクセシビリティ ...
2021.06.06
タイトルとURLをコピーしました