2020-05-01から1ヶ月間の記事一覧
店舗サイトをつくる レスポンシブ化(ブレイクポイント:640px) SP時にメニューをハンバーガーメニュー(ドロワーメニュー)にする スムーススクロールでアニメーションしながらトップに戻る h1にgoogle fontsを適用させる GoogoleMap(南池袋公園)をサイ…
(2020-06-24 加筆) フルスクリーンレイアウト 背景画像を固定させて、スクロールしてもついてくるレイアウトのことです。 パララックスデザイン:背景を固定して前面の要素が動きます。 実践 テキストはアタリ、画像は個別に用意します。 背景画像のサイズは…
(2020-06-24 加筆) ヒーローイメージ(ヒーロー画像)とは Webサイトのファーストビューにて、画面を全面に覆い尽くすように配置した大きなサイズの写真やグラフィック要素のこと。もしくはそのレイアウトのこと。 配置した動画を「ヒーロームービー」、それ…
Emmetとは 主にHTMLやCSSなどの記述・編集を支援するプラグインです。 DreamweaverやBracketsなど多くのエディタに対応しています。 独自の省略記法によるコーディングの高速化が可能となります。 省略記法を入力した後、tabを押します。 各種記号 #:ID:ID…
店舗サイトをつくる コンテンツ幅(960px)固定値で設定 レスポンシブWebデザインで作成 デザインは今風に改変 画像は個別に用意 実践 例 テキスト IKEBUKURO COFFEE池袋珈琲 トップ メニュー 店舗 こだわり IKEBUKURO COFFEE ドリップコーヒーの2倍コーヒー…
Flexboxとは CSS3 Flexible Box (可変ボックス) ボックスのレイアウト方法を定めるCSSの機能 ボックスを任意の方向にレイアウトしたり、ボックスの大きさを伸縮可能(flex)にします flex:融通のきく、柔軟なという意味 フレックスボックスの基本概念 devel…