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