[B! レスポンシブ] tarotarorgのブックマーク

WordPressでレスポンシブ・イメージの自動化を可能に。RICG公認プラグインが公開

追記： 2016.01.29 WordPress 4.4からレスポンシブ・イメージがCoreに実装されました。詳しくは以下をご覧ください： WordPress 4.4以降でのレスポンシブ・イメージ・プラグインはどうなるの？ WordPress 4.4からデフォルトで実装されたレスポンシブイメージってどうなのよ？レスポンシブ・イメージの仕様策定や普及に努めているRICG（Responsive Images Community Group）が公認したレスポンシブ・イメージのWordPressのプラグインが公開されましたね。このプラグインを使うとWordPressでのレスポンシブ・イメージの解像度対応の自動化が可能になります。RICG公認のプラグインが出たことでプラグインの開発や普及が加速すると嬉しいですね。そもそもレスポンシブ・イメージってなによ？という方は、こちらあたりをお読みくださ

tarotarorg 2015/02/10

リンク

たった一行でさまざまな要素をレスポンシブ対応にするスタイルシート -Fluidity | コリス

iframeを使った地図 Fluidityの使い方使い方は簡単です。 Step 1: 外部ファイル head内に当スタイルシートを追加するだけで完了です。 <link rel="stylesheet" href="css/fluidity.min.css"> Step 2: HTML あとは、通常通りにHTMLを記述するだけです。画像の場合 <img src="image.png"> テーブルの場合テーブルの時はclassを加えます。 <div class="overflow-container"> <table>  </table> </div> 地図の場合 <iframe src="https://www.google.com/maps/embed?マップのコード" width="100%" height="450" framebor

tarotarorg 2014/03/26

リンク

ヘッダは上部固定で、フッタは最下部にするスタイルシート、レスポンシブにも対応！ | コリス

ナビゲーションを配置したヘッダはスクロールしても常に上部に固定されており、フッタはコンテンツの量が少なくても最下部に配置されるページを実装するスタイルシートを紹介します。 Sticky footer with fixed navbar コンテンツが少なくてもフッタは最下部に、レスポンシブ対応で！デモ Bootstrapに素晴らしいデモがあったので、そこからデモを紹介します。デモでは、ナビゲーションがあるヘッダはスクロールしても常に上部に固定されています。デモのコンテンツ量が少ないため、狭い表示エリアで。デモページ：幅780pxで表示実装実装はデモを必要最小限にしたもので、紹介します。 HTML 上からナビゲーションのあるヘッダ、コンテンツ、フッタの順で、ヘッダとコンテンツはdivで内包し、終わりにコンテンツ量が少ない時用にpushのdivを配置します。 <body> <div

tarotarorg 2013/02/26

リンク

レスポンシブデザインの高速プロトタイピングツールAdobe Edge Reflow | DECONCEPTER

レスポンシブウェブデザインのワークフローを改善するツール昨年Adobeが発表したEdge Tools & Servicesの中で唯一リリースされずにいたAdobe Edge Reflowが2月15日に発表された。先行して公開されているEdge Web Fonts や Edge Inspectなどと連携しながら高速にレスポンシブデザインのモックアップ作成が可能となる。 Adobe Developers ConnectionにEdge Reflowの概要と今後の可能性について書かせていただきましたのでご覧ください。レスポンシブWebデザイン制作におけるEdge Reflowの可能性 | ADC – Adobe Developer Connection Edge Reflowのメリット Edge Inspecetを活用してPCサイトとモバイルサイトのモックが並行して作成できるのは大きい。又