2024-09

コーディング練習問題

Positionレイアウト練習②

概要 コードを編集し、以下の動画のようなレイアウトを作成してください。 positionのCSS指定で配置してください。 ヘッダーをスクロールに追従する位置に指定 「TOPへ戻る」ボタンをスクロールに追従させる(位置 下から10px 右から...
コーディング練習問題

Positionレイアウト練習①

概要 コードを編集し、以下の画像のようなレイアウトを作成してください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等...
コーディング練習問題

Flexレイアウト練習

概要 コードを編集し、以下の画像のようなレイアウトを作成してください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等...
コーディング練習問題

Flexレイアウト実践問題

概要 「index.html」等を新規作成し、以下のようなレイアウトを作成してください。 横並びにはflexboxでのレイアウトを使用すること 必要なdiv等は適宜追加し、適切なclass付けをすること 使用カラーは「#cca677」「#0...
コーディング練習問題

レイアウト書き込み問題

概要 ※印刷推奨 PDFにWebサイトのスクリーンショットが掲載されています。 横並びレイアウトが掲載されている箇所を探し、レイアウト用の枠線をかきこみなさい。 記述例 目的 横並びレイアウトを行うには、要素の構造をしっかり作る必要がありま...
コーディング練習問題

中央揃えの練習

概要 コードの「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclas...
コーディング練習問題

paddingとmarginを理解する

概要 「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。 目的 paddingとmarginの違いを把握する データ 使用ソフト VisualStudioCode 答え(作業完了後にみてください。)
コーディング練習問題

見出しの練習

概要 「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。 目的 見出しの装飾を学ぶ データ distフォルダの中身を使用してください。 使用ソフト VisualStudioCode 答え(作業完了後にみ...
コーディング練習問題

基本タグの練習

概要 「index.html」を新規作成し、適切なコーディングをして次のような見た目にしてください。 目的 基本のタグをマスターする。 データ 新規作成 犬のしつけ手順 ダミー画像 犬は非常に多くの種類があり、それぞれに異なる特性や性格があ...
コーディング練習問題

HTMLとCSSの連携を理解する

概要 CSSを読み込み、サイトにスタイルシートを反映させてください。 目的 CSSとHTMLがどのように連携しているかを理解する。 データ 使用ソフト VisualStudioCode 答え(作業完了後に答え合わせ)