【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。
...
人気の記事ランキング
ranking 【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
あのー、水玉模様の背景をCSSで作りたいのですがー なるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー 背景パターン / 方眼紙 ver.1 背景パターン / 方眼紙 ver.2
...
【jQuery】スライダープラグイン「slick」実装サンプル集
slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） 2枚の画像を表示、1枚ずつスライド 3枚の画像を表示、3枚ずつスライド サムネイル付き 垂直スライドモード（縦方向に
...
【jQuery】アコーディオン実装サンプル10選
jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 アコーディオン、一つ開けると他は閉じる ア
...
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。CSSのアニメーションと組み合わせることでサイト制作の幅がとっても
...
【CSS】olのリストで①、②、③（丸数字）を表示させる
lのリストで①、②、③（丸数字）ってできますかー できますよー サンプル①、簡単バージョン See the Pen 【CSS】olのリストで①、②、③（丸数字）を表示させる、簡単バージョン by 125naroom (@
...
【CSS】スマホ、タブレットで横スクロールする実装サンプル集
横スクロールー 横スクロールー 画像を横にスクロールしてみる 幅600px以下は横スクロールに設定してみました。（スマホでチェックしてみていただくとわかりやすいかと思われますー） テーブルを横にスクロールしてみる 幅60
...
【CSS】三角アイコンと矢印アイコンをつくる
画像は使わないんですか？ CSSだけで簡単にできますよー 三角アイコン 疑似要素「:before」でテキストの横に三角アイコンをつけています。 三角アイコン（丸背景あり） 疑似要素「:before」で丸背景をつけています
...
【CSS】シンプルなボタンデザイン実装サンプル集
ボタンだー いろんなボタンをまとめましたー しっかり企業系のボタン シンプルな四角ボタン、左に三角 シンプルな角丸ボタン、右に矢印 シンプルな四角ボタン、左に矢印 付箋のようなボタン 立体的なボタン、押せるので楽しい 右
...
【125naroom】人気ランキングを「週間・月間・全期間」で見られるようにしました
人気ランキング、いつも同じ記事が上にいませんか？ これまでは「累計」だけだったんです。週間と月間でも見られるようにしました 125naroomの人気の記事ランキングを作り直しました。これまでは「今までの合計アクセス数」で
...
【CSS】背景（background）を2色にする
背景を2色ってできますか？ 『background』の『linear-gradient』をうまく使うとCSSだけでコーディングできますよー 半分、上と下 See the Pen CSSだけで、背景を2色にする、縦の半分こ
...
【デザインのこと】見られなくなったサイトは「掲載終了」と表示するようにしました
「デザインのこと」に載ってるサイト、今も全部見られるんですかー？ それが、年月が経つと見られなくなるサイトも出てきちゃうんです。なので、全部確認してみました。 2,022サイトを、実際に開いて確認しました デザインのこと
...
【CSS】tableの行（列）を『sticky』で固定したときにスクロールしても線が消えないようにしてみる
tableの項目を固定したのですが、線が消えちゃいますー ちょっとした工夫が必要ですねー tableの『行』を固定してスクロールする（失敗作） See the Pen 【CSS】テーブル（table）の行を固定してスクロ
...
【125naroom】service ページを、リニューアルしました
service ページ、なんだか雰囲気が変わりましたね？ つくりなおしました。どんなふうにつくっているのかが伝わるページにしたんです 125naroom の service ページ を、つくりなおしました。 125nar
...
【CSS】『shape-outside』でテキストの回り込みを円形にしてみる
文章の回り込みって丸くできないですかー？ あー、円形に回り込みですねー、できますよー テキストの回り込みを円形にしてみる floatが必須です。shape-outsideは、円形の『circle()』の他に楕円の『ell
...
【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）
スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQuery
...
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
jQueryを使うとするするとスクロールして移動させることができます。視覚的にもとても良いのでおすすめです。また、グローバルメニューの固定などの影響で移動先が隠れてしまった（ズレた）時には簡単に調整することができます。
...
【JavaScript】SimpleBarを使ってスクロールバーを実装する（簡単にカスタマイズできます）
スクロールバーをオリジナルで作ってほしいって言われたんですけど、作ってみたらブラウザによって変わっちゃうんですけど何とかなりませんかねー？ 『SimpleBar』を使えば簡単にできちゃいますよー 【サンプル】縦スクロール
...
拡張子を一括で簡単に変更する、『.jpeg』→『.jpg』など
あ、トントンですね はい、トントンです ん、なんで？ Skype（スカイプ）で画像を送ると『.jpg』が『.jpeg』になってた。困る。拡張子書き換えるの面倒だな。で、バッジで対応しようと。 バッジを作る メモ帳があれば
...
【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
モーダルプラグイン『Remodal』の使い方と、制作に役立つ実装サンプルをまとめてみました。 シンプル設計で軽量なので簡単に使えます。以前はプラグインを使わずにモーダルにしていたのですが、あまりにも使い勝手がいいのでモー
...
【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん
スマホだとクリッカブルがズレますー そんな時は『RWD Image Maps』を使いましょうー 【実装】丸でクリッカブルしてみました 画像サイズ（widthとheight）の指定は必須です。 See the Pen 【j
...
【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集
横並びの要素の高さを揃えてくれるプラグイン『matchHeight.js』の使い方と、制作に役立つ実装サンプルをまとめました。「flexboxの中にあるこの部分の高さを揃えたいのだけど！」って言う時にはとってもおすすめで
...
【jQuery】 ローディング、実装サンプル集
ローディングをまとめてみました。おしゃれなサイトさんはローディングを組み込んでいるなー、と思う今日この頃です。意外と簡単なのでお時間ありましたら組み込んでみてくださいませ。 ローディングを設定したいのですが難しいですかー
...
【26/09】Xでいいねがいっぱい付いたWebデザインランキング、7選。
9月号のランキングですねー 写真の見せ方が上手なサイトが多かった月でしたー デザインのことでは、その月にX（旧Twitter）で紹介した中から「いいね」がいっぱい付いたWebデザインを7つ選ぶランキング企画を毎月やってい
...
【jQuery】モバイルファーストが素敵な『fancybox3』実装サンプル集
Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。とってもモバイルファーストに設計されているのでとってもおすすめです。 モバイルファーストですねー 共有ボタンもありますよ
...
【CSS】見出しデザインをまとめてみる（左右に線を引くとか）
見出しのデザインをまとめてくださーい わ、わかりましたー 左右に線を引く よく見かけますね。線を引いて、背景白のテキストを乗せるって感じですね。 左右に線を引く（flexboxを使ってみる） さいごに ありがとうございま
...
【CSS】フォントサイズの最適化。clamp()の使い方
画面幅によってフォントサイズ変えるの、メディアクエリ何段も書くの地味に面倒じゃないですか？ clamp()を使うと、メディアクエリなしでなめらかに変えられますよー 早速サンプル ブラウザの幅をリサイズしてみてください。見
...
【デザインのこと】「デザインをさっとみる」でできること。動画ができました
「デザインをさっとみる」って、動画で見たほうが早い気がします Xで流す用に、ちょっとしたCMみたいな動画を作ってみました。見てくださいー 「デザインのこと」に付いている「デザインをさっとみる」ボタン、PC・スマホそれぞれ
...
【CSS】animationを使って流れるテキストとかを作ってみる
CSSだけで流れるテキストって作れますかー？ できますよー。animationを使ってやってみましょうー。 流れるテキスト animationを使う。動きの速度調整が少し難しい。幅は指定する。全体幅も明記してもいいが、し
...
【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
tableを1列にレスポンシブしたいんですけどー CSSだけで簡単にできますよー 2列を1列に切り替える ブレイクポイントの設定 601px以上は2列。600px以下は1列。 See the Pen 【CSS】table
...