スマートフォンサイトのコピー用inputにselect()はダメ
inputにコピー用テキスト スマートフォンサイトにコピーしてほしいテキストを表示するときにコピーしやすいようinputタグのvalueに設定することがある。これに加えてタップ時に全選択されるようにする場合はPCサイトならselect()がよく使用されるがスマートフォンサイトでは使用してはならない。 select()はiOSだと効かない select()はiOSだと効かないのでテキスト全選択を代わりに実行する場合はsetSelectionRangeを使用する。setSelectionRangeならiOSとAndroidの双方で使用可能。（バージョンが古いと効かないことも） 追記：iOSはコピーがうまくできないことが多い模様 readonlyも付ける inputタグにフォーカスするとキーボードが表示されて文字が編集できてしまうため間違えてテキスト部分を消してしまうことがある。 これを防ぐには
一定の時間経過したら等、時間でCSSを制御するスクリプト・「STIMED.js」
STIMED.jsは一定の時間経過等、時間でCSSを制御するスクリプトです。jQueryに依存します。指定方法は以下のような感じ。 stimed.style.create([ {target:'body', time:'00:00', property:'background-color', value:'#fff'}, {target:'body', time:'18:00', property:'background-color', value:'#000'}, {target:'body', time:'24:00', property:'background-color', value:'#fff'} ]);昼と夜でコントラストを変えたり、要素の色を変えたり、画像を変えたり、要素を動かしたり、とアイデアは豊富です。transition-delay等じゃサポートしきれない仕様に対応で
jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法｜BLACKFLAG
以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、 HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか 試しに作ってみたので紹介してみたいと思います。 まずは動作サンプルから。 「jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示 ページロードするとテキストが 1文字ずつタイプライターのように表示されます。 この動作の全体構成について まずはHTMLから。 ◆HTML <p class="split">jQueryでテキストを一文字ずつ読み込むサンプルテキストです。</p> HTMLでは通常の文章を構成する時と同じように テキストを＜p＞タグで囲ってあります。 サンプルでは＜p＞タグにクラスをつけていますが 特にクラスをつけることが必須ではありません。 もちろん＜p＞タグ以外で
jQueryでタブパネルを作るチュートリアル (1/3)
「タブパネル」はタブ（見出し）をクリックすると、パネル（タブの内容が書かれた部分）が切り替わるUIです。アコーディオンパネル（関連記事）と同じく、情報量に対して表示スペースが少ない場合に使われます。Yahoo!やlivedoorなどの大手ポータルサイトがトップページで採用していることもあり、現在では多くのユーザーが迷わず操作できるUIとして定着しています。 基本のタブパネルの作り方 タブパネルのHTML／XHTML（以下、HTML）は、タブ部分（見出し）とパネル部分（表示する中身）をul/li要素を使って別々にマークアップし、タブのul要素には「tab」、パネルのul要素には「panel」というclass名を付けます。 パネル部分は、タブが選択されたときに表示する内容をli要素で1つずつ記述していき（1タブ項目＝1つのli要素）、それぞれに「tab1」「tab2」……といった連番のid名を
jQueryでメニュー等の領域外をクリックした時に閉じるようにする - Qiita
思ったこと jQueryを使ってメニュー等の表示、非表示を切り替えるときにtoggleClass()とCSSを使ってメニューを隠したり隠さなかったりするというやり方はシンプルだけど、メニューの外をクリックした時もメニューが消えずにうっとおしかった。 ググった結果 何やらややこしいやり方しか書いてなかった。 やったこと 領域外クリックの検知 jQuery側 $(document).click(function() { $('#menu').hide(); }); これだけ。 問題点 このままでは表示した要素内をクリックするとその要素自体も消えてしまう。もともと非表示のメニュー等、消えても問題のない場合もあるが、殆どの場合は要素内をクリックして消えられては困る。 解決策 $('#menu').click(function() { event.stopPropagation(); }); の一行
【jQuery】slickのカルーセルスライダー実装方法とサンプル集｜Gimmick log
TOPjQuery 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 【jQuery】slickのカルーセルスライダー実装方法とサンプル集 公開日：2015.12.02 更新日：2023.03.19 jQuery, カルーセルスライダー 様々なレイアウトのスライダー、スライドショーを実装出来る slick の使い方をまとめました。 これまでも slider-proやcarouFredSelをご紹介しましたが、slickは両者のいいとこ取りという感じです。詳細は以下の機能概要をご覧ください。 slick.js配布元 サンプルページ slickの機能概要 レスポンシブ対応 横幅のブレイクポイントごとにスライドの表示数、スクロール数を変更可 （centerModeではスクロール数は1つで固定） タッチデバイス対応 IE8以上で動作（スライド数のドットの色は変化しない） 縦カル
ARCHECO inc. | UX/UIデザイン、アプリ、WEB、新規事業
UX Design & Consulting ARCHECO（アルチェコ）は、UXデザインの最先端の学術的知見と独自ノウハウを活かして、ビジネスの根幹を担う戦略策定、提供価値の定義、サービス設計から、アプリ/WEB/プロダクトのデザイン・実装まで行うUX/UIデザインコンサルティングファームです。 START UP BUSINESS UX/UIデザインを洗練する手法と、 新規事業を成功に導く手法は同様では ありません。ARCHECOは新規事業を 成功に導くにあたりMVP/PoC 開発（世界観を作ること）を重視 しています。MVP/PoC開発は 3つの取り組みで構成されます。 1. Pragmatic Strategy: 「1st break point」の定義 2. Impression Building: 「シードモック」の構築 3. UXD/HCD: UXデザイン、人間中心設計
Riot はミニマルで Web Components のような UI ライブラリ - Qiita
古典的な構成のサービスを AWS Lambda + S3 で動作するサーバーレスアーキテクチャで再構築し、そのフロントエンドに Riot を採用しました。 プロジェクトは WWD JAPAN.com として公開しています。 React や Angular などに代表される JavaScript の UI ライブラリのうち、Riot はミニマルな API と HTML 標準に近い文法を採用しているのが特徴です。 Riot はコンポーネントベースの UI 開発から複雑さを取り除き、楽しさを与えます。 TL;DR Riot はこれまでの UI ライブラリと比べて以下の点で異なります。 必要最小限の API 少ないボイラープレート Web Components ( HTML Template ) に似た文法 React のコードと比較してみます。 ToDo アプリケーションを React で書くと
2015年までにWebのフロントエンドが辿ってきた道 - Qiita
背景 僕が本格的にWebのエンジニアになったのは2014年頃からで、早いものでもう丸2年ほど経ってしまうことになります。 Webに転向してからは主にフロントエンドエンジニアとして勤務してきました。 よく言われることですが、最近のフロントエンドの趨勢は本当に早いです。 最初はキャッチアップに苦労したことを覚えています。 しかし段々と新しい何かを覚えることは苦でなくなり、今はこの流れに身を置くことが楽しいと思えるようになってきました。 激動の趨勢の中で、Webのフロントエンドエンジニアが口にするパラダイムは日ごとに変化しています。 この記事は元々社内向けに書いたものです。 色々なバックグラウンドを持つエンジニアと一緒にフロントの設計を考える場面で、共通言語を持つきっかけになればいいなー、という思いから書いたものですが、いい機会なので外向けに修正して公開してみます。 Webのフロントエンドを新し
JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
JavaScriptをめぐるパラレルワールド 〜Webデザイナーから見た今どきのフロントエンド事情〜｜dwango creators' blog（ドワンゴクリエイターズブログ）
どうも、ほそだです。ゴールデンウィークも終わり、暖かい空気を感じる季節になりました。 さてちょっと前に、こんな記事が話題になっていました。 You Don’t Need jQuery – Qiita （旧題：もうjQueryは必要ない） 元々は海外の方が書かれたものを日本語訳してくださったものですが、あらかた網羅されていて感服しました。実は今回、これと全く同じようなことをこのブログのネタにしようと考えていたのですが（jQueryでやってたことをjQueryを使わずにやってみた的な）、締切間近になってさあ書くぞってタイミングでここまで完璧なものを先に出されちゃったので、こりゃ勝てねえと泣く泣く断念したのですよね。。 それで急遽新たにネタを考えなきゃいけなくなったのですが、これに対するネット上での反応がけっこう興味深いなと思って見ていました。 「もうjQueryは必要ない」に関するみんなの反応
MVCモデルの概念を漫画で解説してみる | hijiriworld Web
ユーザーインタフェースをもつアプリケーションソフトウェアの多くは、「MVC」モデルに基づいて設計されています。 MVCでは、プログラムを、Model（モデル）、View（ビュー）、Controller（コントローラ）という3つの要素に分割し、お互いに呼び出し合って処理が実行されていきます。 この概念を漫画で表現したら分かりやすのではないかと思い、トライしてみます。 設定 MVCモデルで設計された「なにかの申し込みシステム」があるとします。 処理の内容は、なにかの申し込みをしたユーザ情報をデータベースに格納する、だけです。 なにかの申し込みシステムの構成員 第1話 – なにかの申し込みシステムの日常 なにかの申し込みシステムの処理の流れを覗いてみましょう。 おや？ユーザが申し込みにやってきましたよ… このように、モデル、ビュー、コントローラは、お互いに協力し合いながら処理を行っています。 誰
ScrollReveal 4
JavaScript library to animate elements as they scroll into view.
横に開くドロワーメニュー：Drawer Slide Menu
スマホサイトのメニューによくある、左から開くコンテンツ。 Drawer Slide Menu で作りました。 Drawer Slide Menu こちらの「Download」からダウンロードして、 「jquery.mobile-menu.js」をheaderに記述（JQueryとともに）。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="jquery.mobile-menu.js"></script> bodyにボタンと、左側の中身を記述 <!-- トリガーボタン --> <div id="slide_btn"></div> <!-- 開閉メニューの中身 --> <div id="sllide_menu"> <nav> <ul> <li><a hr
ドロワーメニュー（ハンバーガーメニュー）を簡単な jQueryとCSSだけで作る手順
ヘッダー部分のグローバルナビゲーションを、スマホビューの縦持ちの時だけドロワーメニュー（ハンバーガーメニュー）にしたくて、プラグインや既存ライブラリなどを使わない、ごくシンプルな作り方を調べました。 jQuery の「.toggleClass」を使えば、あとは CSS だけで簡単に作れることがわかったので、メモっておきます。 デモを作りました。（画像クリックで別ウィンドウで開きます） スマホで見るならこちらから→ 本日のINDEX クラスを付与・解除できる jQueryの「.toggleClass」 ドロワーメニューの動作の原理 ドロワーメニューの作り方 ハンバーガー部分のCSS参考サイト クラス名を付与・解除できる jQueryの「.toggleClass」 ヘッダー部分のグローバルナビゲーションは、<nav>要素の中に <ul>を仕込んで作ります。 これを、PCビューの時は表示させて、
モーダルウィンドウ（ポップアップウィンドウ）をjQueryとCSSで簡単に作る手順
プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます！ jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須
軽量！Slidebars.jsの使い方～スマホでスライドするドロワーメニュー
スマホでスライドして表示するドロワーメニュー、jQueryプラグイン「Slidebars」の使い方、設置方法です。 ドロワーメニューのjsはいろいろありますが、このSlidebars.jsが簡単に設置でき、しかもjsファイルサイズは1k程度と軽量なのでページの表示の負荷も軽いです。設置にはほかにjqueryとcssが必要です。 それではまずは サンプルデモ 公式サイトから必要ファイルをダウンロード http://plugins.adchsm.me/slidebars/ 追記： ※このページに記載されている内容はバージョン0.10.3です。最新のバージョンとは違っていますので注意してください。 バージョン2の基本的な設定方法をまとめました。 ⇒Slidebars.js【Ver2】の使い方、設定方法～バージョンが変わってます Slidebarsの使い方、設定方法jQueryとSlidebars
WordPressでjQueryを使う一番シンプルな方法
WordPressを使ってサイト構築するとき、jQueryを使ってカスタマイズすることが多いと思います。 このサイトでもAjax+pushStateなどの技術を使うためにjQueryを多用しています。 WordPressでjQueryを使う じつはWordPressにはjQueryもパッケージされているので、自分のサーバーにjQueryを置いたりGoogleなどのCDNを読みこまなくても、header.phpに<?php wp_head(); ?>と書けば必要に応じて勝手に読み込まれます。 しかし問題があります WordPressにパッケージされているjQueryは、WordPressの独自仕様になっていて、ちょっと使いづらいんです。 具体的には、jQuery.noConflict();という関数が実行されていて（参考記事）、要はjQueryと似たような記法のjQuery以外のJavaSc
WordPressのwp_headでjQueryを読み込ませないようにする方法 | ダイナシイエスタデイ
今日はちょっと備忘録。WordPressのwp_headタグで読み込まれるWordPress内のjQueryを読み込まないようにする方法。古いバージョンのjQueryじゃないと動かないプラグインを使う場合、WordPress内のjQueryを読み込んでしまうとうまく動いてくれません。そんなときにWordPress内のjQueryを読み込ませず、自分で用意したjQueryを読み込ませることができます。 header.phpに以下のコードを追加します。wp_headの前に書きましょう。 <?php wp_deregister_script('jquery'); ?> これでWordPress内のjQueryではなく外部のjQueryを読み込むことができるようになります。下記はWordPress内のjQueryを読み込まず、GoogleのCDNからjQueryを読み込む場合の例です。 <?php
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドを楽にするために
