HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
これで十分！ウェブデザインの参考になるギャラリーサイト8選 - LITERALLY
デザインを０から全て考えつくのは難しい。ぼくは元々グラフィックデザインを中心にやってきたから、ウェブデザインを始めてから特にそう感じる。ウェブ上で何ができて、何ができないのか、完全に把握していない中では、既存のイケてるサイトを参考にしながらサイト構成を考えるのが最も効率が良いと思う。 今回は、ぼくがウェブデザインをするときに参考にしているウェブデザインギャラリーを整理がてらまとめてみようと思う。古風であまりオシャレでないウェブサイトを集めたギャラリーサイトは完全に除いている。 1. 今風のレスポンシブ・ウェブデザインサイトだけをまとめた「RWD JP」 レスポンシブ・ウェブデザインのサイトのみを集めたギャラリーサイト「Responsive Web Design Japan」。各サイトのサムネイル画像が①モバイル ②タブレット ③PC の３パターンとも表示されており、とても参考にしやすい。も
参考にしたい！レスポンシブ × WordPress ブログ7選 | Picture Picture
今回の記事は、私、スタジオARCのデザイナー 山本カツヤが、Webデザインに関する内容でお届けします！ 今や、「WordPress」という言葉は、Webにあまり詳しくない人でも、知っているかもしれません。 当ブログ（Picture Picture）でも使用している「WordPress」は、世界で一番使われているブログシステムです。 この「WordPress」で構築されており、かつPC・スマートフォンのどちらからでも、最適化されたレイアウトで閲覧できる「レスポンシブWebデザイン」を採用しているものの中から、私が「おおお！」と思った、デザイン性の高いブログを7つ紹介していきます。 Web技術に関する話も少しありますが、難しいことは書いてないのでご安心いただけると幸いです。 「レスポンシブWebデザイン」の定義 「レスポンシブWebデザイン」とは、ひとつのHTMLで、PC・タブレット・スマート
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
