1. はじめに

HTML/CSSを勉強して1ヶ月も経っていない人間による備忘録です。
間違い、冗長なコードがあります。
最適方法やアドバイスなどコメントいただけると幸いです。

1-1. この記事のやりたいこと

お知らせ・最新情報などの一覧を作成する
要素を追加、または、テキストが改行されたとき、自動で領域の高さを調節
右上に「一覧」ボタンを作成。クリックすると過去の記事が見れるページに飛ぶ想定

1-2. 得た知識

リンクの下線をなくす
行間を指定
自動的に中身の要素の高さに合わせる
親のボックスを基点に子要素を配置する
ボックスの角を丸くする

1-3. 記事作成までにやったこと

Progate：HTML/CSS、一周
Udemy：ちゃんと学ぶ、HTML/CSS + JavaScript、セクション3まで
HTML&CSSとWebデザインが1冊できちんと身につく本：流し読み
1冊ですべて身につくHTML & CSSとWebデザイン入門講座：流し読み
HTML5＆CSS3デザイン現場の新標準ガイド[第2版] ：適宜確認

1-4. 開発環境

ブラウザ　：GoogleChrome
バージョン：100.0.4896.88

スクリーン解像度：1920×1080

1-5. この記事の注意事項

・わかりやすいよう
　background-colorやborderなどを指定していますが、
　目的以外のコードは割愛しています。

・前回からコードの変更がないことろも割愛しています。

ってことで、それでは作っていくっ！！

2. 実装

2-0. 共通事項

2-0-1. やりたいこと

文字コードを定義
ブラウザの既定スタイルを解除する

2-0-2. コード

CSS

CSS

@charset "utf-8";

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

2-0-3. 参考文献

HTML&CSSとWebデザインが1冊できちんと身につく本
 grid-auto-rows

2-1. リンクの色と下線を変更する

2-1-1. やりたいこと

リンクの色を黒に変更
下線をなくす

2-1-2. コード

HTML

HTML

    <a href="#" class="news-link-text">テキストテキストテキストテキスト</a>

CSS

CSS

 .news-link-text {
  text-decoration: none;
  color: black;
}

2-1-3. ポイント

下線をなくす
text-decoration: none;

2-2. 5行のリンク集を作成

2-2-1. やりたいこと

・5行のリンク集を作成
・行間は1.5

2-2-2. コード

HTML

HTML

    <p class="news-link-list">
      <a href="#" class="news-link-text">テキストテキストテキストテキスト</a>
    </p>

CSS

CSS

 .news-link-list {
  line-height: 1.5;
}

2-2-3. ポイント

行間を指定
line-height

2-2-4. 参考文献

CSSで行間を調整する方法～line-heightプロパティの使い方～

2-3. 要素が追加されたとき、自動で高さを調節する

2-3-1. やりたいこと

2-3-2. コード

HTML

HTML

  <main class="news-link-wrapper">
    <p class="news-link-list">
      <a href="#" class="news-link-text">テキストテキストテキストテキスト</a>
    </p>

CSS

CSS

.news-link-wrapper {
  height: auto;

2-3-3. ポイント

height:autoは自動的に中身の要素にピッタリの高さにするプロパティ

2-3-4. 参考文献

CSSでheight:autoの使い方を現役エンジニアが解説【初心者向け】

2-4. リンク集領域の右上に一覧ボタンを作成する

2-4-1. やりたいこと

「position」を使って、右上にボタンを配置する
ボタンの角を丸める

2-4-2. コード

HTML

HTML

  <main class="news-link-wrapper coutainer">
    <p class="news-link-list-button">
      <a href="#" class="news-link-text">一覧</a>
    </p>
  </main>

CSS

CSS

.coutainer {
  position: relative;
}

 .news-link-list-button {
  position: absolute;
  top: 2px;
  right: 2px;

  height: auto;
  width: auto;

  padding: 0.6px;

  border-radius: 3px;
  border: 1px solid black; 
}

2-4-3. ポイント

親のボックスを基点に子要素を配置する(絶対配置)
親要素に「position: relative;」
子要素に「position: absolute;」

ボックスの角を丸くする
border-radius

2-4-4. 参考文献

CSSのpositionを総まとめ！absoluteやfixedの使い方は？
今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！

3. まとめ

お知らせ・最新情報などの一覧を作成する
要素を追加、または、テキストが改行されたとき、自動で領域の高さを調節
右上に「一覧」ボタンを作成。クリックすると過去の記事が見れるページに飛ぶ想定