HTML / CSS【CSSのみでスムーススクロール】scroll-behaviorプロパティの使い方
2020-06-29 オレンジ webの自由帳
1ページのサイトなどではナビゲーションの項目をクリックすると、
該当箇所までぐいーんと飛ばしてくれる
スムーススクロールが導入されること …
jQuery【jQuery】アコーディオンメニューの作り方
2020-06-26 オレンジ webの自由帳
サイトのQ & Aセクションなどをみていると、
質問部分のクリックで、回答の表示・非表示が切り替わるメニューがありますよね。
…
HTML / CSS【box-shadow】内側の影inset / 複数の影の指定方法
2020-06-19 オレンジ webの自由帳
影をつけるCSSプロパティのbox-shadowですが、
insetで内側に影をつけることができたり、
カンマで区切ると複数の影を作るこ …
jQuery【簡単に拡大ポップアップが作れるプラグイン】Lightboxの使い方
2020-06-16 オレンジ webの自由帳
画像などをクリックすると、
ポップアップ で拡大写真が表示されることってありますよね。 今回はライトボックスを簡単に導入できるプラグ …
HTML / CSS【背景を文字の形に切り取る】background-clip: text;の使い方【CSSプロパティ】
2020-06-14 オレンジ webの自由帳
今回は背景の画像や色を文字の形に切り取ることができるCSSプロパティ、
background-clip: textの使いかたをまとめてみた …
HTML / CSS【2パターン紹介】画像にCSSでオーバーレイをつける方法
2020-06-13 オレンジ webの自由帳
オーバーレイを画像に重ねることってありますよね。 画像の上にテキストを配置する場合、可読性を維持するため
画像とテキストの色のコント …
HTML / CSS【縦書きにするCSSプロパティ】writing-modeの使い方【和風】
2020-06-11 オレンジ webの自由帳
和食や旅館のホームページなどで文字が縦書きになっていると、
一気に和風な雰囲気になりますよね。 今回はCSSで縦書きにすることができ …
その他【 JPG / GIF / PNG 】画像ファイル形式のちがい
2020-06-10 オレンジ webの自由帳
画像ファイルの種類はJPG、PNG、GIFなど、いろいろな種類がありますよね。
今回は画像ファイルのちがいについて、まとめてみたいと思いま …
その他【簡単に画像を圧縮できるサイト】Tiny PNGの使い方【PNG / JPG】
2020-06-08 オレンジ webの自由帳
画像データの重さは
ページの読み込みスピードに影響するのでできるだけ軽くしたいですよね。 今回は無料で簡単にPNG/JPGファイルを …