商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ今時の繊細でかっこいいエフェクトを備え、美しくデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。 最近のデザインやインタラクションの勉強にもいいですね。
[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height
1-3、4-6でエリアを指定、1-3と4-6が同じ高さに Right Heightの使い方 Step 1: スクリプトの準備 当スクリプトを外部ファイルとして記述し、初期化しておきます。 スクリプトは、これで完了。 <body> ... コンテンツ ... <script src="js/right-height.js"></script> <script> rightHeight.init(); </script> </body> Step 2: HTML HTMLのポイントは、2つ。 data-right-height 適用するエリアを指定 data-right-height-content 適用する要素を指定 <div class="row" data-right-height> <div class="grid-third" data-right-height-content> 1
![[JS]レスポンシブ対応、指定したエリア内だけで高さが異なるパネルを同じ高さに揃えるスクリプト -Right Height](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d7b12bef628f068421e02247872e8a530b7b5ee/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015091000.png)
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 レスポンシブWebデザインのツールもリリースされているので、ぜひ！ FROONT -Responsive Web Design Tool レスポンシブとアダプティブ Webデザイン フロー 相対的なユニット ブレイクポイント 最大限と最小限の値 オブジェクトのネスト モバイルファースト or デスクトップファースト Webフォントとシステムフォント ビットマップ画像とベクター レスポンシブとアダプ
これは使える！レスポンシブ対応のさまざまなHTMLメールが簡単に作成できる無料のオンラインサービス -BeeFree
ビジネス用のニュース、プロダクトのリリース、プロモーションなど、さまざまなレイアウトのHTMLメールをドラッグ&ドロップで簡単に作成できるオンラインサービスを紹介します。 デスクトップ・スマホ両対応で、プレビューやメールアプリでのテストなど機能も非常に充実しています。日本語もOKでした！ BeeFree 使い方は簡単です。 上記ページの「Let's get started」をクリックし、HTMLメールを作ってみましょう。 ※HTMLメールの作成やファイルのダウンロード時に登録は必要ありません。作成したメールをサーバー上にキープする時だけ登録が必要です。 まずはテンプレートの選択をします。 2カテゴリ各4種類、画像やテキストが仮配置された「Rich Templates」。
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
必読！5分でわかるレスポンシブWebデザインまとめ 制作編 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お久しぶりです。デザイナーの野田です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかるレスポンシブWebデザインまとめ」 「必読！5分でわかるレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかるレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少しコンテンツ量が多くなります。 100％ 5分では分らないので、タイトルはスルーしてやってください。 様々なサイトでレスポンシブWebデザインについて紹介されていますが、制作方法が異なっていたり、内容が少し難しいと感じる部分がありました。 この記事は、ディレクターの方やデザイナーの方、どちらにも理解しやすいように書かせていただいてます。 また、これまでレスポンシブWebデザインについてやってきましたが、基本的な部分で
レスポンシブwebデザインで制作する時のポイント
先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つかの方法があります。 アプリ 独自系 スクラッチ（0からスマートフォンサイト用に構築） jQuely mobileを使用 流用系 現在のデザインをほぼ流用、調整のみ レスポンシブ・デザイン どの方法にもメリットデメリットはあり、どれが最適かは サイトのコンセプトや規模、予算など複合的に考えて選択する必要があります。 今回のエントリーではレスポンシブ・デザインのみにふれます。 レスポンシブwebデザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG
Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）
要素の横幅と高さの比率を保つ | 集の一期一会