HTML/CSS レスポンシブ（スマホ用ページをPC用にする）
スマホ用のサイトができたので、それをPCで表示する時にレイアウトが崩れないよう、CSSを追加します。 なぜスマホ用のサイトを先に作ったかというと、PC用は画面が大きいためにFlexboxを使って横並びのレイアウトにすることが多いので、スマホ...
HTML /CSS
HTML/CSS HTML/CSS CSSグリッドレイアウトでフォトギャラリーを作る
CSSグリッドレイアウトについて勉強したことをまとめます。 CSSグリッドレイアウトとは？ 表のようなマス目に自由に要素を配置できるのがCSSグリッドレイアウト。マス目の大きさも自由に設定することが可能。 frexboxは1次元（横か縦か、...
HTML/CSS 勉強の続き：複数ページのサイトを作る（CONCEPTページのコーディング）
昨日はTOPページが終わりましたので、今日からCONCEPTページに入りました。 セクション3 CONCEPTページをコーディングしよう HTMLファイルを確認しよう CSSを書く前に確認しよう ページ上部の共通パーツを作ろう 今日はここま...
HTML/CSS 勉強の続き：複数ページのサイトを作る（まずはTOPページ！）
Fammの案件保証の直しが終わったので、今日はまたHTML/CSS勉強の続き。 セクション2 TOPページをコーディングしよう（続き） メインビジュアルを整えよう 各ページへのリンクリストを整えよう 今日はここまで。こうして書いてみるとほん...
HTML/CSS 勉強の続き：レストランサイトのCSSを書く（モバイル）
ついに最終章！レストランサイトのCSSを書きます。前回はPCサイトから作り、画面サイズが小さくなった時のメディアクエリを後から追加しましたが、今回はモバイルバージョンから先に作るんですって。 教科書はこれです。 これだけで基本がしっかり身に...
HTML/CSS 勉強の続き：複数ページのサイトを作る
今日から最終章に入りました。カピぞうくんが始めるレストランのホームページを作ります！ 教材はこれです これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本 価格：2,420円（税込、送料無料) (2024/11/4時...
HTML/CSS 勉強の続き：レスポンシブwebデザインに対応させる
ついにレスポンシブに入りました！今日勉強したのは以下。 セクション1 マルチデバイス対応の基本 レスポンシブウェブデザインとは？セクション2 レスポンシブウェブデザイン対応の準備をしよう 作業ファイルを確認しよう ビューポートの指定をしよう...
HTML/CSS 勉強の続き：CSSアニメーションをつける
昨日、「次はレスポンシブ！」と思っていましたが、CSSアニメーションがまだありました。 CSSでアニメーションを作る！途端に難しくなってくる気がする！ 教科書はこれです。 これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1...
HTML/CSS 勉強の続き：パララックス効果を追加する
今日はフォームのcssを書きました。今日はパララックス効果を覚えた！ パララックス効果というのは、この本によりますと、「視差」という意味だそうです。 層になっている要素をスクロールする際に異なるスピードで動かすことにより、奥行き感を演出する...
HTML/CSS 勉強の続き：web招待状サイトのCSSを書いてみよう2
Famm案件保証のページデザインの初稿を提出したので、またhtml/cssの勉強に戻りました。 カピぞうくんとカピ子さんのweb招待状もだいぶできてきました。こういう可愛いイラストも描けるようになったら幅が広がる気がする。HTML/CSSの...