コーディング練習問題

概要 最初のコーディング課題として、フレックスボックスの基本とメディアクエリーの使い方をマスターしましょう。 事前知識 Flexbox ■２つの要素を横並びにしたいときはFlexboxレイアウトを利用する。 ①まずは並べたいものをdivなど...

概要 最初のコーディング課題として、中央揃えの基本をマスターしましょう。 事前知識 ■文字や画像の中央揃えをしたい 中央にしたいものを囲む親要素に「text-align:center;」 例： ■エリア（ボックス）の中央揃えをしたい ①必ず...

概要 HTMLとCSSの新規作成 HTMLとCSSの接続 タグの記述とclassの記入 CSSの記述 初心者の場合、上記の基本的な工程が頭の中で繋がっていないことがよく見受けられます。 この辺りをハードルとして挫折しないようにしていきたいで...

概要 CSSに関する基礎的な課題です。 CSS指定の第一歩として取り組みましょう。 目的 簡易なCSS装飾指定をできるようになる。 (本当に基礎的なCSSの課題がWEB上に見当たらないので作成しました。) 文字装飾 背景色指定 背景画像指定...

概要 上記の課題の続きです。 サンプル こちらのサイトをコーディングしましょう。 サイト幅 横幅390px を想定する 納品形式　htmlおよびCSSデータ一式 参考サイト： 目的 簡易なWebページをコーディングできるようになる。 作業内...

概要 次の画像をデザインデータとしてコーディングし、WEBページとして作成してください。 ウインドウサイズ 390px を想定する 納品形式　htmlおよびcssファイル一式 目的 基本のCSSコーディングをマスターする。 Webパーツのコ...

概要 画像のパスの仕組みを理解します。 まずは初級に取り組んでからこちらの課題に取り組んでください。 初期状態では画像が表示されていません。画像が表示されるようにパスを入力しましょう。 目的 aタグ/imgタグの使い方、相対パスの使用方法を...

概要 ファイルを編集し、要素にアニメーションをつけてください。 トランジション アニメーションはトランジションを使用すること ホバーしたら発動 3秒かけて背景が黒に変わる ホバーを外す時もアニメーションが動くようにする キーフレームアニメー...

概要 ファイルを編集し、以下のようなレイアウトを作成してください。 横並びにはグリッドレイアウトを使用すること を使っても良い 目的 グリッドレイアウトの使い方の基本をマスターする。 データ 使用ソフト VisualStudioCode 答...

概要 必要なファイルを新規作成し、画像のようなフォームを作成しましょう。 目的 フォームタグの使い方を学習する。 ※データはありません。index.html style.cssなどを新規作成してください。 目標 デモ 使用ソフト Visua...