125naroom
© 2024 125naroom
TOP 50
2024.3.1
【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。
CSS
デザインのメモ
2024.2.2
【jQuery】アコーディオン実装サンプル10選
jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ
jQuery
2019.9.27
【jQuery】スライダープラグイン「slick」実装サンプル集
slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by
jQueryslick
2021.9.17
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
jQueryを使うとするするとスクロールして移動させることができます。視覚的にもとても良いのでおすすめです。また、グローバルメニューの固定などの影響で移動先が隠れてしまった（ズレた）時には簡単に調整することができます。
2021.3.30
【CSS】シンプルなボタンデザイン実装サンプル集
ボタンだー いろんなボタンをまとめましたー しっかり企業系のボタン BUTTON シンプルなボタンデザイン集 シンプルなボタンデザイン集 シンプルなボタンデザイン集 シンプルなボタンデザイン集 シンプルな四角ボタン、左に
2020.4.17
【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集
jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。 CSSのアニメーションと組み合わせることでサイト制作の幅がとって
2019.6.18
【CSS】背景（background）を2色にする
背景を2色ってできますか？ 『background』の『linear-gradient』をうまく使うとCSSだけでコーディングできますよー 半分、上と下 See the Pen CSSだけで、背景を2色にする、縦の半分こ
2019.7.19
【CSS】olのリストで①、②、③（丸数字）を表示させる
lのリストで①、②、③（丸数字）ってできますかー できますよー サンプル①、簡単バージョン See the Pen 【CSS】olのリストで①、②、③（丸数字）を表示させる、簡単バージョン by 125naroom (@
4
/
27
2024
SPONSORED LINK
広告
google
2020.11.1
【CSS】使える背景パターン、実装サンプル25選（コピペで簡単です）
あのー、水玉模様の背景をCSSで作りたいのですがー なるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー 背景パターン / 方眼紙 ver.1 See the Pen 【CSS】Ba
2024.2.20
【CSS】三角アイコンと矢印アイコンをつくる
画像は使わないんですか？ CSSだけで簡単にできますよー 三角アイコン 疑似要素「:before」でテキストの横に三角アイコンをつけています。 See the Pen CSSだけで、三角アイコン by 125naroom
2021.10.4
【jQuery】モーダルプラグイン『Remodal』の実装サンプル集
モーダルプラグイン『Remodal』の使い方と、制作に役立つ実装サンプルをまとめてみました。 シンプル設計で軽量なので簡単に使えます。以前はプラグインを使わずにモーダルにしていたのですが、あまりにも使い勝手がいいのでモー
2020.2.5
【jQuery】『slick』を使って全画面表示のスライドショー
slickを使って全画面表示のスライドショー！ レスポンシブを考えて『background』で対応しましょう！ もくじ 全画面表示、実装サンプル（background対応） 全画面表示、実装サンプル（background
2020.3.19
【CSS】スマホ、タブレットで横スクロールする実装サンプル集
横スクロールー 横スクロールー 画像を横にスクロールしてみる 幅600px以下は横スクロールに設定してみました。（スマホでチェックしてみていただくとわかりやすいかと思われますー） See the Pen 【CSS】スマホ
2019.11.6
【jQuery】スクロール途中から追尾（fixed）、指定位置（class）で消える
jQueryを使って、スクロールの途中から追尾（fixed）、そして、指定の位置（class）で消える、というのを実装してみたいと思います。 なんだか複雑だー 理解できれば意外と簡単ですー もくじ 実装サンプル メモ さ
2019.12.6
【jQuery】Lightboxプラグイン『Colorbox』の実装サンプル集
Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。 簡単に実装することができるのでおすすめです。 （個人的には『PhotoSwipe』をおすすめしますが、jQueryで
2020.7.6
【CSS】ページ内リンク（アンカーリンク）の位置がズレる、CSSで調整する
あのー、CSSだけで調整できますかー？ CSSだけでも調整できますよー 固定ヘッダーで隠れる（ズレる） こんな感じでズレてます。 See the Pen ページ内リンク（アンカーリンク）の位置がズレる（固定ヘッダーで隠れ
2019.8.30
【jQuery】slick を使ってスライドショー（横幅いっぱい＋前後のスライドを半透明にする）
正直、簡単かなと思っていましたが、結構時間がかかってしまったので備忘録も兼ねて。 ポイントは、「overflow: hidden;」と「overflow: visible;」。 横幅いっぱいで、 並んでるスライドショーを
2023.2.16
【CSS】tableの行（列）を『sticky』で固定したときにスクロールしても線が消えないようにしてみる
tableの項目を固定したのですが、線が消えちゃいますー ちょっとした工夫が必要ですねー tableの『行』を固定してスクロールする（失敗作） See the Pen 【CSS】テーブル（table）の行を固定してスクロ
2019.8.10
【jQuery】タブ切り替え実装サンプル集（上下連動、下タブを押すとスクロールして上に、 外部ページからのリンクIDも可能）
少し複雑な『タブ切り替え』を実装してみました。 ▽今回の実装テーマ 上下のタブの連動 下のタブを押すとスクロールして上にスクロールして移動する 外部ページからのリンクIDを可能にする。リンクIDのタブを開いた状態にする
2019.9.6
LINE風の吹き出しの会話をCSSで作ってみる
CSSだけで、LINE風の吹き出しの会話を作ってみました。何かとよく使います。やはりレスポンシブにコーディングするのは難しいですね。シンプルに疑似要素の「:before」「:after」を使ってコーディングしています。角
2020.1.22
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら）
するする動くと楽しいですねー 固定ヘッダーがある場合はクラスやIDを指定して高さ調整しちゃいましょう！ もくじ JavaScript 実装サンプル、ページ内リンクのスクロール（固定ヘッダーがあったら） 外部リンクからのス
2019.10.31
【CSS】レスポンシブ対応の三角形を作る
CSSで三角形を作ることは意外と簡単だったりします。では、レスポンシブな三角形ってどうでしょう？ あ、なるほど。と思ったので記事にしてみました。 うーん、『％』を使う！ ちがいまーす、『vw、vh』を使いまーす レスポン
2020.3.4
【HTML】head内のmeta『X-UA-Compatible:IE=edge』は不要です
X-UA-Compatibleってなんですかー 簡単に言うと、IE対策の記述ですー 『X-UA-Compatible』って？ IE（Internet Explorer）のドキュメントモードを指定することができる記述です。
HTML
2019.10.23
【WordPress】別サイトにアイキャッチ画像付きの新着記事を表示する（RSSフィードで簡単に）
別のサイトに新着記事を掲載したいのですが、アイキャッチ画像が表示されないですー なるほどなるほど、RSSフィードを取得する方法がシンプルでおすすめですよー デフォルト（標準）で出力されるフィードは？ ワードプレスのRSS
WordPress
2020.2.13
【jQuery】モバイルファーストが素敵な『fancybox3』実装サンプル集
Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。 とってもモバイルファーストに設計されているのでとってもおすすめです。 モバイルファースト！ 共有ボタンもあるのでとって
2020.10.27
【CSS】tableをレスポンシブ対応する、2列を1列に切り替える
tableを1列にレスポンシブしたいんですけどー CSSだけで簡単にできますよー 2列を1列に切り替える ブレイクポイントの設定 601px以上は2列。600px以下は1列。 See the Pen 【CSS】table
2020.3.26
【HTML】UTF-8だったら、機種依存文字（環境依存文字）は問題なく使えます
機種依存文字は使っていいのですか？ UTF-8（文字コード）の場合は、機種依存文字（環境依存文字）が問題なく使えますよー 機種依存文字（環境依存文字）って何？ 機種依存文字（環境依存文字）とは、WindowsやMacなど
2019.12.18
【jQuery】固定した背景画像がスクロールで切り替わる実装サンプル（スマホでも切り替わります）
スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。 CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQuer
2020.8.28
【jQuery】クリッカブルマップ『RWD Image Maps』を使いこなせば、レスポンシブでもズレませーん
スマホだとクリッカブルがズレるのー！ そんな時には、『RWD Image Maps』を使いましょうー もくじ（実装サンプル） 【サンプル】まるでクリッカブルしてみた もくじ（使い方） 『RWD Image Maps』のダ
2024.4.4
【jQuery】 ローディング、実装サンプル集
ローディングをまとめてみました。おしゃれなサイトさんはローディングを組み込んでいるなー、と思う今日この頃です。意外と簡単なのでお時間ありましたら組み込んでみてくださいませ。 ローディングを設定したいのですが難しいですかー
2020.1.8
【CSS】Flexboxの使い方と実装サンプル集
ふれっくすぼっくすってなんですかー 楽しく言うとちょっとしたコーディングダンスですー Flexboxの基本 親要素（コンテナ）があって子要素（アイテム）がある。入れ子とも呼ばれてたりします。親要素（コンテナ）がないとフレ
CSSflexbox
2020.2.21
【jQuery】iOS（Safari）だと100vhが少しはみ出てしまう対策
あ、iPhoneで見るとちょっとズレてます！ そんな時はブラウザの高さを自動で取得しちゃえばOKですよー もくじ 画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策） 『slick』を使って全画面表示
2020.1.1
【CSS】スマホでリンクをタップした時に色を変える方法
スマホでタップ！ 色変わる！ 実装サンプル a要素に『ontouchstart』を追記して『a:active』に色を指定します。 See the Pen 【CSS】スマホでリンクをタップした時に色を変える方法 by 12
2020.5.1
【JavaScript】画像を遅延表示させる『lazysizes』の実装サンプル集
軽くなるんですかー？ 軽くなりますよー 【サンプル】デフォルト 画像（img）に「lazyload」というクラスを付けます。遅延表示されると「lazyloaded」というクラスに変わります。※ Chromeの検証ツールで
JavaScript
2019.12.4
【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』の実装サンプル集
うまく動きませんー うまく動かしましょうー 機能をフルに使う See the Pen 【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』サンプル（デフォルト） by 125nar
2019.2.22
【jQuery】プルダウンメニューでページ内リンク
プルダウンメニューで ページ内をスクロールさせてみましょう もくじ 実装サンプル メモ さいごに 実装サンプル See the Pen プルダウンメニューでページ内リンク by 125naroom (@125naroom
2019.1.17
【CSS】プラスとマイナスをつくる
プラスってCSSで作れますかー？ 作れますよー プラス See the Pen CSSだけで、プラスをつくる by 125naroom (@125naroom) on CodePen. HTML CSS マイナス See
2021.9.1
【jQuery】アコーディオンでおしゃれなQ&Aを作ってみる
おしゃれなQ&Aを作りたいのですよねー こんなんどうでしょー アコーディオンでおしゃれなQ&Aを作ってみる 今回のテーマ。 transitionで簡単なアニメーションをつけてみる。 See the Pen
2018.10.5
【CSS】タブレット、スマホ表示の時は:hoverを不要にする
あ、:hoverが残ってる。そんなときの記述。問題点は、iPad Proのような大きなタブレットは悩むところだったりしますが。 CSS サンプル iPad Pro横向きサイズの「1367px」以上を指定。PCの画面を縮め
2020.1.15
【CSS】簡単に固定できるposition: sticky;の実装サンプル集
なにかと使える sticky！（スティッキーと読みます） 実装サンプル、ヘッダー（ナビにも使える） See the Pen 【CSS】position: sticky; – ver.01 by 125naro
2020.5.8
【2020年最新】参考になるWebデザインのギャラリーサイト
サイトのデザインって難しいですー そんな時はギャラリーサイトを参考にしましょうー おすすめ WEBサイトを作るとき、参考になるまとめサイトさんです。いいなと思うサイトの掲載依頼もできたりするので、いろんな企業さんも結構使
デザインのこと
2019.3.20
【WordPress】プラグインなしで人気記事（ランキング）を載せる
人気ランキングページを作りたいです 作りましょうー プラグインを使えば簡単ですが ワードプレスでランキングを載せるならプラグインを使うほうが便利だと思います。ただ少し重くなったりします。 このサイトのランキングページはプ
2019.12.19
【CSS】背景画像を固定したおしゃれなLP（ランディングページ）を作ってみよう
ランディングページを作るのですか？ ちょっと作ってみましょうー 実装サンプル See the Pen 【CSS】Fixed background full (Responsive) by 125naroom (@125n
2021.5.11
【2021年最新】参考になるWebデザインのギャラリーサイト
おしゃれなデザインを作りたいのですよー まずはギャラリーサイトを参考にしてみましょうー おすすめ Webデザインって煮詰まる時はとっても煮詰まりますよね。煮詰まりすぎた時には、ギャラリーサイトさんを参考にしましょう。 サ
2019.9.26
【CSS】input、textareaのCSSを初期化する（iOS対策）
ちょっとメモですー よく忘れてしまうのでメモですー なぜ初期化？ iOS Safariではのフォーム要素（input,textarea）がデザイン通りにならないとこがあります。iOS Safariのデフォルトスタイルが優
2019.12.11
【WordPress】知ってる？『options.php』でいろんな設定ができるんだって
options.phpってなんですか？ いろんな設定ができる隠しページです options.php（隠しページ）の開きかた options.php（隠しページ）は、ダッシュボードのメニューからはアクセスできず、直接ページ
2019.4.18
【CSS】css-doodle を使って雨を降らせてみる
雨だー css-doodleで雨を降らしてみますねー サンプル See the Pen <css-doodle> Rain by 125naroom (@125naroom) on CodePen. css-
2019.10.9
【jQuery】チェックボックスにチェックを入れるとボタンが活性化する
利用規約に同意（チェック）する！ 申し込みボタンが活性化！ もくじ 実装内容 実装サンプル メモ さいごに 実装内容 同意する（利用規約とか申し込み規約とか） 複数のボタンが活性化される（応募ボタンとか申し込みボタンとか
2019.4.8
【CSS】ホバーエフェクト実装サンプル集（画像編）
画像のホバーってできますか？ できますよー サンプル 使えそうなホバー（:hover）さん。画像編です。LP作成時に役立ちます。 See the Pen 【CSS】ホバーエフェクト実装サンプル集（画像編）- image
2019.7.17
【jQuery】テキストをクリップボードにコピーする方法のあれこれ
クリップボードにコピーする。 簡単かなと思ったけど、とても難しかったです。 ブラウザによって全然挙動が違うことに驚きました。 いろいろ試してみた結果をまとめています。 アドレスをコピーできたらいいなとか、たまにですが あ
