2022-10-01から1ヶ月間の記事一覧
プロパティのネスト Nested Properties 記述例 《sample.scss》 .sample { border: { top: 5px solid #ccc; bottom: { width: 3px; style: dotted; color: black; } } } 《sample.css》 .sample { border-top: 5px solid #ccc; border-bottom-width: 3px; bo…
親セレクタの参照 &（アンパサンド） 《sample.scss》 .side { width: 240px; ul.bnr { margin-bottom: 10px; } } body.top .side { width: 300px; } 《sample.css》 .side { width: 240px; } .side ul.bnr { margin-bottom: 10px; } body.top .side { width…
記述演習 テキストエディターで、管理するフォルダーを選択 実際に記述してみる 「scss」フォルダーを作成 フォルダー内に「style.scss」ファイルを作成 ルールのネスト（Nested Roles） 入れ子構造を使うとクラス名の変更が楽になります 子孫の関係をシンプ…
Sass（サースまたはサス） Syntactically Awesome Stylesheets（構造的にイケてるスタイルシート） CSSをより構造的に整理して記述することができる、CSSの「メタ言語（拡張言語）」 メタ言語とは「ある言語について何らかの記述をするための言語」のこと Sa…
カスタムプロパティ（CSS変数） CSS custom properties for cascading variables CSSカスタムプロパティ（CSS変数）とも呼ばれています カスタムプロパティを定義する 利用できる範囲を設定 html全ての文書で適応したいことの方が多いので「:root」の擬似ク…
ハンバーガーメニュー - CSS3 CSS3でチェックボックス（フォーム）をクリックイベントの代わりにする場合
Part5 - INFO INFO INFO 山の中にひっそり佇む 隠れ家レストラン 駅からはちょっぴり遠いですが、 たまには遠回りしてみませんか？ Access Capybaland Mt.Sunny 1-2-3 in Capyzou farm 「サニー山駅」から車で10分 [OPEN]10:00-22:00 [CLOSE]Monday Garelly …
Part5 - MENU MENU MENU 旬の野菜と食材を 手軽に味わえる 自家農園の食材のため、リーズナブルにご提供 季節ごとにサラダ/メインメニューは変わります Salad Main Pasta HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】MENU | Harvest Restaurant</title> </meta></meta></head></html>
Part5 - CONCEPT CONCEPT CONCEPT 口に入れた瞬間 カラダが喜ぶ 自家農園で太陽の光をたっぷり浴びた 採れたて・無農薬のお野菜をふんだんに使っています Fresh カラフルサラダでしっかりビタミンをチャージ。 朝採れ野菜のパリッとした食感と自家製ドレッシ…
Part5 - 複数ページのサイト テキスト P.208 全体を俯瞰して作りやすところから始めます Webサイト制作の流れ 企画・要件定義 サイト設計 制作 Webデザインの基本 揃える 差をつける グループ化 繰り返し Webの特性を考慮したデザイン 操作できること 閲覧環…
position: sticky position: sticky スクロールすると、navも動き最上部で固定される <header class="header"> <div class="container"> <h1> <img src="img/hero_text.png" srcset="img/hero_text.png 1x, img/hero_text@2x.png 2x" alt="Welcome to Our Wedding Party"> </h1> <p class="scroll">Scroll<br></p></div></header>
form フォーム記述例 <main class="main-content"> <section class="msgSec"> </section> <section class="dateSec"> </section> <section class="form-section"> <div class="container"> <h2>RSVP</h2> <form action="#" method="post" class="rsvp"> </form></div></section></main>
::before, ::after HTML記述例 class名は、似通った名前が設定されているので、どのブロックを指すのかを意識しながら記述します モバイルファーストの記述とformのマークアップは、次の段階で行います <main class="main-content"> <section class="msgSec"> <h2>Message</h2> <p>この度、カピぞうとカピ子は<br> ウェディング</p></section></main>…
WebFont header WebFontsを読み込み <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Wedding Party Invitation</title> <link rel="stylesheet" href="css/style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <…</link></link></meta></meta></head></html>
MarkUp ユーザーは上から順にコンテンツを見るため、順番をよく考えて情報設計をすることが大切です PC版とスマートフォン版の例のギャップも少ないため、レスポンシブWebデザインと相性のよいレイアウトです HTMLの構造 デザインカンプ「design.png」を見な…
Part３ - ２カラムページ（カスタマイズ ３） ハンバーメニューを追加 HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】FARM CAPYZOU</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
Part３ - ２カラムページ（カスタマイズ ２） レイアウト（横並び） ２つを囲む外枠を指定する「container」 横並びのレイアウト指定は、「grid」「flex」の２種類のうちどちらかで指定します 「grid」は、可変の設定が簡単（幅指定なし） 「flex」は、幅指…
Part３ - ２カラムページ（カスタマイズ １） テキストとは別のワークフローで記述してみる モバイルファーストで記述します（スマートフォン対応） CSSはresetも含めて１ファイルで記述 読み込みファイル数を少なくする <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】FARM CAPY</title></meta></meta></head></html>…
Part３ - ２カラムページ（マークアップ） マークアップ HTMLで文書構造を作成 テキスト内容のアウトラインを見ると以下のようになります aside部内のnav要素内の「h2」は「h3」として判断されています ※asideにnavタグ使用は適切ではないため、divタグに変…
Part３ - ２カラムページ（文書構造） テキストP.096〜 文書構造（セマンティックなマークアップ） HTML Living Standard（日本語訳） セマンティックWeb テキストP.037 検索サイトに正確な情報を提示する Webアクセシビリティも考慮する Webサイトを構成す…
カスタマイズ マルチデバイス対応するためには、横幅（width）の記述は最小に留める レイアウト設計（クラス名付与）を、自分の考え方で進める テキストの指示は、外観のみを参考にする（デザインカンプからコーディングをする練習） カスタマイズ記述例 - …
SNSリンク集を作ってみよう テキストP.062〜 課題制作の目的 HTML+CSS基本の理解 サイト制作必須ツールの使い方（VS Code、デベロッパーツール） CSSの実践的な使い方 HTMLの入力 CSSファイルは、外部参照の記述をする 画像は、「img」フォルダーを作成して…
