レスポンシブデザインで気をつけたい、電話番号の扱い - Qiita
レスポンシブデザインでWebページを制作する際、電話番号の扱いにいつも迷うのでまとめてみました。 電話番号の自動リンク機能を無効化する iPhoneやiPadに搭載されているsafariでは、ページ内の電話番号を自動でリンクに変換し、タップすることで電話をかけることができる機能が用意されています。 しかし、この機能は注文番号やIPアドレス、そのほか電話番号らしき数字で構成された文字列をすべてリンクしてしまうという問題があるほか、Android端末やChromeにはこの機能がないため、ユーザの混乱を避けるためにも無効化しておくのがベターです。 電話番号の自動リンク機能を無効化するには、head部に以下のように追記します。 <!DOCTYPE html> <html> <head> <!-- 電話番号の自動リンク機能を無効化 --> <meta name="format-detection"
jQueryの「$」やセレクタなどをサポート、jQueryの代替として利用できる超軽量スクリプト -Selector
jQueryは確かに便利ですが、すべての機能が必要かと言われれば、そうではない人が多いと思います。 「$」やセレクタなど、jQueryの機能をサポートしたjQueryの代替として利用できる超軽量スクリプトを紹介します。 Selector -GitHub 最新のjQueryのファイルサイズは、下記の通り。 jquery-3.2.1.js 270 KB jquery-3.2.1.min.js 90 KB そして、Selectorのファイルサイズは、1/4以下！ selector.js 65 KB selector.min.js 17 KB もちろん、jQueryの機能すべてが利用できるのではなく、オブジェクトやセレクタや関数に限られています。 サポートされているjQueryの機能 サポートされているjQueryオブジェクト $ サポートされているjQueryセレクタ add addClass
jquery.cookie.jsの使い方と簡単なサンプルを紹介します
今さらな感じもしますが、使う機会があったので忘れないように記事にしておきます。以前使ったことがあるのですが、そのときの記憶がほとんどなかったので、こういうのは残しておいたら自分のためにもなりますね。 まず、jQueryとjquery.cookieを読み込みます。ともにCDNになっているのでこちらでいいと思います。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> jquery.cookieを自分でダウンロードされる方はこちらから。
[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]
フォームのセレクトボックスは多くの選択肢を配置できる便利な要素ですが、他のフォームと操作性が異なるため一連の流れで入力しにくいのが弱点です。 セレクトボックスの操作性を改善し、デザインも簡単に変更できるスクリプトを紹介します。Quickの名前の通り、すぐに選択できるようになります。 通常のセレクトボックスの挙動 セレクトボックスは、タップとクリックの2つのオペレーションがあります。これはフォームの他の要素と操作性が異なり、ユーザーをフォームの一連の流れから外してしまうものです。 そこで注目すべき点は、通常セレクトボックスの選択肢の中にはより多く選択されるものがあることです。上記の例だと、「はい」「いいえ」が多いでしょう。 Quick[select]は、セレクトボックスの選択肢の中から、いくつかを表示させておくことができます。
![[JS]このアイデアは面白い！セレクトボックスの選択肢をすぐに選択できるようにするスクリプト -Quick[select]](https://cdn-ak-scissors.b.st-hatena.com/image/square/5062373ec67701c8d65ca6ffdfe6e9cb4dc3565f/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110901.png)
lightGallery
lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript. View on GitHub
ブラウザ全面を使用したページでスクロール位置を自動的に一定の場所にスナップさせる【jQuery連載14】 | HTML5でサイトをつくろう
最近のウェブサイト構造の1つに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル（単一）ページという構造もよく見られるようになりました。 シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐ事ができ、また最近のスマートフォンでのサイト閲覧においても、片手でスムースにスピーディに情報を得る事ができるので、とくに新商品、新サービスのキャンペーン系の特設サイトやランディングページに適した構造と言えるでしょう。 しかし、こういったシングルページサイトの構造は、どこからどこまでは1つの情報になるのかが分かりにくい場合があります。もちろん、デザインでそれを分かりやすく伝える事は大切でありますが、伝え手側がうまくユーザを誘導するようにすることも1つの方法です。今回は
動画と音声のコンテンツ - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
画像の遅延ロードでイライラを解消 TADAプラグイン
「TADA」は、画像の遅延ローディングを手軽に実装するプラグインです。ページを読み込んだときではなく、画像が見える位置までスクロールしたタイミングで読み込むので、ページを開いたときの待ち時間を短縮できます。 TADAプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 8以降、iOS／Androidのスマートフォンに対応しています。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、 TADAをGithubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。 利用するWebページのbodyの閉じタグ直前で、jQuery本体と、ダウンロードした「jquery.tada.min.js
レスポンシブのうまいアイデア満載！RWD対応のナビゲーションを実装するスクリプトのまとめ
Off Canvas, On Canvas, On the Flyなど、レスポンシブのさまざまなアイデアを備えたナビゲーションを簡単に実装できるスクリプトを紹介します。 ※各キャプチャはAm I Responsiveを使用して作成しました。 Slidebars (jQueryのプラグイン) Slidebars -GitHub デモページ Off Canvasタイプのナビゲーション、左右どちらからでもパネルをスライドさせることができます。 WordPressのプラグインも有り。 mmenu (jQueryのプラグイン) mmenu -GitHub デモページ On and Off Canvasタイプのナビゲーション、左右・上下からパネルをスライドさせることができ、モバイル端末向けのさまざまなエフェクトが用意されています。
こうめの“これから使える”jQueryプラグイン
圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。
要素の切り替えを美しく表現するプラグイン・エフェクト5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのモモコです。 今回は要素の切り替えや表示を美しく表現するCSSスタイル・JSプラグインやエフェクトを5つご紹介します。 要素の切り替えや表示を美しく表現するプラグイン・エフェクト5選 fullPage.js https://alvarotrigo.com/fullPage/ フルスクリーン表示のページを切り替えるプラグイン。 DEMOのシンプルな切り替えの他にも、ヘッダーを固定した場合や、動画を背景に表示する場合など様々な用途のオプションが用意されており、とても使い勝手が良さそうです。 Section Separators https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ 主にCSSとCSS3で装飾した要素ごとの区切り線がまとめられています。 約25種類ほど用意され
アニメーションに便利なJavaScriptライブラリTweenMaxを使ってみる（その1） | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。 こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。 というわけで、基本的な使い方を書いていきたいと思います。 とりあえず要素を動かしてみよう まずは公式ページからダウンロードしましょう。 慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。 <script src="js/TweenMax.min.js"></script> 基本的によく使うクラスとして、以下の4つがあります。 TweenLite TweenMax TimelineLite TimelineMax Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。 単純に要素
jQueryでスクロールするとヘッダーを固定させる
最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ応用できるかと思います。 デモはこちら 仕組みは、<header>の高さ分（デモでは80px）スクロールすると<nav>にfixedクラスが追加されることで固定されます。 header { width: 100%; height: 80px; color: #333; background: #EEE; } nav { width: 100%; color: #FFF; background: #333; } nav.fixed { position: fixed; left: 0; top: 0; } $(function() { //ロード or スクロールされると実行 $(window).on('load scrol
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
マジで簡単！！画像を使わず角丸を実現するjQuery Corner | バシャログ。
以前の記事でjQueryを使って簡単に角丸を作れるjQuery curvyCornersとして角丸を簡単に実現するプラグインをご紹介しましたが、もっと簡単に角丸を作るプラグイン jquery.corner.jsのご紹介。 こちらのプラグインでは、角丸の大きさの他に形状が多数設定できます。 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.corner.js" type="text/javascript"></script> そんでもって、角丸を設定します。 デフォルトの場合 <script type="text/javascript"> $('#sample').corner(
jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法【複数設置対応パターン】｜BLACKFLAG
以前に「jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法」 と題して、JSON形式でで外部HTML化したコンテンツ要素を 「もっと見る」ボタンで追加するUIを紹介しました。 当時公開したスクリプトでは「もっと見る」動作は ページ内で１つの設置のみの構成になっていたところ 1ページで複数設置を必要とした場面があったり、同様の要望もいただいたりしたので、 複数設置パターンのサンプルを再度紹介してみます。 サンプルを別枠で表示する ページをスクロールしていくと現れる「もっと見る」をクリックすると そのエリアの続きに追加で要素を読み込みます。 サンプルではページ内に2つの「もっと見る」エリアを設置しています。 左のエリアは28個、右のエリアは20個の要素を 5個ずつ追加表示しています。 全体構成についてまずはHTMLから。 ◆HTML <div class=
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」:phpspot開発日誌
stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレスにナビが固定されるあたりがクールだったりしますが、これを簡単に実装できます。 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 クールな円形ナビゲーションを作るチュートリアル
[JS]デモがバツグンにかっこいい！さまざまな要素がビューポートに表示される時にエフェクトを与えるスクリプト -onScreen
Scrollable Containers onScreenはさまざまなDOM要素に対応しており、パラグラフ、画像、コンテンツスライダーなどスクロールが可能な要素全てに利用できます。 スクロールして表示する際に、ちょっとだけCSSのエフェクトを加えるのかっこいいですね。 onScreenの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jquery.onscreen.min.js"></script> </head> Step 2: HTML onScreenを適用するエレメントは指定できるよ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
