”レスポンシブデザイン”カテゴリーの投稿一覧です。

レスポンシブデザインの記事

HTML5 Boilerplateとは、フロントエンドテンプレートです。多くの製作者の知恵を元に作られました。これを利用すれば、ウェブサイト・ウェブアプリの製作の製作・開発が効率的に進みます。 →HTML5 Boilerplate Boilerplateの特徴 解説 S…

295 Views

 厳密にレスポンシブなウェブサイトにするのであれば、CSSでem(エム)を使用しましょう。 emは、フォントサイズをベースにしたサイズです。 フォントサイズを変更すると、emでした要素も相対的にサイズ変更します。 以下のサイトでは、pxとemの相互変換をしてくれます。 →PXtoEM px…

364 Views

Gallaxy Sのように、画面サイズの大きい端末が増えてきました。 タブレットやスマートフォン向けにも柔軟なレイアウトを組みたいものです。 モバイル表示でもカラムが指定できるようなグリッド・システムは、非常に理想的です。 モバイル表示のグリッド指定 モバイル表示のグリッド指定は、以下のよう…

267 Views

 小さい画面のとき、1画面ではページが入りきらない場合があります。 レスポンシブWebデザインでは、フロートさせていたブロックを全て下に落とみ、全てのカラムを1行にします。 カラムを落とし込むと、左のカラムが上で右のカラムが下になります。 例)デスクトップで開いたとき、テキストを左、写真を…

276 Views

レスポンシブWebデザイン 制作の実践的ワークフローとテクニックposted with ヨメレバ渡辺 竜 ソシム 2012-12-20 AmazonKindle楽天ブックス 米国カリフォルニア州の制作会社 ZURB,Incが提供する「F…

324 Views

 グリッドシステムとは、グリッド・レイアウトに汎用性を持たせ、複雑なレイアウトパターンにも使えるようシステム化したものです。 グリッドシステムは、レスポンシブWEBデザインの必須条件ではありません。 しかし、中規模から大規模のサイトをレスポンシブWEBデザインにするとき、非常に効率的です。 グ…

294 Views

 viewport(ビューポート)とは、「表示領域」のことです。 前回メディアクエリの指定をして、スマートフォン画面にスタイルを対応させることについて説明しました。 →メディアクエリで画面サイズごとCSSを切り替えるには? しかし、viewportメタタグを指定しなければ、メディアクエリを記述…

276 Views

 同じ高さのボックスを3つ並べます。その上下左右の中央に文字を並べます。 完成イメージ ・Ie9以降のブラウザです。 黄色のボックス中央に文字を配置します。 ↓ ・スマートフォンサイズの画面です。 画面が縮むと、ボックスが縦一列になります。 文字の位置がやはりボックスの中央です。 …

276 Views

 リキッドレイアウトとは、ウィンドウサイズに合わせて幅を可変させるレイアウトです。 リキッドレイアウトは、幅や高さをパーセントなど相対値を使って指定します。 レスポンシブWEBデザインは、あらゆる画面サイズにレイアウトを適応させることが条件です。 そのため、フル可変のリキッドレイアウトはレスポ…

263 Views

 Internet Explorer 8以下では、メディアクエリが使用できません。 レスポンシブといってもIE8以下は「HTML5」「CSS3」が対応していないためです。 対応方法 javascriptによる対応  対応策として、以下の2つのJavaScriptのどちらかを実装します。 …

262 Views

プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告