レスポンシブWebデザイン
シングルページサイトをつくる メインビジュアルをヒーローヘッダーでbxsliderを使用 VIDEO部分にmp4データを設置 NEWS部分をjQuery / ajaxを使用して外部データを読み込む MENU部分にjQuery / モーダルウィンドウを設置 ACCESS部分にGoogleMapを設置 INFO部…
店舗サイトをつくる レスポンシブ化（ブレイクポイント：640px） SP時にメニューをハンバーガーメニュー（ドロワーメニュー）にする スムーススクロールでアニメーションしながらトップに戻る h1にgoogle fontsを適用させる GoogoleMap（南池袋公園）をサイ…
(2020-06-24 加筆) フルスクリーンレイアウト 背景画像を固定させて、スクロールしてもついてくるレイアウトのことです。 パララックスデザイン：背景を固定して前面の要素が動きます。 実践 テキストはアタリ、画像は個別に用意します。 背景画像のサイズは…
(2020-06-24 加筆) ヒーローイメージ（ヒーロー画像）とは Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと。もしくはそのレイアウトのこと。 配置した動画を「ヒーロームービー」、それ…
店舗サイトをつくる コンテンツ幅（960px）固定値で設定 レスポンシブWebデザインで作成 デザインは今風に改変 画像は個別に用意 実践 例 テキスト IKEBUKURO COFFEE池袋珈琲 トップ メニュー 店舗 こだわり IKEBUKURO COFFEE ドリップコーヒーの2倍コーヒー…
マルチデバイス 現在、Webページは様々なデバイスで閲覧されています。ここでのデバイスとは、パソコン、スマートフォンやタブレットなどのモバイルなどを指します。 特にスマートフォンは画面が小さいため、パソコン用のデザインをそのまま閲覧しようとする…
「TOPへ戻る」ボタン Font Awesome Iconsで設置 過去の記事の際のIllutratorでボタンをつくる手間がなくなります。 jQueryで動作設定 初期画面ではマークがでず、ある程度スクロールするとボタンが出ます。 SP表示でボタンが表示されます。（PC表示ではボタ…
店舗サイトをつくる モバイルファースト 前回の実践のHTMLを利用して、CSSをモバイルファーストで作成します。 モバイルファーストとは 主にスマートフォンでストレスなく利用できるデザインにすること。 モバイル：スマートフォン、タブレットなど 主にスマ…
bodyの背景の色をブラウザの幅によって変更する 確認の仕方は、ブラウザを手動でスライドしていきます 1200px〜 黒 1000〜801px 赤 800〜601px 青 600〜401px 黄 〜400px 緑 PCサイズから作成する場合 <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブウェブデザイン | メディアクエリーの</title></meta></head></html>…
メディアクエリー Webページの見栄えを記述するCSS3で追加された仕様 表示された画面環境に応じて適用するスタイルを切り替える機能 ブレイクポイントを使用してレイアウトを制御 ポイント 各ブレイクポイントで記述すると上書きで指定されます 上部に指定さ…
