コーディング練習問題 Positionレイアウト練習②
概要コードを編集し、以下の動画のようなレイアウトを作成してください。positionのCSS指定で配置してください。 ヘッダーをスクロールに追従する位置に指定 「TOPへ戻る」ボタンをスクロールに追従させる（位置 下から10px 右から10...
2024-09
コーディング練習問題 
コーディング練習問題 Positionレイアウト練習①
概要コードを編集し、以下の画像のようなレイアウトを作成してください。HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等を追記...
コーディング練習問題 Flexレイアウト練習
概要上記のコードを編集し、以下の画像のようなレイアウトを作成してください。HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等...
コーディング練習問題 Flexレイアウト実践問題
概要「index.html」等を新規作成し、以下のようなレイアウトを作成してください。 横並びにはflexboxでのレイアウトを使用すること 必要なdiv等は適宜追加し、適切なclass付けをすること 使用カラーは「#cca677」「#00...
コーディング練習問題 レイアウト書き込み問題
概要※印刷推奨PDFにWebサイトのスクリーンショットが掲載されています。横並びレイアウトが掲載されている箇所を探し、レイアウト用の枠線をかきこみなさい。記述例目的横並びレイアウトを行うには、要素の構造をしっかり作る必要があります。構造の作...
コーディング練習問題 中央揃えの練習
概要コードの「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。style.css上でスタイル指定が必要なclassがあ...
コーディング練習問題 paddingとmarginを理解する
概要「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。目的paddingとmarginの違いを把握するデータ使用ソフトVisualStudioCode答え（作業完了後にみてください。）
コーディング練習問題 見出しの練習
概要「style.css」を編集し、適切なコーディングをして次のような見た目にしてください。目的見出しの装飾を学ぶデータdistフォルダの中身を使用してください。使用ソフトVisualStudioCode答え（作業完了後にみてください。）
コーディング練習問題 基本タグの練習
概要「index.html」を新規作成し、適切なコーディングをして次のような見た目にしてください。目的基本のタグをマスターする。データ新規作成犬のしつけ手順ダミー画像犬は非常に多くの種類があり、それぞれに異なる特性や性格があります。犬の種類...
コーディング練習問題 HTMLとCSSの連携を理解する
概要CSSを読み込み、サイトにスタイルシートを反映させてください。目的CSSとHTMLがどのように連携しているかを理解する。データ使用ソフトVisualStudioCode答え（作業完了後に答え合わせ）
コーディング練習問題 リンク練習初級
概要まずは以下のファイルをダウンロード、解凍しましょう。作業する場所に移動し、VScodeで「フォルダで開く」をしましょう。ダウンロードしたデータは3ページのWEBサイトです。現在リンクが繋がっていません。各ページを行き来できるようにファイ...
コーディング練習問題 「こんにちは」と表示する
概要目的フォルダとファイルの作成を体験し、エディタの扱いに慣れる。ブラウザで自分の作ったファイルを表示してみる。目標ファイルとフォルダを新規に作成し、ブラウザで次のように表示されるようにしてください。データ新規作成のためなし使用ソフトVis...