【HTML/CSS コーディング練習】入門編：フォトサイト2／1カラム

コンテンツ幅メインビジュアルが1000px、中のコンテンツが800pxです。 INDEX グレー背景にして枠線を引きます。画像 2列の横並びに配置します。 DETAIL 出版情報とテキストを横並びに配置します。間に罫線を引きます。レスポンシブブレークポイントは1024pxです。画像エリアの4枚の画像は1列で縦に並べます。 DETAILは出版情報とテキストを縦に並べて、間に罫線を引きます。

コーディングに迷ったらヒントをみよう！（レイアウト構成）

コーディングが完了したら確認しよう！

コーディングが完了したら、下記の「デモサイト」と「ソースコード」を参考に、自分の作ったサイトとコードをチェックしてみてください。

デモサイトソースコード

参考（模写コーディングの手順）

習慣化がゴールへの鍵

【発売中！】1冊で現場レベルのスキルが身につく実践入門書

書籍『HTML&CSS Webデザイン現場レベルのコーディング・スキルが身につく実践入門』が絶賛発売中です！

第1章【入門編】プロフィールサイト〜フレックスボックス
第2章【初級編】ブランドサイト〜ポジション
第3章【中級編】サービスサイト〜複数ページ
第4章【上級編】カフェサイト〜複数レイアウト
第5章【応用編】ランディングページ〜動きのあるWebサイト
第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

制作会社からのコーディング案件受注を目指す方

スキルに自信が持てずに営業を行うのが不安な方は、実際の案件と同じ流れでコーディングを行う「Codejump Pro」で案件のシミュレーションを行なってみてください。

案件の依頼内容やデザイン、仕様、納期、単価など全て実際の案件をモデルにしています。また、コーディング完了後に制作物を納品していただき、実際の案件と同じレベルで動作確認を行う納品チェックも行なっています。

ぜひ、営業前にCodejump Proを使って実案件のシミュレーションを行ってみてください。実務レベルのスキルが身につくだけでなく、案件の様子も分かるので自信を持って営業を行うことができるようになりますよ！

将来Web業界での活躍を目指す人のために、お役立ち情報や学習コンテンツを発信していきます。

コーディング練習一覧

ホーム
/ HTML
/ 【HTML/CSS コーディング練習】入門編：フォトサイト2／1カラム

入門編：基礎学習後の練習サイト
初級編：シンプルな練習サイト
中級編：複数ページの練習サイト
上級編：様々なレイアウトの練習サイト
応用編：jQueryを多用した練習サイト
実践編：実務レベルの練習サイト
番外編：よく使う HTML/CSS/jQuery の練習

入門：プロフィールサイト（前編）
入門：プロフィールサイト（後編）
入門：フォトサイト（前編）
入門：フォトサイト（後編）
初級：ポートフォリオサイト（前編）
初級：ポートフォリオサイト（後編）

WordPressでオリジナルサイトを作ろう
HTMLサイトをWordPress化しよう

模写コーディングの手順
模写コーディングのおすすめサイト
模写コーディングの初心者向けLP
模写コーディングが難しいと感じる理由と対処方法
【XD、Figma デザインカンプ無料配布】コーディング練習用【入門編～上級編】
【HTML+CSS練習】サンプルサイトで学ぶHTMLコーディング

Webサイトの公開手順
Codejumpがおすすめするレンタルサーバー
レンタルサーバーの契約の流れ
ドメインの取得方法
FileZillaのダウンロードとインストール方法
HTMLサイトを公開しよう

このサイトについて
運営者について
お問い合わせ
イベント情報
メディア掲載
サイトマップ
書籍特設ページ
Codejump Pro
よくある質問（Codejump Pro）
プライバシーポリシー
Twitter
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

📎📎📎📎📎📎📎📎📎📎