【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。
...
人気の記事ランキング
ranking 【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
あのー、水玉模様の背景をCSSで作りたいのですがー なるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー 背景パターン / 方眼紙 ver.1 背景パターン / 方眼紙 ver.2
...
【jQuery】スライダープラグイン「slick」実装サンプル集
slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） 2枚の画像を表示、1枚ずつスライド 3枚の画像を表示、3枚ずつスライド サムネイル付き 垂直スライドモード（縦方向に
...
【CSS】シンプルなボタンデザイン実装サンプル集
ボタンだー いろんなボタンをまとめましたー しっかり企業系のボタン シンプルな四角ボタン、左に三角 シンプルな角丸ボタン、右に矢印 シンプルな四角ボタン、左に矢印 付箋のようなボタン 立体的なボタン、押せるので楽しい 右
...
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。CSSのアニメーションと組み合わせることでサイト制作の幅がとっても
...
【CSS】olのリストで①、②、③（丸数字）を表示させる
lのリストで①、②、③（丸数字）ってできますかー できますよー サンプル①、簡単バージョン See the Pen 【CSS】olのリストで①、②、③（丸数字）を表示させる、簡単バージョン by 125naroom (@
...
【jQuery】アコーディオン実装サンプル10選
jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 アコーディオン、一つ開けると他は閉じる ア
...
【CSS】三角アイコンと矢印アイコンをつくる
画像は使わないんですか？ CSSだけで簡単にできますよー 三角アイコン 疑似要素「:before」でテキストの横に三角アイコンをつけています。 三角アイコン（丸背景あり） 疑似要素「:before」で丸背景をつけています
...
【CSS】スマホ、タブレットで横スクロールする実装サンプル集
横スクロールー 横スクロールー 画像を横にスクロールしてみる 幅600px以下は横スクロールに設定してみました。（スマホでチェックしてみていただくとわかりやすいかと思われますー） テーブルを横にスクロールしてみる 幅60
...
【CSS】背景（background）を2色にする
背景を2色ってできますか？ 『background』の『linear-gradient』をうまく使うとCSSだけでコーディングできますよー 半分、上と下 See the Pen CSSだけで、背景を2色にする、縦の半分こ
...
【125naroom】ロゴとナビを、新しくしました
あれ、ロゴの o が、まるになってる？ ロゴとナビを新しくしました。テーマは「まるとせん」です 125naroom のロゴと、ヘッダー・メニュー・フッターのナビを新しくしました。見た目は大きく変えず、すこしだけ遊び心を足
...
【JavaScript】SimpleBarを使ってスクロールバーを実装する（簡単にカスタマイズできます）
スクロールバーをオリジナルで作ってほしいって言われたんですけど、作ってみたらブラウザによって変わっちゃうんですけど何とかなりませんかねー？ 『SimpleBar』を使えば簡単にできちゃいますよー 【サンプル】縦スクロール
...
【デザインのこと】ギャラリーに「見どころ」欄が増えました
「デザインのこと」って、画像とリンクが並んでるだけのサイトでしたよねー それが最近、1行コメントが増えて結構印象が変わったんです。 「見どころ」欄が増えました デザインのこと – Web design gallery は
...
【CSS】tableの行（列）を『sticky』で固定したときにスクロールしても線が消えないようにしてみる
tableの項目を固定したのですが、線が消えちゃいますー ちょっとした工夫が必要ですねー tableの『行』を固定してスクロールする（失敗作） See the Pen 【CSS】テーブル（table）の行を固定してスクロ
...
【デザインのこと】「さっと見る」モーダルでPC/スマホの見た目を切り替えられるようになりました
「デザインのこと」の「さっと見る」ボタン、押したことありますかー あのモーダル、実は中でPC/スマホの見た目を切り替えられるようになったんです。今回はその話です。 何ができるようになったか デザインのこと – Web d
...
【CSS】animationを使って流れるテキストとかを作ってみる
CSSだけで流れるテキストって作れますかー？ できますよー。animationを使ってやってみましょうー。 流れるテキスト animationを使う。動きの速度調整が少し難しい。幅は指定する。全体幅も明記してもいいが、し
...
【jQuery】横並びの高さを揃える『matchHeight.js』実装サンプル集
横並びの要素の高さを揃えてくれるプラグイン『matchHeight.js』の使い方と、制作に役立つ実装サンプルをまとめました。「flexboxの中にあるこの部分の高さを揃えたいのだけど！」って言う時にはとってもおすすめで
...
拡張子を一括で簡単に変更する、『.jpeg』→『.jpg』など
あ、トントンですね はい、トントンです ん、なんで？ Skype（スカイプ）で画像を送ると『.jpg』が『.jpeg』になってた。困る。拡張子書き換えるの面倒だな。で、バッジで対応しようと。 バッジを作る メモ帳があれば
...
【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集
Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。簡単に実装することができるのでおすすめです。（個人的には『PhotoSwipe』をおすすめしますが、jQueryではな
...
【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
モーダルプラグイン『Remodal』の使い方と、制作に役立つ実装サンプルをまとめてみました。 シンプル設計で軽量なので簡単に使えます。以前はプラグインを使わずにモーダルにしていたのですが、あまりにも使い勝手がいいのでモー
...
【125naroom】service ページを、リニューアルしました
service ページ、なんだか雰囲気が変わりましたね？ つくりなおしました。どんなふうにつくっているのかが伝わるページにしたんです 125naroom の service ページ を、つくりなおしました。 125nar
...
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
jQueryを使うとするするとスクロールして移動させることができます。視覚的にもとても良いのでおすすめです。また、グローバルメニューの固定などの影響で移動先が隠れてしまった（ズレた）時には簡単に調整することができます。
...
【jQuery】アコーディオンでおしゃれなQ&Aを作ってみる
おしゃれなQ&Aを作りたいのですよねー こんなんどうでしょー アコーディオンでおしゃれなQ&Aを作ってみる 今回のテーマ。 transitionで簡単なアニメーションをつけてみる。 See the Pen
...
【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）
スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQuery
...
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能）
少し複雑な『タブ切り替え』を実装してみました。 ▽今回の実装テーマ なんだか難しそうですねー できる自信がありませんねー シンプルなタブ切り替え See the Pen 【jQuery】シンプルなタブ切り替え（外部ページ
...
【Coding Toolkit】小さなツール26種を「作りながら」学んだこと
ナビの「Coding Toolkit」、実は自作なんですねー そうなんです。今回は最適化の話をお休みして、あれを作ったときの話を書きます。 何を作ったか Coding Toolkit は、フロントエンドの作業でよく使う小
...
SVGのアイコンをWebフォントにする（IcoMoonの使い方）
あのー、SVGの画像をフォントにしたいんですけどー おー、できますよー。Webフォントにしちゃいましょうー IcoMoonの使い方 では早速スタートです。 『IcoMoon App』をクリック。 アイコンを選びます。 『
...
【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん
スマホだとクリッカブルがズレますー そんな時は『RWD Image Maps』を使いましょうー 【実装】丸でクリッカブルしてみました 画像サイズ（widthとheight）の指定は必須です。 See the Pen 【j
...
【jQuery】モバイルファーストが素敵な『fancybox3』実装サンプル集
Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。とってもモバイルファーストに設計されているのでとってもおすすめです。 モバイルファーストですねー 共有ボタンもありますよ
...
【jQuery】スクロール途中から追尾（fixed）、指定位置（class）で消える
jQueryを使って、スクロールの途中から追尾（fixed）、そして、指定の位置（class）で消える、というのを実装してみたいと思います。 なんだか複雑だー 理解できれば意外と簡単ですー 実装サンプル See the
...