スマホ・タブレットのさまざまなデバイスの表示チェックに対応！レスポンシブの確認ができる無料オンラインツール -.resizriPhone 4, 5, 6, 6+をはじめ、Android各機種のスマホ、iPad, Surface, Kindleなどのタブレットのさまざまなスクリーンサイズをエミュレートし、それぞれのサイズでWebページがどのように表示されるかチェックができるオンラインツールを紹介します。
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
【必読】あなたのサイトはどれくらい嫌われてる？スマホユーザーが嫌う10のこと
＜質問＞ スマホで当社サイトを閲覧する人が増えたので、スマホ対応にしました。 ユーザーの利便性向上を狙ったのですが、スマホ対応後も、社内の人からなんとなく使いづらいと言われてしまいました。 文字が大きくなり文章も読みやすくなったのに、何が使いづらいのかイマイチ要領を得ません。どこを変えればいいですか？ ＜回答＞ 文字が読みやすいというのは、利便性の一つに過ぎません。またスマホはＷＥＢを閲覧する以外にも、電話をかける・地図アプリを使う等、様々な機能を備えた端末です。 スマホの利用シーンを具体的に思い浮かべると、注意すべきポイントが多くあります。今日はスマホユーザーが嫌う１０個のことを紹介します。 ① リンク箇所が一目で判らないと嫌われる スマホでは、リンク箇所が一目で判らないと、ユーザーは迷ってしまいます。ダイレクトに言葉で表現したり、判り易い色のボタンやバナーを用意したりするなどの配慮が大
HTMLの特殊文字 ： IT用語辞典
▼ ご意見やご指摘、追加希望用語などはこちらからお送りください (個別にお返事はできかねますのであらかじめご了承ください) 当サイト「IT用語辞典 e-Wordsイーワーズ」はIT（Information Technology：情報技術）用語のオンライン辞典です。コンピュータ・情報・通信などを中心とする各分野の用語について、キーワード検索や五十音索引から調べることができます。用語の意味や定義、概要や要約、略語や別表記、英語表記や綴り、フルスペル、読み方や発音、仕組みや役割、歴史や由来、語源、構造や構成、要素、特徴、機能や性能、諸元、規格や仕様、標準、原因や要因、手法や方法、方式、種類や分類、利点やメリット、欠点やデメリット、問題点、対義語や類義語との違い、用例や事例、具体例、画像や図表、関連用語、外部資料や別の辞典による解説へのリンクなどを掲載しています。 当サイトは株式会社インセプトが制
なぜ、中小企業はホームページからの集客に失敗するのか？
中小企業の約7割が自社ホームページを開設しております。しかし、ホームページをどのくらい活用できているのでしょうか？ 総務省がまとめた2014年版中小企業白書では、「販売客数が大幅の増加したと回答したのは、わずか3.7%」に留まります（下図）。 弊社でも「ホームページが売上に繋がらない・・・」というご相談をよく頂きます。上手く行っている企業とそうでない企業、その違いは何でしょうか？ ホームページからの集客に失敗する中小企業の特徴 業者に任せれば売れるサイトになるだろうという幻想 ウェブ制作会社に対して「なんとか安くして！」が口癖 任せたはずのウェブ担当者に対して社長がつい口を出してしまう 営業社員は評価されるのに、ウェブ担当者は評価されてない？ ホームページのデザインが社長の自己満足。目的は何処へ？ ネット集客の仕組みやSEO等について学ぼうとしない 経営者仲間や業者の言葉を鵜呑みにしてしま
403 Forbidden
＼閉鎖予定のサイトも売れるかも？／ アクセスがないサイトもコンテンツ価値で売れる場合も… ドメインの有効期限を更新してサイト売却にトライしてみましょう
文字コード地獄秘話 第1話：Unicodeにおける全角・半角 - ALBERT Engineering Blog
ごあいさつ 皆様はじめまして、文字コードおじさんです。細々とカメラ屋を営んでおりましたが、エンジニアとしての技量を評価され、ALBERTのシステム開発・コンサルティング部で働くことを許されました。特技はサーバーの統廃合です。 今回は最初ということですが、Unicodeにおける全角・半角の取り扱いについて触れてみようと思います。なお、さも連載するかのように第1話と銘打っていますが、上層部の無慈悲な裁決によっては1話打ち切りもありえますので、その際はご容赦ください。 固定観念を捨てよう 「全角50文字、半角100文字まで」といったような文言を見かけたことがあると思います。 特にUnicode以前のレガシーな処理系では全角文字に2バイト、それ以外は1バイトという割り当てが慣習となっていました。 このため、「全角=2バイト文字、半角=1バイト文字」という観念が世間に定着しているのが現状です。 しか
[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
レスポンシブWebデザインのためのリソースをまとめたWebサイト・This Is Responsive
レスポンシブなWebデザインを 作るときに役立つ情報やツール などをまとめているWebサイト、 This Is Responsiveをご紹介 します。情報はかなり出回って いるのでこうして纏められると 助かります。 レスポンシブWebデザイン向けリソース集です。 メニューはPatterns、resources、newsで、それぞれレスポンシブなWebデザインを作成する際に役立つ情報が纏められています。 ↑ 例えばPatternsではレイアウトやナビゲーション、フォームなどの情報を網羅。codepenでデモも作成されています。 ↑ 役立つツールなどもてんこ盛り盛り。 newsはtumblrで新鮮な情報を教えてくれます。覚えておくと重宝しそうですね。 This Is Responsive
Webサイト制作でつまずきがちな解像度に関わるあれこれ │ Design Spice
アプローチ方法は違うものの、このdipと先程のデバイスピクセル比はほぼ同じ目的を持った機能です。 参考：Androidレイアウトの単位 – dpについて掘り下げる – アンテナ立てて viewport 仮想的なウインドウサイズです。 viewportがないと仮定した場合、デバイス幅320pxのiPhoneでインターネットにアクセスした時のウインドウサイズは320ピクセルとなり、通常のサイトを閲覧するには不便です。 そこで仮想的に大きいウインドウサイズとすることで、通常のサイトでもひと目で情報が見え、閲覧性や操作性を高まります。 viewportのデフォルト値は980ピクセルです。 （※iPhoneは980ピクセルで間違いないのですが全てのスマホで980ピクセルでしょうか？ 情報が見つからなかったので知ってる方は教えてください） また、viewportの数値はサイト側で指定できます。 スマホ
無料でアイコン・グラフィック素材などをダウンロードできる「Icon Deposit」
オシャレなアイコンを使うと味気なかったスクリーンが急に華やぎますが、アイコンや背景素材などのグラフィック素材が無料で使用できるサイトが「Icon Deposit」です。新着順の他、人気順に並べ替えることができ、自分好みのスタイリッシュな素材を見つけてダウンロードすることが可能。また、アカウントを登録して自分の作った素材を公開することもできます。 Welcome to the Icon Deposit どのような素材がダウンロードできるかというと、以下がその一例です。 ◆01．Micro Icon Set 16×16のPSDファイルアイコンが110個入ったアイコンセット。販売、再配布は不可ですが、個人利用は可能です。 ダウンロードする際はページ右上の「Download This！」をクリックします。 ◆02．Shiny Social Icons (PSD) こちらは商用利用可能。PSDファイ
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
意外と説明できない･･･なぜリンクの色が優先されるのか調べてみた
こんにちは湿気でつやつやてかてかの井畑です。 今回はCSSのリンクの色についてふと疑問に思うことがあったので、調べて記事にしてみました。 調べてみると、何て事はなかったのですが(爆)目から鱗というかなるほどーと思うことだったので、皆さんの脳みそのしわの一つにでもなれば幸いです。 それではどうぞー！ aのリンク色はなぜ親要素から継承されないの？ 僕が疑問を持った点を説明します。まずはコチラをご覧ください
Helveticaの代わりに使える30のフォント
世界中で愛されている永久定番級のフォントといえばHelvetica（ヘルベチカ）、デザイナーじゃなくともお馴染みのフォントです。今回はHelveticaは余りにメジャーすぎてちょっと抵抗がある、、、というひねくれモノのあなたのためにHelveticaの代わりに使えるフォントを30種類紹介した記事を。 — SEO Japan Helveticaは筋金入りの書体だ。明確さ、順応性、徹底的な完璧さを持つそれは、スイスのデザイン文化の証だ。この有名な書体は、数えきれないほどの理由から愛されている。それ自体には何の個性もないために、どんな気持ちや感情や心象も受け入れることができる能力もその1つだ。 Helveticaは私たちの最高のリスペクトに値するが、Helveticaには叫ぶ必要のある問題がある。あまりに多くのデザイナーが永遠にそれに固執しているのだ。そしてそれは、他の全てのサンセリフ体に対して
スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」:phpspot開発日誌
DropKick - a jQuery plugin for beautiful dropdowns スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」。 次のような白と黒のデザインでドロップダウンを実装できます。単なるselectボタンを $('.default').dropkick(); な感じで初期化してあげるだけで簡単。 黒のピカピカした感じもいいですが白のプレーンなデザインもいいですね カスタムテーマをCSSで作ることもでき、作り方はページ内で解説されています 関連エントリ 通常のフォームを瞬時にAjax化できるjQueryプラグイン「ALAJAX」 フォームをカッコよくするjQueryプラグイン集１５ フォーム要素をクールにするためのjQueryプラグイン集
jQuery Mobileのリストでデフォルトの高さのリストにサムネイルを高さ一杯に含める - かちびと.net
ちょっと意味不明なタイトルですが。 jQuery Mobileでリストを書くときの Tipsです。昨日ちょっと個人的に話題 に上がったのでメモ的に記事にします。 最近はすっかりJQMの話題が減っていた ので丁度いいですね。 というわけで備忘録的な記事。jQuery Mobileの話です。触ったことがある方向けですかね。普通のリストの高さに合わせてサムネイルを含めます。正しい方法かどうかは知りません。 これが普通のリストです。このマークアップは以下のような感じ。 <ul data-role="listview"> <li><a href="example01.html">foo</a></li> <li><a href="example02.html">bar</a></li> </ul> listviewというルール名をdata属性に与えればリスト化します。 画像付きにしたい・・けど こ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
https://design-spice.com/2012/06/13/responsive-web-design-image/