Zenn
😁

初見サイトを3hで倒すことに成功

2025/04/13に公開
プログラミング初心者
htmlcss
webサイト制作
毎日投稿
模写コーディング
tech

📅 今日の模写コーディング振り返り（2025/04/13）

✅ 今日の作業内容

  • 作業時間
    合計：11h15min
    コーディング：5h7min
  • やったこと：
    ・1カラムサイト（CodeJump自己紹介サイト）の続き
    ・サイト模写（CodeJump写真紹介サイト）
    -　レイアウト作成（SP版手書き図解，Emmetで大まかに構造メモ）25min
    -　HTML構築　20min
    -　CSSスタイリング　2h55min
    -　レスポンシブ対応　1h13min
    -　全体微調整　　　　14min

🔍 学んだこと・気づき

HTML / CSSのエラー対応・修正
ケアレスミスでHTMLCSSの作業時間をロスしていると感じた。各工程で完成したら一度✓する癖付けが必要！

🧠 HTML / CSSのエラー対応・修正

  • <header> にスタイルが効かなかった → クラス名のスペルミスが原因
  • .book-info に border-bottom をつけたのに違う場所に線が出た → 閉じタグの位置がずれていた
  • .book-info が .book-contents まで囲ってしまっていた → タグの構造を見直して修正
  • @media screen (min-width:1025px) → and が抜けていたのが原因で無効に
  • text-align: center の影響で、ol の番号が中央揃えに追従しなかった → list-style-position: inside; で解決

✍ コーディングテクニック・書き

✅Google Fontsの取り込み方法（CSS）

Googlefontサイトへ行く→目当てのフォントをダウンロード，HTMLCSSのコードコピー
→デスクトップに右クリック：すべて展開→HTMLCSSにペースト

✅画像のトリミング＋中央表示

（例）メインビジュアル
.mainvisual {
height: 400px;
overflow: hidden;
}
.mainvisual .img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}

✅olタグのあれこれ

・liststyle復活させる方法
ol {
liststyle:decimal;
}
・リストのナンバリングと見出しを揃える
ol {
padding-left: 0;
list-style-position: inside;
text-align: center;
}
h2 {
text-align: left;
padding-left: 30px; /* 必要に応じて調整 */
}

✅「著者　出版社　発行年」など、項目＋値を横並びにする方法

・ HTML（マークアップ）
<div class="book-info">
<div class="info-item">
<span class="label">著者</span>
<span class="value">タイトルタイトルタイトル</span>
</div>
<div class="info-item">
<span class="label">出版社</span>
<span class="value">タイトルタイトルタイトル</span>
</div>
<div class="info-item">
<span class="label">発行年</span>
<span class="value">タイトルタイトルタイトル</span>
</div>
</div>
・CSS（スタイリング）
.book-info {
padding: 16px;
}
.info-item {
display: flex;
margin-bottom: 8px;
}
.label {
width: 80px; /* ラベルの幅を固定 */
}
.value {
flex: 1;
}

🔜 明日やること（4/14）
CodeJump入門編フォトサイト２完成（作業時間をメモ）
CodeJump初級編ストアサイト完成
Zennに振り返りを投稿

💬 今日の一言メモ
正確に再現する力がついてきている！
使い慣れていないデザインが出てきたりエラーが起こると
3ｈ以上かかることもあるが…。
しっかり寝る前に振り返り、
次の日にちらっと復習をして同じミスに時間を取られないようにする。
新しく覚えたことは積極的に使ってみる。
作業時間を数十分でも減らしていく！

Discussion