タグ

responsiveに関するMiyakeyのブックマーク (3)

  • Responsive - その名の通りレスポンシブなHTML5デザインテンプレート MOONGIFT

    デザインフレームワークを使えば見栄えのいいWebサイトがさくさくと作れます。そのまま完成には至らなくとも、プロトタイプであれば十分な品質になるのではないでしょうか。 現在、様々なデザインフレームワークがありますが、今回は名前があれな気がするResponsiveというソフトウェアを紹介します。SEO的にきつそうな気はしつつも気にせずいきましょう。 Responsiveの使い方 今回はスクリーンショット多めでいきます。 タイポグラフィ。 幅によって表示する、しないクラスを指定できます。 グリッド。定番の12分割です。 オフセットもできます。 フォーム。 ラベルの横表示。 ボタン。 グループボタン。 テーブル。 テーブルはもちろんレスポンシブです。 画像表示。高さ固定もいけます。 iframe。動画表示、Googleマップなどもいけます。 VineやInstagramも埋め込みもいけます。 vi

    Responsive - その名の通りレスポンシブなHTML5デザインテンプレート MOONGIFT
  • Responsive Email Design

    This Book is written in Japanese. モダンなHTMLメールの作り方※電子書籍文中で使用しているHTMLソース付きパッケージです --- スマートフォンやタブレットなどの新しいデバイスが増えるということは、Webサイトの閲覧環境が変わるだけではありません。これまでデスクトップPCのメールクライアントやWebサービスで閲覧していたEメールは、今となっては外出先でスマートデバイスの付属のメールクライアント、専用のアプリで閲覧する機会が増えているのではないでしょうか? しかし、未だに配信されてくるHTMLメールは従来のままのデスクトップ仕様であることが多いように思われます。スマートフォンなどの表示領域が小さいデバイスではその閲覧に支障をきたす(写真は見えるが文字が読めない、など)ことが多く、小さい画面に縮小表示されたHTMLメールを読もうという気はなかなか起きま

    Responsive Email Design
  • レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net

    いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">

    レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
  • 1