コーディング練習問題 CSSアニメーション練習問題
概要 ファイルを編集し、要素にアニメーションをつけてください。 トランジション アニメーションはトランジションを使用すること ホバーしたら発動 3秒かけて背景が黒に変わる ホバーを外す時もアニメーションが動くようにする キーフレームアニメー...
コーディング練習問題
コーディング練習問題 
コーディング練習問題 Gridレイアウト実践問題
概要 ファイルを編集し、以下のようなレイアウトを作成してください。 横並びにはグリッドレイアウトを使用すること を使っても良い 目的 グリッドレイアウトの使い方の基本をマスターする。 データ 使用ソフト VisualStudioCode 答...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【flexbox版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 今回はflexboxを使用してください。 ポジションの場合は以下です。 ヒント 文字...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【position版】
概要 コードを編集し、以下のようなレイアウトを作成してください。 背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。 ヒント 文字を中央に置こう！ 位置指定にはposition:absolute;を利用...
コーディング練習問題 フォームを作ろう（HTMLのみ）
概要 必要なファイルを新規作成し、画像のようなフォームを作成しましょう。 目的 フォームタグの使い方を学習する。 ※データはありません。index.html style.cssなどを新規作成してください。 目標 デモ 使用ソフト Visua...
コーディング練習問題 サイトレイアウトの実践練習
概要 コードをダウンロードし手順通りに作業しましょう。 目的 基本のpcレイアウトを学習する。 目標 手順 ①CSSの読み込み HTMLにCSSを読み込みましょう。 reset.cssとstyle.cssがあります。 <link rel="...
コーディング練習問題 ブロック要素のレイアウト練習
概要 コードを編集し、以下の動画のようなレイアウトを作成してください。 ヒント marginの左右をautoにすると中央寄せ。 margin-leftをautoにすると右寄せ。 margin-rightをautoにすると左寄せ。 目標 目的...
コーディング練習問題 Positionレイアウト練習②
概要 コードを編集し、以下の動画のようなレイアウトを作成してください。 positionのCSS指定で配置してください。 ヘッダーをスクロールに追従する位置に指定 「TOPへ戻る」ボタンをスクロールに追従させる（位置 下から10px 右から...
コーディング練習問題 Positionレイアウト練習①
概要 コードを編集し、以下の画像のようなレイアウトを作成してください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等...
コーディング練習問題 Flexレイアウト練習
概要 コードを編集し、以下の画像のようなレイアウトを作成してください。 HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。 style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等...