コーディング練習問題 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 答え（作業完了後に答え合わせ）
コーディング練習問題 リンク練習初級
概要 ダウンロードしたデータは3ページのWEBサイトです。 現在リンクが繋がっていません。 各ページを行き来できるようにファイルを修正しリンクを繋げてください。 TOPページ : index.html 会社概要 : about.html お...
コーディング練習問題 「こんにちは」と表示する
概要 目的 フォルダとファイルの作成を体験し、エディタの扱いに慣れる。 ブラウザで自分の作ったファイルを表示してみる。 目標 ファイルとフォルダを新規に作成し、ブラウザで次のように表示されるようにしてください。 データ 新規作成のためなし ...