レスポンシブデザインのウインドウサイズの切替えについてまとめてみました
こんにちは。和田です。 ここ数日暑いですが皆様いかがお過ごしですか？ 私共は先日、アシアルのHP（ブログも）をリニューアルしました！ 皆さま見てていただけましたでしょうか？ まだの方は是非是非ご覧になってください。 http://www.asial.co.jp さて今回のアシアルHPはレスポンシブデザインを採用しています。 そこで今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特に最初に悩むウインドウサイズの切替えについて書こうと思います。 アシアルではウインドウサイズの切替えを、タブレットはPC版のHPをそのまま表示させ、スマホのみウインドウサイズを切替える。ということにいたしましたが、 皆様はレスポンシブデザインを作成される際どのようなウインドウサイズ（幅）で切り分けていますでしょうか？ 結構悩むところなのではないかと思います。 そこで、各デバイスのサイズの
アコーディオンまとめ8選！ | 株式会社LIG
(……きこえますか……きこえますか) Σ(◉◒◉)ん？ (……どうもです……はやちです(:3_ヽ)_) ？？？(◉◒◉)三(◉◒◉)？？？ (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お 俺にか……？？ (以前「スマホサイトに入れると使いやすくなる！おすすめjQuery4選！」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ ほほう Flexible Slide-to-top Accordion （矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
IEのバージョンごとの機能の違い、選定の目安 - ふろしき Blog
私はIEの中の人ではないので、IE開発者がどういう考えを持っているかはわかりません。しかし、断言して言えることがあります。最近のIEは各バージョンで明らかに意図したテーマを持ち、リリースされています。 各バージョンのテーマを、運用するシステムの目的と照らし合わせれば、定量的にどのバージョンを選択すべきかが導出できるでしょう。 本記事は、これから企業システムで扱うIEのバージョンを上げなくてはいけない場合、また誰かにIEのバージョンごとの違いを説明しなくてはいけない場合、費用面・技術面の制約を説明しなくてはいけない場合に、ヒントを与えてくれるかもしれません。 バージョン別評価サマリ バージョン別評価サマリでは、業務システムのクライアントとして扱われるIEが、各バージョンごとにどのような特性を持つかを超概算レベルで可視化しています。 項目は、長い目で見た費用効果を表す「コストパフォーマンス」、
クロスブラウザ対応を助けるJSライブラリ"Modernizr" - ふろしき Blog
Modernizrは、HTML5やCSS3などの新しいWebの標準がWebブラウザに実装されているか、汎用的なインタフェースを通じて確認することができるJavaScriptライブラリです。 ▼公式サイト http://modernizr.com ▼ダウンロード http://modernizr.com/download/ ▼Developper版（動作を試してみたい方向け。） http://modernizr.com/downloads/modernizr-latest.js ※注：そのままでは機能が不足するため、1章〜4章の解説通りには動いてくれません！ 以下は、簡単なコードのサンプルです。WebブラウザにCanvasの機能が備わっているか、確認することができます。 <script src="./js/modernizr.canvas.js"></script> <script> if(
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
カメラ初心者必見！イルミネーションを綺麗に撮影する４つのテクニック | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
ジンゴーべー♪ジンゴーベー♪サンタの国家予算は１人当たり５千円以内でお願いしたい！！３人の子持ちライター村上ですこんにちは。年を追うごとに高額になっていくサンタへの要求に真実を明かすことも出来ずに息も絶え絶えです。 息子（6）がね、純粋な目で「ママにもサンタさんが来るように、ママは新しい「いちがんれふ」が欲しいですって手紙を書いておくからね！！」っていうの。うん、でもお前妹に「WiiU」を要求させて、弟に「WiiUのソフト」要求させてるよね？トータルで軽く10マソオーバーするんだけどママ逃げ出してもいい？ さてそんな様々な思惑が交錯するクリスマスシーズンに向けて、今日はイルミネーションの撮影テクニックをお勉強しましょう。 ボッチでも寂しくないクリスマスの撮影テクニック コツその１ ピントを合わせてはいけない 失敗例 最近のデジカメは非常に優秀なので、すぐに笑顔や顔じゃないところを感知してピ
【Google公式】モバイル向けサイト改善のためのチェックリスト
[対象: 上級] Googleは、モバイル向けサイトを改善するために役立つチェックリストと動画を公開しました。 チェックリストの完全版を日本語に訳しました。 いずれ日本語版が出てくるかもしれませんが、早く知りたい人は参考にしてください。 なおチェックリスト中の参照先ページは、日本語ページがあるものは日本語ページヘ、ないものはそのまま英語のページへリンクしています（リンク先の日本語訳まではさすがに厳しい）。 ステップ1: ユーザーをいらいらさせないようにする 邪魔になる余分なウィンドウをすべてのモバイルユーザーエージェントから取り除く [Googleの推奨 / 関連記事] 閉じるのが難しいJavaScriptのポップアップ オーバーレイ。特に、アプリのダウンロードを勧めてくるもの（代わりとして、iOS 6以上の Smart App Bannersのようなバナーやそれに準ずるものや、サイドバー
マルチデバイス対応のウェブ開発を効率化する「Adobe Edge Inspect」の使い方
スマートフォン開発事情 スマートフォン向けウェブサイトの開発というと、どのような現場を想像するでしょうか。PCでコーディングして、ファイルを更新するごとにスマートデバイス端末（以下、端末）を操作してウェブページにアクセス、表示確認をして、またPCにもどってコーディング、端末でリロード、といったフローではないかと思います。あるいは、問題を報告するために端末ごとに画面キャプチャを撮ってメール送信…という場面もあるかもしれません。いずれにせよ、ずらりと並んだマルチデバイス環境と格闘しているのではないでしょうか。 Adobe Edge Inspect（以下、Edge Inspect）は、この煩雑なフローを効率化する支援ツールでもあり、同時に強力な開発ツールでもあります。 検査対象のページを端末に表示し、リロードからキャッシュ破棄までの操作に加えて、撮影したスクリーンショットをPCに転送するといった
ブロガーなら知っておくべきGoogleアドセンスポリシーをまとめました - ラブグアバ
皆さんはGoogleアドセンス（AdSense）のポリシーについてどの程度ご存じですか？私の場合、自分でクリックするのはダメ、アダルトはダメ、1ページに3つまでしか表示させちゃダメ、という程度の認識でした。 でもGoogleはポリシー違反について非常に厳しいと聞きます。知らぬ間にポリシー違反してしまって広告配信停止されてはたまりません。 ここらで一度、きちんとポリシーを読んでおくかと思いひと通り目を通してみました。すると、え、こんなことも？と思えるようなこともポリシーとして明記されていました。 あまりポリシーを読んだことがない人は、数あるポリシーの中でも最低限知っておくべき点についてこの記事で知っておいてもらえればと思います。 Googleアドセンスで気をつけておきたいプログラムポリシーポリシーについては全て目を通しておき、さらに時々更新される内容についても常に把握しておきなさいとGoog
ハラハラでハードに使っているプレゼンや打ち合わせで活躍するアプリをご紹介 « ブログ｜東京のアプリデザイン制作会社｜株式会社ハラハラ｜harahara Inc.
プレゼンや打ち合わせで参加者の心を掴むのって重要ですよね。 制作工程の初期段階で時間短縮することでUI/UXの開発にじっくりと時間をかけたい、という思いもあり色々なアプリや手法を導入しています。 弊社で現在ハードに活用している便利なアプリを2つご紹介します。 Riflectorを使ってアプリ＆スマホサイトのプロトタイプをその場で共有 Reflector これをインストールすれば写真のようにiPhone/iPadのAirplayを通して現在使っているスマホの画面をPCにダイレクトに写すことができます。ページ遷移やジェスチャーもこれがあれば容易にクライアントに伝えることができますし知らない人からしたらこれ自体のパフォーマンスでグッと引き込まれることでしょう。 インストールしたらiPhone/iPadのホームタスクバーからAirPlayを選択すればあっという間にミラーリングが開始されます。あとは
Chromeのアドレスバーから自分のブログ記事を直接検索する - 太陽がまぶしかったから
photo by Aray Chen ブログをスタンド化するために ブログの記事がストックされてくると、新しい記事を書く時に同じような話を書いている事もありますし、アプリの設定手順なんかはブログに残しておいたものの方が丁寧だったりもします。 それで、自分のブログを検索する機会が増えていくのに対して、はてなブログの標準検索機能は使いづらいし、デザインもダサイのでCSSで綺麗にしたGoogleカスタム検索を使う方法を紹介しました。 http://bulldra.hatenablog.com/entry/2013/11/16/094824 Chromeのアドレスバーからブログを検索する とはいえ、自分で使う時にいちいち自分のブログのトップページを開いていたらタイムラグがありますし、PV数の半分が自分だったという事態にもなりかねません。そこで、Googleのアドレスバーを利用して自分のブログが直接
レスポンシブ動画も実装できるモーダルMagnific Popup｜こうめの“これから使える”jQueryプラグイン
「Magnific Popup」は、可変ウィンドウに対応した高機能なモーダルを実装できるjQueryプラグインです。 画像をLight box風に表示するだけでなく、ギャラリーや動画のモーダル表示にも対応しており、さまざまなエフェクトも用意されています。 また、スマートフォンで厄介なモーダル上のformの動作も問題なく動作しますので（Android 2.3／4.0／4.1／4.2で検証）、レスポンシブWebデザインで役立ってくれそうですね。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Magnific Popupを配布ページからダウンロードしましょう。Magnific Popupはgithubで公開されており、ページ右下の「Download ZIP」というボタンからダウンロードします。 最低限必要なファイルはdistフォルダの「jquery
WordPress のカスタマイズを始める前に知っておくべきこと
はじめに WordPress のカスタマイズを考えている方向けに以下の項目をまとめてみました。 自分自身が WordPress でカスタマイズを始めた頃に、知っていたら作業が捗っただろうと思われること WordPress サイト構築作業関連での私の個人的なお勧め WordPress を導入しようと考えているぐらいなので、IT系のスキルがそれなりにある読者を前提としています。 また、ブログ用途として使おうと考えている方向けです。 CSS 中心のカスタマイズがお勧め 世の中には自作テーマに関するブログ記事が溢れていますが、まずは標準テーマの Twenty Ten や Twenty Eleven をベースに CSS で外観を変更するのがお勧めです。 ご存知のように Web ページの論理的構造は HTML、視覚的な構造は CSS という役割分担になっていますが、ブログの論理構造なんてたかが知れてい
クリッカブルマップを使ったロールオーバー｜Webクリエイターネット
Category Javascript 1枚の画像に複数のリンクを設定する際"クリッカブルマップ(イメージマップ)"を使用することで、複雑な形でもリンク領域を指定できますので結構便利です。 ｢このクリッカブルマップ(イメージマップ)で、指定領域にカーソルを合わせた時に画像をロールオーバー出来れば便利かも｣と思ったことはないでしょうか？ ちょっとしたJavascriptで簡単に実装できますので、今回はその方法をデモページも交えて紹介しようと思います。 Keyword：クリッカブルマップ,ロールオーバー,Javascrpt ロールオーバー用のスクリプトを用意する rollover.js /* Rollover Script */ if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i <
まとめ：ThickBox の使い方 (記述例＆Tips) – attosoft.info
ThickBox は画像や動画など任意のコンテンツをポップアップ表示する jQuery プラグイン。Lightbox や fancyBox などと並ぶ代表的な人気スクリプトの一つ。すでに開発は終了しているが、その汎用性の高さやシンプルさから未だに多くの Web サイトで使われている。 そんな ThickBox の使い方 (記述例や Tips など) を体系的にまとめてみた。開発が終了して久しい ThickBox に関する説明ページを、今更ながらに作成した理由は主に次の 3 つ。 Auto ThickBox Plus を開発している関係で ThickBox の情報をまとめる必要がでてきた “thickbox” を含む検索キーでこのサイトにたどり着いてしまう人が非常に多い 未だに多くの Web サイトやソフトウェア (WordPress など) で採用されている ※ 注：このページのデモで使わ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
写真がうまくなる３６の法則 - ライフハックブログKo's Style
http://www.kome-suki.net/archives/4451
クリッカブルマップとポップアップウィンドウのコンビネーション | ブログ練習帳
