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

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

レスポンシブデザイン

header部分の制作

今回のスライドショーの主なポイントブラウザー幅一杯にスライドを表示させる 左右の画像は半透明のブラーがかかっている レスポンシブサイトなので、フリックにも対応 レスポンシブ対応サイト制作wideslider版 black-flag.net

数字の羅列を無効にする

一部のスマートフォンでは数字の羅列を電話番号として認識してしまうので、以下のmetaタグをhead内に挿入しましょう <meta name="format-detection" content="telephone=no"> そして実際に電話番号として認識させたいリンクに対して <a href="tel:0300001234">お電話はこちら</a></meta>

レスポンシブイメージの設定

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「レスポンシブイメージ」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみ…

フォントサイズを画面幅に応じて可変にする

remを使ったフォントサイズ まずはremを使ったフォントサイズの指定を覚えましょう。 「rem」とは、「em」や「%」の場合、親要素(が基準)に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素(最上位の要素)に対して相…

htaccessを使った動的配信

「.htaccessファイル」を使った動的配信 動的な配信 | 検索 | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業…

レスポンシブデザイン対応のHTMLテンプレート素材

photoshopvip.net coliss.com

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

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

フルスクリーンレイアウトのレスポンシブデザイン

スマホレイアウト 今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像…

カンプを元にコーディングする

以前、illustratorで作成したカンプを元にコーディングを進めましょう。色やレイアウトだけで無く、フォントサイズやマージン・パディングの値などもカンプに合わせて作成しましょう。 index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>Cotorier Cafe</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> …</html>

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

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

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

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

グリッドレイアウト

グリッドレイアウトとはグリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザイン…

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

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

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

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

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

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

2カラムレイアウトの演習|応用

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