★レスポンシブデザインで使うメディアクエリの設定方法とブレークポイント最適値について
スマホファーストでおまけ的にPC対応という案件が以前よりも増えていますが、やっぱり多いのはPC優先でスマホ表示も確保するというもの。で、このような複数デバイス間の表示を最適化する手法としては以下のものがあります。 モバイル用とデスクトップ(PC)用を別々に用意してアクセスする端末で切り替えるブラウザのウィンドウサイズによって表示内容を変える1はユーザーエージェント(何を使ってアクセスしているか)で判別する形式で、Wordpressではwp_is_mobile()という関数を用いてif文で条件分岐させれば簡単に実現可能です。 2はレスポンシブウェブデザインと言われ、メディアクエリを用いて制御する手法。これについては、Googleがモバイル フレンドリーなサイトを構築するガイドラインを出しています。 参考1: はじめる - ウェブマスター向けモバイルガイド ↑ 知らない人は必須なので目を通して
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表 - Qiita
用語解説 ポイント boundsやframe等で使用される論理的な画面サイズ。通常はこれを意識してプログラムを作成します。 ピクセル 描画が行われる論理的な画面サイズ。ピクセルパーフェクトな描画が必要な場合には、このグリッドに合うように描画を行う必要があります。 デバイス 端末に搭載された液晶の物理的なピクセル数。これが上記ピクセル数と一致しない場合には、ピクセルパーフェクトの描画は非常に難しくなります。 このサイトの解説がわかりやすいです。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions 拡大モード iPhone6, 6 Plusでは、画面設定から拡大モードが選択できます。 上記の表にまとめた通り、retinaの倍率はそのままで、ワンサイズ小さいiPhone相当のポイント数になります。 iPho
Chamo（チャモ）｜無料でカンタン高機能な国産No.1チャットシステム・ウェブ接客ツール
来訪ユーザーの行動すべてを見える化し、一人ひとりのニーズに合わせたオンライン接客を行うことができます。「GENIEE CHAT」ひとつで、「FAQボット」「有人チャット」「チャットEFO」など、Webサイト上でのおもてなし接客に欠かせないチャットを用意することができます。
あなたの知らない CSS ベストプラクティス - Frasco
React 、Angular 、Vue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基本は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能
トップページの終焉――ウェブサイトのパーソナライゼーション事例 | Moz - SEOとインバウンドマーケティングの実践情報
企業Webサイトのトップページを訪問者ごとにパーソナライズするのは、どうなのだろうか。Optimizelyのサイトでトップページをパーソナライズした事例から、その考え方やセグメントの分け方、クリエイティブ、そして成果を紹介する。 1998年、ジェフ・ベゾス氏はインターネットについてあるビジョンを抱いていた。同氏がアマゾンを設立してから4年が経った頃で、アマゾンは書籍や音楽の巨大オンライン市場として軌道に乗りつつあった。 その年に行われたワシントン・ポストとのインタビューで、ベゾス氏はウェブについて先見性のあるコメントをしている。同氏は次のように述べていた。 顧客が450万人いるなら、店舗が1つではだめだ。450万の店舗が必要だ。 それから19年たった2017年の今、私がアマゾンのトップページを訪問すると、その内容はかなりパーソナライズされている（2016年8月には、蛍光色に光るライトスティ
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
JavaScriptは適切に利用することが大事！HTMLとCSSだけで実はかなり高機能なスライダーを実装することができる
スライダーとは、ナビゲートできる一列に並べられた複数のボックスのことです。もちろん、あなたはスライダーが何であるかを知っているでしょう。 スライダーにはたくさんの機能があり、スワイプやスクロールできたり、自動再生やアニメーションを備えているものもあります。 HTMLとCSSだけで、見栄えがよい機能的なスライダーをどこまで実装できるか紹介します。HTMLとCSSを理解することで、JavaScriptも適切に利用できるようになります。 You can get pretty far in making a slider with just HTML and CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Step 1: 最初にセマンティックなマークアップ Step 2: flexboxを使ってスライダーを実装 Step 3:
レスポンシブ対応のHTMLメールをドラッグ＆ドロップで驚くほど簡単に作成できる無料ツール -Topol.io
便利なツールがどんどんリリースされています。 一から作成するとなかなか面倒なレスポンシブ対応のHTMLメールを簡単に作成できる無料のオンラインツールを紹介します。 デザインもさまざまなテンプレートが用意されており、主要なメールクライアントすべてをサポートしています。 Topol.io Topol.ioはHTMLメールのフレームワーク「MJML」をベースに作成されており、さまざまなメールクライアントで見栄えがよいHTMLメールを簡単に作成できます。 さまざまなデザインのHTMLメールを作成できる Topol.ioの使い方は簡単です。 登録など面倒なことは不要で、HTMLメールを作成し、ダウンロードできます。 まずは、サイトにアクセスし、「Start Designing」ボタンをクリックします。
いまさら聞けないPWAとAMP - Qiita
概要 PWA = モバイルのWEBページでネイティブアプリのようなUXを提供するためのもの ※ 2020/04/05 追記: PWAに関する仕様の策定当初はモバイルでのユースケースが主だったと記憶していますが、PWAはモバイルに限定されたものではなく、実際にデスクトップでの活用例も増えています。参考: PWAs: building bridges to mobile, desktop, and native (Google I/O '18) AMP = モバイルのWEBページを高速化するためのもの どちらもGoogleが主軸となって策定されている、モバイルページを進化させるためのプロジェクトおよび技術。ネイティブアプリの代替技術ではなく、ブラウザAPIの進化によってネイティブアプリのようなUXをウェブページで提供することが主眼。 1. PWAとは Progressive Web Appsの
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
UIデザイナーがSketchを使う理由と導入方法 – WPJ
スマートフォンが世に出て以来、アプリを制作するためにデジタルツールを使うデザイナーが急増し、それに合わせて従来のツールが進化を遂げたり、時代に合った新しいツールが登場したりしています。 中でもBohemian Codingが開発・販売しているSketchは一定の人気と地位を獲得しており、今やUIデザインツールの代名詞となっています。 このLessonでは、Sketchについてまだご存知でない方やこれから使おうと考えている方を対象に、Sketchの概要と基本的な使い方、架空のアプリ画面を例にしたUIデザインの制作方法、エンジニアとのやりとりなどについて解説します。 Sketchとは何か？ はじめに、そもそもSketchとは何なのか、改めておさらいをしておきましょう。 Sketchを開発・販売しているのはオランダのBohemian Coding。しばらくアムステルダムを拠点にしていましたが、現
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
ブラウザレンダリングを理解するため簡単にまとめてみた - Qiita
初投稿です。よろしくお願いします(/･ω･)/ 新卒入社してフロントエンドエンジニアとして働き始めて早半年。 最近は、自分の書いたコードが世の中にリリースされて嬉しさを噛み締めながら楽しく社会人生活を送っています。 こんな本を読み始めました Webフロントエンド ハイパフォーマンス チューニング -久保田 光則 (著) webパフォーマンスについて...要はサイトの 速度改善 について学べる本です。 冒頭に「ウェブパフォーマンスとは何か」が書かれてます。 ウェブパフォーマンスを改善することは、ユーザが目的の達成の為に費やす時間やリソースを節約させることであり、その節約した分ユーザを豊かにしているわけです。 ウェブページ遷移時の初期ロード時のパフォーマンスだけでなく ウェブページ内でのインタラクション(ユーザが起こした操作に対しての応答)の描画のパフォーマンスが重要になってきます。 読み込み
Web制作者がiPhone Xの発売前に知っておきたい、Webページを表示した際に起きる現象とその解決方法
iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。 しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点 解決方法 その1: background-color 解決方法 その2: viewport-fit 解決方法 その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点 新しく発売されるiPhone Xは、美しいディスプレ
かなりオススメ！WordPressのローカル環境が簡単に構築できる、Windowsもmac OSも対応の無料ツール -Local | コリス
WordPressのローカル環境を構築するといえば、XAMPPやInstant WordPressを利用している人が多いと思いますが、これらより簡単に、そして一度のインストールで複数の環境を構築でき、PHPなどのバージョンも簡単に変更することができる高性能な無料ツールを紹介します。 サーバーの知識がない人でも簡単に利用でき、あっという間にWordPressのローカル環境が構築できます。 UIも洗練されて使いやすく、かなりオススメです！ ローカルに、WordPressの制作環境を簡単に構築できます。 WordPressの制作環境は、複数構築できます。 サーバーの知識がない人でも、4クリックするだけでOK。 WordPress日本語版にも対応。 ローカルSSLサポート。 SSH/WP-CLIアクセス。 共有可能なURLを作成して、クライアントに見せることも可能。 柔軟な環境オプション。 PHP
納品ファイルをまとめるのが簡単に！更新分の抽出、ファイルリストの生成もできるWin, Mac対応の国産無料アプリ
まさに、Web制作者のためのアプリです。 納品ファイルをまとめる際に、更新した差分のファイルだけをディレクトリ構造を保持したまま抽出し、ファイルリストと共に納品ファイルセットを作成できるWin, Mac対応のアプリを紹介します。 ディレクトリの枝葉に点在する更新ファイルでも、1クリックでまとめることができます。 バージョン管理のないプロジェクトでは、特に重宝すると思います。 Scone Diff Scone Diffの特徴 Scone Diffのダウンロード・インストール Scone Diffの使い方 Scone Diffの高度な使い方 Scone Diffの特徴 Scone DiffはWindows、macOS対応の国産アプリで、無料版と有料版がリリースされています。無料版でも十分な機能が備わっています。 Web制作のファイル納品時、必要なファイルだけをまとめて納品できます。 必要なファ
レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度
ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。 レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。 今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。 サイト設計の手間を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Media Queriesの指定について - Qiita
ITスキルが上がるゲーム4選、セキュリティからWeb制作まで
