人気の記事ランキング

ん、ハンバーガー？ 三本線がハンバーガーに見えるからってことらしいですよ クリックエフェクト サンプル集 いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...

slick（スリック）の使い方をまとめてくださいー わかりましたー よく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。 いろいろありますねー いろいろあるのでまとめましたー アコーディオン、シンプル版 See the Pen アコーディオン、シ

...

jQueryを使うとするするとスクロールして移動させることができます。視覚的にもとても良いのでおすすめです。また、グローバルメニューの固定などの影響で移動先が隠れてしまった（ズレた）時には簡単に調整することができます。

...

jQueryの遅延（少し遅らせて表示させる、最近よく見かけるあれです）プラグイン『inview.js』の使い方と、制作に役立つ実装サンプルをまとめました。CSSのアニメーションと組み合わせることでサイト制作の幅がとっても

...

ボタンだー いろんなボタンをまとめましたー しっかり企業系のボタン BUTTON シンプルなボタンデザイン集 シンプルなボタンデザイン集 シンプルなボタンデザイン集 シンプルなボタンデザイン集 シンプルな四角ボタン、左に

...

あのー、水玉模様の背景をCSSで作りたいのですがー なるほどー、できますよー。工夫次第でいろんな背景が作れます。いろんなパターンまとめましたー 背景パターン / 方眼紙 ver.1 See the Pen 【CSS】Ba

...

背景を2色ってできますか？ 『background』の『linear-gradient』をうまく使うとCSSだけでコーディングできますよー 半分、上と下 See the Pen CSSだけで、背景を2色にする、縦の半分こ

...

画像は使わないんですか？ CSSだけで簡単にできますよー 三角アイコン 疑似要素「:before」でテキストの横に三角アイコンをつけています。 See the Pen CSSだけで、三角アイコン by 125naroom

...

lのリストで①、②、③（丸数字）ってできますかー できますよー サンプル①、簡単バージョン See the Pen 【CSS】olのリストで①、②、③（丸数字）を表示させる、簡単バージョン by 125naroom (@

...

モーダルプラグイン『Remodal』の使い方と、制作に役立つ実装サンプルをまとめてみました。 シンプル設計で軽量なので簡単に使えます。以前はプラグインを使わずにモーダルにしていたのですが、あまりにも使い勝手がいいのでモー

...

tableの項目を固定したのですが、線が消えちゃいますー ちょっとした工夫が必要ですねー tableの『行』を固定してスクロールする（失敗作） See the Pen 【CSS】テーブル（table）の行を固定してスクロ

...

横スクロールー 横スクロールー 画像を横にスクロールしてみる 幅600px以下は横スクロールに設定してみました。（スマホでチェックしてみていただくとわかりやすいかと思われますー） See the Pen 【CSS】スマホ

...

slickを使って全画面表示のスライドショーってできますかー レスポンシブを考えて『background』で対応してみましょうー 【実装】全画面表示（background対応） しっかりレスポンシブ対応したいので『bac

...

jQueryを使って、スクロールの途中から追尾（fixed）、そして、指定の位置（class）で消える、というのを実装してみたいと思います。 なんだか複雑だー 理解できれば意外と簡単ですー 実装サンプル See the

...

少し複雑な『タブ切り替え』を実装してみました。 ▽今回の実装テーマ なんだか難しそうですねー できる自信がありませんねー もくじ シンプルなタブ切り替え 上下のタブの連動 下のタブを押すとスクロールして上にスクロールして

...

Lightboxプラグイン『Colorbox』の使い方と、制作に役立つ実装サンプルをまとめてみました。簡単に実装することができるのでおすすめです。（個人的には『PhotoSwipe』をおすすめしますが、jQueryではな

...

正直、簡単かなと思っていましたが、結構時間がかかってしまったので備忘録も兼ねて。ポイントは、「overflow: hidden;」と「overflow: visible;」です。 横幅いっぱいでー 並んでるスライドショー

...

するする動くと楽しいですねー 固定ヘッダーがある場合はクラスやIDを指定して高さ調整しましょうー JavaScript 固定のヘッダー（ナビ）がある場合はヘッダー分の高さを調整しなければなりません。レスポンシブだと高さが

...

スクロールすると固定した背景画像が切り替わる実装サンプルをまとめてみました。CSSだけで対応できると素敵なのですが『background-attachment: fixed;』がスマホだと効かないので、今回はjQuery

...

あのー、CSSだけで調整できますかー？ CSSだけでも調整できますよー 固定ヘッダーで隠れる（ズレる） こんな感じでズレてます。 See the Pen ページ内リンク（アンカーリンク）の位置がズレる（固定ヘッダーで隠れ

...

Lightboxプラグイン『fancybox3』の使い方と、制作に役立つ実装サンプルをまとめました。とってもモバイルファーストに設計されているのでとってもおすすめです。 モバイルファーストですねー 共有ボタンもありますよ

...

CSSだけで、LINE風の吹き出しの会話を作ってみました。何かとよく使います。やはりレスポンシブにコーディングするのは難しいですね。シンプルに疑似要素の「:before」「:after」を使ってコーディングしています。角

...

ローディングをまとめてみました。おしゃれなサイトさんはローディングを組み込んでいるなー、と思う今日この頃です。意外と簡単なのでお時間ありましたら組み込んでみてくださいませ。 ローディングを設定したいのですが難しいですかー

...

CSSで三角形を作ることは意外と簡単だったりします。では、レスポンシブな三角形ってどうでしょう？ あ、なるほど。と思ったので記事にしてみました。 うーん、『％』を使う！ ちがいまーす、『vw、vh』を使いまーす レスポン

...

X-UA-Compatibleってなんですかー 簡単に言うと、IE対策の記述ですー 『X-UA-Compatible』って？ IE（Internet Explorer）のドキュメントモードを指定することができる記述です。

...

tableを1列にレスポンシブしたいんですけどー CSSだけで簡単にできますよー 2列を1列に切り替える ブレイクポイントの設定 601px以上は2列。600px以下は1列。 See the Pen 【CSS】table

...

スマホだとクリッカブルがズレますー そんな時は『RWD Image Maps』を使いましょうー 【実装】丸でクリッカブルしてみました 画像サイズ（widthとheight）の指定は必須です。 See the Pen 【j

...

機種依存文字は使っていいのですか？ UTF-8（文字コード）の場合は、機種依存文字（環境依存文字）が問題なく使えますよー 機種依存文字（環境依存文字）って何？ 機種依存文字（環境依存文字）とは、WindowsやMacなど

...

別のサイトに新着記事を掲載したいのですが、アイキャッチ画像が表示されないですー なるほどなるほど、RSSフィードを取得する方法がシンプルでおすすめですよー デフォルト（標準）で出力されるフィードは？ ワードプレスのRSS

...

スクロールバーをオリジナルで作ってほしいって言われたんですけど、作ってみたらブラウザによって変わっちゃうんですけど何とかなりませんかねー？ 『SimpleBar』を使えば簡単にできちゃいますよー 【サンプル】縦スクロール

...

スマホでタップ！ 色変わる！ 実装サンプル a要素に『ontouchstart』を追記して『a:active』に色を指定します。 See the Pen 【CSS】スマホでリンクをタップした時に色を変える方法 by 12

...

ふれっくすぼっくすってなんですかー 楽しく言うとちょっとしたコーディングダンスですー Flexboxの基本 親要素（コンテナ）があって子要素（アイテム）がある。入れ子とも呼ばれてたりします。親要素（コンテナ）がないとフレ

...

おしゃれなQ&Aを作りたいのですよねー こんなんどうでしょー アコーディオンでおしゃれなQ&Aを作ってみる 今回のテーマ。 transitionで簡単なアニメーションをつけてみる。 See the Pen

...

あ、iPhoneで見るとちょっとズレてますー そんな時はブラウザの高さを自動で取得しちゃえばOKですよー 画像を画面いっぱいに表示する（ブラウザサイズを自動で取得してiOS対策） See the Pen 【jQuery】

...

うまく動きませんー うまく動かしましょうー 機能をフルに使う See the Pen 【JavaScript】スワイプができるlightbox系プラグイン『PhotoSwipe』サンプル（デフォルト） by 125nar

...

軽くなるんですかー？ 軽くなりますよー 【サンプル】デフォルト 画像（img）に「lazyload」というクラスを付けます。遅延表示されると「lazyloaded」というクラスに変わります。※ Chromeの検証ツールで

...

プラスってCSSで作れますかー？ 作れますよー プラス See the Pen CSSだけで、プラスをつくる by 125naroom (@125naroom) on CodePen. HTML CSS マイナス See

...

プルダウンメニューで ページ内をスクロールさせてみましょう もくじ 実装サンプル メモ さいごに 実装サンプル See the Pen Pull-down menu / Link in page by 125naroom

...

なにかと使える sticky！（スティッキーと読みます） 実装サンプル、ヘッダー（ナビにも使える） See the Pen 【CSS】position: sticky; – ver.01 by 125naro

...

CSSだけで流れるテキストって作れますかー？ できますよー。animationを使ってやってみましょうー。 流れるテキスト animationを使う。動きの速度調整が少し難しい。幅は指定する。全体幅も明記してもいいが、し

...

options.phpってなんですか？ いろんな設定ができる隠しページです options.php（隠しページ）の開きかた options.php（隠しページ）は、ダッシュボードのメニューからはアクセスできず、直接ページ

...

ランディングページを作るのですか？ ちょっと作ってみましょうー 実装サンプル See the Pen 【CSS】Fixed background full (Responsive) by 125naroom (@125n

...

あ、:hoverが残ってる。そんなときの記述。問題点は、iPad Proのような大きなタブレットは悩むところだったりしますが。 CSS サンプル iPad Pro横向きサイズの「1367px」以上を指定。PCの画面を縮め

...

利用規約に同意（チェック）するとー 申し込みボタンが活性化しますー こんな感じの依頼内容だったら 実装してみましょう See the Pen 【jQuery】チェックボックスのチェックを入れるとボタンが活性化する by

...

サイトのデザインって難しいですー そんな時はギャラリーサイトを参考にしましょうー おすすめ WEBサイトを作るとき、参考になるまとめサイトさんです。いいなと思うサイトの掲載依頼もできたりするので、いろんな企業さんも結構使

...

おしゃれなデザインを作りたいのですよー まずはギャラリーサイトを参考にしてみましょうー おすすめ Webデザインって煮詰まる時はとっても煮詰まりますよね。煮詰まりすぎた時には、ギャラリーサイトさんを参考にしましょう。 サ

...

ホバーってなんですか？ マウスオーバーともいいますねー opacity、一択だと思っていた 画像をホバー（マウスオーバー）すると光るやつ。ほんとは半透明にしてるだけだから透過して背景次第でなんだかなということがよくあった

...

人気ランキングページを作りたいです 作りましょうー プラグインを使えば簡単ですが ワードプレスでランキングを載せるならプラグインを使うほうが便利だと思います。ただ少し重くなったりします。 このサイトのランキングページはプ

...

ちょっとメモですー よく忘れてしまうのでメモですー なぜ初期化？ iOS Safariではのフォーム要素（input,textarea）がデザイン通りにならないとこがあります。iOS Safariのデフォルトスタイルが優

...