WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
Googleから学ぶ ヌルヌルサクサクなスライドメニュー - Qiita
スマフォwebページのスライドメニュー アプリでは当たり前のように実装されているスライドメニューですが、webページではなかなか使い心地のよいスライドメニューが実装されているのは見かけません。 スマートフォンのブラウザではjavascriptでのアニメーションはどうしてもガタガタになってしまうし、ちらつきやスクロール制御のめんどくささからもうwebページでネイティブアプリ並のスライドメニューを実装するなんて無理と思っていました。 Facebookのwebページですらボタンの反応は悪いしアニメーションも動かないし最悪です。 一方Google先生はパーフェクトなスライドメニューを実装していた さすがGoogle先生！ 俺達に出来ないことを( Googleのスライドメニューは以下の点でパーフェクトです。 スライドのアニメーションがとても滑らか・ちらつかない ボタンの反応にストレスを感じない メイ
ホバー時にほわっとアニメーションするボタン | KRUZ-GRAPHIX
Most common ways to find helpful and reliable things to buy There are people in Australia who know what they can buy through the various online stores and the sellers. They usually make sure to find out nearly all kinds of informative resources to help them decide better. Though most of the time people rely on online resources to help them compare what they are going to get through the available s
CakePHP2.0.3でJSファイルやCSSファイルを読み込む
CakePHP2で外部JSファイルとCSSファイルをHEADタグ内で読み込む方法です。 CakePHP1.2やCakePHP1.3と多少変わっています。 最初にwebrootフォルダのフォルダにCSSファイルとJSファイルを入れておきます。 /app/webroot/css → CSSファイル /app/webroot/js → JSファイル 次に、レイアウトファイルのHEADタグ内で$scripts_for_layout変数を出力します。 /app/View/Layouts/default.ctp 次にViewファイルの上辺りで以下の内容を記述します。 以下の例ではscript1.jsとscript2.js、import.css、sub.cssが読み込まれます。 読み込みたいファイル名は合わせて修正してください。 (/app/View/ControllerName/action_name
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い EXPANDING OVERLAY EFFECT / Maka-Veli .com
CodropsでMARY LOUという方が書かれていたんですが、可愛かったのでご紹介。 CSS/JS/で作られていて、デモでは天気予報を作られているんですが、アイコンはフォント。オーバーレイエフェクトもとても良い感じです。 メトロっぽいデザイン、増えてきましたよね。 個人的には結構好きなんですが、色と枠内のバランスをミスると一気に下品な感じになりがちなので結構難しい・・・ ダウンロードも出来ます。詳しく知りたい方はこちら PUTTING CSS CLIP TO WORK: EXPANDING OVERLAY EFFECT / Codrops http://tympanus.net/codrops/2013/01/17/putting-css-clip-to-work-expanding-overlay-effect/ メトロライクなUIと大胆なオーバーレイエフェクトが気持ち良い
HTML5 × CSS3 × jQueryを真面目に勉強 – #11 Path風サークルメニューを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPathにある、あのサークルメニューを再現してみたので、ここにその手順をまとめておくとします。 Pathはネイティブアプリなので、JavaないしObjective-Cにて実装されていますが、こちとらはそんなハイソなテクニックは使わずに、JavaScriptとCSS3だけで行けるところまで行ってみます。 はじめに とりあえずサークルメニューの要件を大まかに書きだしてみました。 トグルボタンをクリックしてメニューアイテムの表示/非表示を切り替えたい 各メニューは円周上に均等に配置された状態で表示させたい 表示/非表示はアニメーションで切り替わるようにしたい メニュー数の増減には柔軟に対応できるようにしたい その他、各メニューの間隔や角度、表示時の距離などはオプショで指定できるようにしたい ひとまずこんなもんで良いでしょう。次にこれらの要件をどのように実装す
JavaScriptでCSSのプロパティを削除する（IEのfilterでClearTypeが無効になるバグ対策）｜TechRacho by BPS株式会社
baba 高校時代から趣味でプログラミングを始め，そのままずっとコードを書いています。2010年SFC卒業，在学中にBPS入社。ゲームなどの趣味プログラミング，Webシステム，スマホアプリ，超縦書エンジン(C++/Chromium)，Webフロントエンド(TypeScript/React)などを主にやってきました。最近は自社製品(超シリーズ，くんシリーズ)の開発に関わるお仕事が中心です。管理業務もしますが，ゆとりプログラマーなので気楽にPCに向かっているのが好きです。 情報処理技術者試験(16区分 + 情報処理安全確保支援士試験)，技術士(情報工学部門)，中小企業診断士、Ruby Programmer Gold，AWS Certified Solutions Architect - Professional，日商簿記2級，漢検準1級。情報処理技術者試験 試験委員(2021-)。 babaの
[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js
普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.js - The jQuery Slider Plugin with Infinite Style [ad#ad-2] Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。 オープンソース。 すべてのモダンブラウザをサポート。 スマートフォンなどのタッチデバイスをサポート。 古いブラウザでも機能します。 ※IE7とFirefox3.6でもテスト済み。 セマンティックなマークアップ。 Responsive Web Des
jsdo.it
We’re getting things ready Loading your experience… This won’t take long.
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
そんな訳で、現状イマイチ扱いに困るCSS3アニメーションについて学習した内容をまとめておくとします。 はじめに - CSS3のアニメーション機能 ひと口にCSS3アニメーションと言っても、その実装方法は以下の二種類に大きく分類されます。 Transition Animation Transitionは対象となる要素の始点と終点の状態をそれぞれ定義し、その二点間をスムーズに変化させることでアニメーションを実現させるという仕組みです。 対するAnimationは始点と終点だけでなく、二点間の任意のタイミングにキーフレームを配置してその時点ごとの状態をそれぞれ指定し、よりダイナミックなアニメーションを実現させることが出来る仕組みです。 両者似ているようで異なる機能ですが、この仕組みを混同せずにキチンと押さえておけば、これといって泥沼にハマることなく習得することが出来ます（たぶん）。 今回はTra
CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー - latest log
「CSS の ID 名や CLASS 名の単語の連結にハイフンを使うべき、キャメルケースとかアンダーバーとかダメ」的な主張を去年ぐらいにどこかで読んだ記憶があるのですが(うろおぼえ)、 /* たしか… これがオススメのスタイルで */ .hoge-huga-piyo {...} /* これとか… */ .hoge_huga_piyo {...} /* これはイケてない(らしい) */ .hogeHugaPiyo {...} 個人的には「ちょっとそれ CSS に寄り過ぎてて、視野せまくないかー」という考えをもっていたので、つらつらと書いてみます。 E:first-child や E[key|="value"] などのハイフンを前提とした構文に関してはもちろんありですよ。ここで取り上げてるのは、属性セレクタや擬似クラスセレクタについてではなく、IDセレクタ と CLASSセレクタ についてです
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと.net
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ
2013年11月22日 Webサイト制作, ユーザビリティ どのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ ナビゲーションメニューの設置ポイント すべてのページに 基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする -BoxJSとBoxCSS
ウェブサイトで使用する複数のJavaScriptとCSSファイルのHTTPリクエストを少なくし、圧縮・キャッシュするサービスを紹介します。 [ad#ad-2] 複数のJSファイルをまとめる -BoxJS 複数のCSSファイルをまとめる -BoxCSS 複数のJSファイルをまとめる -BoxJS BoxJSは一つのJSファイル（box.js）を利用し、モジュール式のローディングシステムで複数のJSファイルをロードできます。 BoxJS BoxJSの使い方 最初に、box.js(1.4kb)を外部ファイルとして指定します。 <script src="http://www.boxjs.com/box.js"></script> ロードするJSファイルを指定します。 Box('http://mywebsite.com/scripts/', [ 'plugins/jquery.js', 'plugi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者のためにメンテナンスと拡張に重点をおいたフロントエンド用の軽量フレームワーク -UIkit
オープンソースのWebアプリ開発向けコードエディター「Brackets」Sprint 23が公開
Adobe、HTML/CSS/JavaScriptでできた次世代コードエディター「Brackets」を発表
IDEA*IDEA 〜 とあるサービス運営者が学んだことをまとめるブログ