人気の記事ランキング

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

少し複雑な『タブ切り替え』を実装してみました。 ▽今回の実装テーマ 上下のタブの連動 下のタブを押すとスクロールして上にスクロールして移動する 外部ページからのリンクIDを可能にする。リンクIDのタブを開いた状態にする

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

プルダウンメニューで ページ内をスクロールさせてみましょう もくじ 実装サンプル メモ さいごに 実装サンプル See the Pen プルダウンメニューでページ内リンク by 125naroom (@125naroom

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

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

...

雨だー css-doodleで雨を降らしてみますねー サンプル See the Pen <css-doodle> Rain by 125naroom (@125naroom) on CodePen. css-

...

画像のホバーってできますか？ できますよー サンプル 使えそうなホバー（:hover）さん。画像編です。LP作成時に役立ちます。 See the Pen 【CSS】ホバーエフェクト実装サンプル集（画像編）- image

...

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

...

クリップボードにコピーする。 簡単かなと思ったけど、とても難しかったです。 ブラウザによって全然挙動が違うことに驚きました。 いろいろ試してみた結果をまとめています。 アドレスをコピーできたらいいなとか、たまにですが あ

...