コーディング練習問題 Gridレイアウト実践問題
概要ファイルを編集し、以下のようなレイアウトを作成してください。 横並びにはグリッドレイアウトを使用すること を使っても良い目的グリッドレイアウトの使い方の基本をマスターする。データ使用ソフトVisualStudioCode答え（作業完了後...
コーディング練習問題
コーディング練習問題 
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【flexbox版】
概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。今回はflexboxを使用してください。ポジションの場合は以下です。ヒント 文字を中央に置...
CSSレイアウトテクニック ヒーローイメージによくあるレイアウトを作る【position版】
概要コードを編集し、以下のようなレイアウトを作成してください。背景のグラデーションと文字装飾はすでに適用されているため、位置の指定を行なってください。ヒント 文字を中央に置こう！ 位置指定にはposition:absolute;を利用 he...
WEB制作基礎知識 ハンバーガーメニューから始めるjQuery
スマホサイトにハンバーガーメニューを実装しよう！スマホサイトを作った際にハンバーガーメニューによるメニュー表示の動作は欠かせません。jQueryの使い方をスマホメニューの作り方から学んでいきましょう。次のような動きのメニューを作成できます。...
コーディング練習問題 フォームを作ろう（HTMLのみ）
概要必要なファイルを新規作成し、画像のようなフォームを作成しましょう。目的フォームタグの使い方を学習する。※データはありません。index.html style.cssなどを新規作成してください。目標デモ使用ソフトVisualStudioC...
コーディング練習問題 サイトレイアウトの実践練習
概要コードをダウンロードし手順通りに作業しましょう。目的基本のpcレイアウトを学習する。目標手順①CSSの読み込みHTMLにCSSを読み込みましょう。reset.cssとstyle.cssがあります。<link rel="styleshee...
コーディング練習問題 ブロック要素のレイアウト練習
概要コードを編集し、以下の動画のようなレイアウトを作成してください。ヒントmarginの左右をautoにすると中央寄せ。margin-leftをautoにすると右寄せ。margin-rightをautoにすると左寄せ。目標目的ブロック要素の...
コーディング練習問題 Positionレイアウト練習②
概要コードを編集し、以下の動画のようなレイアウトを作成してください。positionのCSS指定で配置してください。 ヘッダーをスクロールに追従する位置に指定 「TOPへ戻る」ボタンをスクロールに追従させる（位置 下から10px 右から10...
コーディング練習問題 Positionレイアウト練習①
概要コードを編集し、以下の画像のようなレイアウトを作成してください。HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等を追記...
コーディング練習問題 Flexレイアウト練習
概要上記のコードを編集し、以下の画像のようなレイアウトを作成してください。HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等...
コーディング練習問題 Flexレイアウト実践問題
概要「index.html」等を新規作成し、以下のようなレイアウトを作成してください。 横並びにはflexboxでのレイアウトを使用すること 必要なdiv等は適宜追加し、適切なclass付けをすること 使用カラーは「#cca677」「#00...
コーディング練習問題 レイアウト書き込み問題
概要※印刷推奨PDFにWebサイトのスクリーンショットが掲載されています。横並びレイアウトが掲載されている箇所を探し、レイアウト用の枠線をかきこみなさい。記述例目的横並びレイアウトを行うには、要素の構造をしっかり作る必要があります。構造の作...