★Webサイト作成
テキストナビゲーション 中心から外に線が伸びる（下部） 記述例 <nav class="gnav"> <ul> <li><a href="#" class="current">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </nav> @charset "UTF-8"; /* ------------------------------------ reset ------------------------…
dl：description list description listの略で用語説明型リストを表す要素 HTML5より前は、definition listの略で定義リストを表す要素でした dl要素内は、dt：description term と dd：description details 以外入りません dtとddの横並び 横に並べて１行と…
Cafeコーディング - CSS記述 記述例 @charset "UTF-8"; /* ------------------------------------------ reset ------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul, li { list-s…
Cafeコーディング - サイト設計 共通モジュールの設定 幅「1040px」で、左右空きを均等にするために共通「.container」を設定します 記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】Cafeサイト</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
画像スライス １枚画像から、画像を書き出す 素材 mimipen.net blog.mimipen.net スライスツール ガイドに沿って、画像をドラッグする 「スライス選択ツール」で、スライスエリアをダブルクリック ダイアログボックスで、ファイル名を記述 すべてのスライス…
お問合せフォーム - Google フォーム Googleフォーム作成 Googleドライブ - Googleフォーム お名前（記述式）：必須 メールアドレス（記述式）：必須 お問い合わせ内容（段落） 新規スプレッドシートとリンクする お問い合わせ内容を記録しておく Googleフォ…
お問合せフォーム HTMLフォームを作成 HTML記述例 <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>お問合せフォーム</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <h1>お問い合わせ</h1> <p>お気軽にお問い合わせください。</p> </div></body></html>
Animate On Scroll Library スクロールの動きに合わせてアニメーションを実装することができるプラグイン michalsnik.github.io CDN <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> HTMLでアニメーションを設定したい要素に属性を追加する data-aos…</link>
モバイルファースト - ハンバーガーメニュー HTML記述例 ナビゲーションは「モバイル用」と「PC用」と作成し、ボタンイベントで表示を切り替える <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>【コーディング練習】CASABLANCA</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
ナビビゲーションを position で設定
ヘッダーパーツ - ナビゲーション nav要素のレイアウト nav <nav class="gnav"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス案内</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> /* ---------------------------------- nav ---------------------------------- */ .gnav ul { display: flex; gap: 40px; colo…
ヘッダーパーツ ロゴとグローバルナビゲーション ロゴ作成 適宜作成 font-awesome CDN cdnjs.com マークアップ button要素でクリックできる要素とする（a要素で作成も可） 《index.html》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>ヘッダーのパーツ</title> <link rel="stylesheet" href="css/style.css"> </link></meta></head></html>
