webサイト制作の勉強|2018月2月クラスブログ

webサイト制作の勉強に関する解説ブログです。

レスポンシブデザイン

2カラム演習

http://felica29.starfree.jp/kcafe/ <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラム演習</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <h1>KUJIRA cafe</h1> </header></div></body></html>

レスポンシブレイアウトの際のviewportの設定

viewportの設定 実はメディアクエリーのみではスマホの実機で見た際にCSSの切り替えは出来ません。 指定したメディアクエリーをスマホでちゃんと対応させるには「viewport」の設定が必要になります。 viewportとは? viewportとはスマホ独特の指定方法でPCサ…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

スマートフォンでのナビメニュー

ナビゲーションメニューの押し易さ(使い易さ)というのはページ全体の使い易さに繋がる為、非常に大切です。 PCレイアウトの場合は、ある程度大きい面積の中でホバーアクションと組み合わせる事で、ある程度の解り易さは確保出来ます。 スマホでは制限され…

jqueryでのresize設定

レスポンシブサイトでは、読み込み時だけで無く、ブラウザーをリサイズした時にもイベントが反応するようにしなければいけない場合があります。 例えばPC時では通常のナビゲーションボタンでスマホ時にはハンバーガーメニューの時などです。PC時ではナビゲー…

モバイルファーストでの既存サイトのトレース

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…

モバイルファーストでのレスポンシブサイトの制作

モバイルファーストとは? モバイルファーストとは単に「スマートフォン向けのサイトから先に作る」という作業手順の話ではなく、ユーザーのニーズや状況よって必要なコンテンツを必要なテンプレートに表示する。そのためには、ユーザー視点で、ユーザーの導…

シングルページの作成

今回はクライアントワークに向けて、より実践的な内容のシングルページを作成していきます。 今回の制作のポイント トップはヒーローヘッダーで複数枚をスライド(フェード)で切り替え ナビゲーションはある程度スクロールしたら固定 SNSの埋め込み google…

メニュー部分のレスポンシブ化

<html lang="ja"> <head> <meta charset="utf-8"> <title>おすすめメニュー部分の練習</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/menu2.css"> </head> <body> <div class="container"> <div class="menu"> <div class="menu-wrapper"> <h3>おすすめメニュー</h3> </div></div></div></body></html>

モバイルレイアウトのカンプを作成

スマートフォンのデザインカンプ、アートボードの全体幅は例外を除き、640pxで作ります。 この640pxというサイズはiPhoneのレティナディスプレイの横幅の最小サイズに合わしているもので、実際に表示されるviewport(device-width)は320pxです。文字の大き…

レスポンシブレイアウトの演習2

レスポンシブレイアウトを作成しましょう。 今回のポイントは、 PCでは2カラム、タブレットではそのままフルード、SPでは1カラムレイアウト キービジュアル画像・バナー画像は自身で作成 GoogleFontsを使用 SNSのアイコン、矢印アイコンはwebアイコンを使用 …

レスポンシブデザイン実践1

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。 まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 768px~959px スマートフォンサイズ 767px以…

レスポンシブレイアウトの演習

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムレイアウトの復習</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <div class="inner"> <div class="txt-box"> <h1>Cafe de Felica</h1> <p>食とアートと音楽…</p></div></div></header></body></html>

レスポンシブデザイン基礎2

レスポンシブWebデザイン(RWD)の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…

レスポンシブデザイン基礎1

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…