HTML / CSS【HTMLフォーム】チェックボックスの作り方
2020-07-09 オレンジ webの自由帳
今回はお問い合わせフォームなどにある
チェックボックスの作り方についてまとめてみたいと思います。 こんなかんじのサンプルを作ってみました。
See the Pen
q …
HTML / CSS【HTMLフォーム】ラジオボタンの作り方
2020-07-08 オレンジ webの自由帳
今回はお問い合わせフォームなどで見られる、
ラジオボタンの作り方をまとめてみたいと思います。 こんなかんじのサンプルを作ってみました。
See the Pen
OJM …
その他【XDからコーディング】画像の書き出し / 値の取得方法
2020-07-01 オレンジ webの自由帳
今回はAdobeのXDからコーディングする際の
画像の書き出し方法、値の取得方法をまとめてみます。
XDでの画像の書き出し方法
アート …
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ファイルを …
HTML / CSS【tableタグ】基本的な表の作り方【HTML】
2020-05-29 オレンジ webの自由帳
HTMLのtableタグってがなんだか独特ですよね。。 今回はHTMLのtableタグを使った基本的な表の作り方をまとめてみたいと思い …
HTML / CSS【CSS擬似要素】::before ::afterってなに？
2020-05-28 オレンジ webの自由帳
装飾でよく使われる::before, ::after擬似要素についてまとめてみたいと思います。 今回はデザインの作り方ではなく、
定 …
JavaScript【スクロールに合わせたアニメーションプラグイン】wow.jsの使い方
2020-05-27 オレンジ webの自由帳
サイトをみていると、
スクロールに合わせてコンテンツがふわっと現れたり、スライドしてきたりしますよね。 今回はスクロールに合わせてア …
HTML / CSS【CSS擬似クラス】:nth-child() と :nth-of-type() のちがい
2020-05-26 オレンジ webの自由帳
n番目の要素を選ぶ :nth-childと:nth-of-type、
似ていますがちがいはどこにあるのでしょうか？ 今回はCSSの2 …
JavaScript【スライダープラグイン】Swiperの使い方
2020-05-25 オレンジ webの自由帳
サイトではほとんど必ずと言っていいほどスライダーが使われていますよね。
スライダーはいちから作ることもできますが、便利なプラグインもたくさんあります。 今回はプラグインのひ …
HTML / CSS【第5のpositionプロパティ】stickyの使い方【CSS】
2020-05-23 オレンジ webの自由帳
今回はCSSのpositionプロパティの1種、
stickyの使い方についてまとめたいと思います。 relative, absol …