miiko

北陸を拠点にWeb制作しています。
転勤族の夫と暮らす元公務員のWeb制作と暮らしの記録です。
Twitterでは日々の積み上げや学びを発信中。

【CSS】画像や動画のアスペクト比(縦横比)を固定してレスポンシブに対応する方法aspect-ratio編

2023/11/14    

アスペクト比(縦横比)を固定する方法の一つにaspect-ratioがある。固定したいコンテンツの親要素にaspect-ratio: width/height;を指定する。計算の手間がないが、古いブラウザで対応していない場合があるため確認が必要。

【CSS】画像や地図のアスペクト比(縦横比)を固定する方法

2023/5/23  

レイアウトを整えるためには、画像や動画のアスペクト比(縦横比)を指定することが大切です。imgタグの場合はコンテナ要素に、background-imageの場合は指定したい要素にpadding-top:○%を指定します。

独学でプログラミングを学ぶべき?それともスクールに通うべき?メリットとデメリットを元公務員が比較!

2023/5/9  

こんにちは。みーこです。 現在はWEB制作フリーランスをしていますが、前職は教育系公務員として残業に追われていました。 プログラミング始めた時って、この勉強方法が合っているのか不安になりますよね。 私 ...

【CSS】画像の縁をぼやかす方法

2023/5/4  

misaki 写真を使う時に、雰囲気を柔らかくしたい時ってありますよね。 今回は挿入したいimgに一手間加えて、imgの縁をぼやかす方法を紹介します。 imgの親要素にdivタグを作成します。ぼかしの ...

【CSS】画像にカーソルを乗せた時(hover)ズームさせる

2023/5/10  

カーソルを乗せた時(hover)画像を拡大【img】 イメージとしては 1_カーソルをのせた(hover)時にtransform: scale(1.1);で大きくする 2_枠を指定し、はみ出していると ...