【HTML/CSS】お知らせ一覧のようなリンク集を制作する

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

## 1-1. この記事のやりたいこと
* お知らせ・最新情報などの一覧を作成する
* 要素を追加、または、テキストが改行されたとき、自動で領域の高さを調節
* 右上に「一覧」ボタンを作成。クリックすると過去の記事が見れるページに飛ぶ想定
![リンク集_完成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/9f903b7a-b0f8-740a-cde7-9cb21baae6e5.png)

## 1-2. 得た知識
* [リンクの下線をなくす](#2-1-3-ポイント)
* [行間を指定](#2-2-3-ポイント)
* [自動的に中身の要素の高さに合わせる](#2-3-3-ポイント)
* [親のボックスを基点に子要素を配置する](#2-4-3-ポイント)
* [ボックスの角を丸くする](#2-4-3-ポイント)

## 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. 共通事項
### 2-0-1. やりたいこと
* 文字コードを定義
* ブラウザの既定スタイルを解除する

### 2-0-2. コード
<details><summary>CSS</summary>

```markdown:CSS
@charset "utf-8";

*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
```
</details>

### 2-0-3. 参考文献
[HTML&CSSとWebデザインが1冊できちんと身につく本](https://www.amazon.co.jp/HTML-CSS%E3%81%A8Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%81%8C1%E5%86%8A%E3%81%A7%E3%81%8D%E3%81%A1%E3%82%93%E3%81%A8%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8F%E6%9C%AC-%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88-%E6%9C%8D%E9%83%A8-%E9%9B%84%E6%A8%B9/dp/4297125102/ref=asc_df_4297125102/?tag=jpgo-22&linkCode=df0&hvadid=553954433678&hvpos=&hvnetw=g&hvrand=12266084422123572068&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9053270&hvtargid=pla-1465238908295&psc=1&th=1&psc=1)
[grid-auto-rows](https://developer.mozilla.org/ja/docs/Web/CSS/grid-auto-rows)

<!-- -------------------2-1------------------- -->
## 2-1. リンクの色と下線を変更する
### 2-1-1. やりたいこと
* リンクの色を黒に変更
* 下線をなくす
![リンク集_リンク.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/12bc0ee6-fedc-739d-cf49-78a4f28a3b1e.png)


### 2-1-2. コード
<details><summary>HTML</summary>

```markdown:HTML
    <a href="#" class="news-link-text">テキストテキストテキストテキスト</a>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .news-link-text {
  text-decoration: none;
  color: black;
}
```
</details>

### 2-1-3. ポイント

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

<!-- -------------------2-2------------------- -->
## 2-2. 5行のリンク集を作成
### 2-2-1. やりたいこと
・5行のリンク集を作成
・行間は1.5
![リンク集_リンク集.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/28a07404-df30-a8fe-24dd-453e0ac2d027.png)


### 2-2-2. コード
<details><summary>HTML</summary>

```markdown:HTML
    <p class="news-link-list">
      <a href="#" class="news-link-text">テキストテキストテキストテキスト</a>
    </p>
```
</details>

<details><summary>CSS</summary>

```markdown:CSS
 .news-link-list {
  line-height: 1.5;
}
```
</details>

### 2-2-3. ポイント

:::note
**行間を指定**
line-height
:::

### 2-2-4. 参考文献
[CSSで行間を調整する方法～line-heightプロパティの使い方～](https://proengineer.internous.co.jp/content/columnfeature/5922)

<!-- -------------------2-3------------------- -->
## 2-3. 要素が追加されたとき、自動で高さを調節する
### 2-3-1. やりたいこと
![リンク集_高さ自動.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/876742a7-55f7-dfc2-31c1-6446709d461d.png)


### 2-3-2. コード
<details><summary>HTML</summary>

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

<details><summary>CSS</summary>

```markdown:CSS
.news-link-wrapper {
  height: auto;
 
```
</details>

### 2-3-3. ポイント

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

### 2-3-4. 参考文献
[CSSでheight:autoの使い方を現役エンジニアが解説【初心者向け】](https://techacademy.jp/magazine/26588)

<!-- -------------------2-4------------------- -->
## 2-4. リンク集領域の右上に一覧ボタンを作成する
### 2-4-1. やりたいこと
* 「position」を使って、右上にボタンを配置する
* ボタンの角を丸める
![リンク集_ボタン.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1483743/bfa71f1b-bc02-0ed1-cd86-5d49a3cff1c2.png)


### 2-4-2. コード
<details><summary>HTML</summary>

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

<details><summary>CSS</summary>

```markdown: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; 
}
```
</details>

### 2-4-3. ポイント

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

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


### 2-4-4. 参考文献
[CSSのpositionを総まとめ！absoluteやfixedの使い方は？](https://saruwakakun.com/html-css/basic/relative-absolute-fixed)
[今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！](https://www.webcreatorbox.com/tech/border-radius)


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


## 3-1. 得た知識
* [リンクの下線をなくす](#2-1-3-ポイント)
* [行間を指定](#2-2-3-ポイント)
* [自動的に中身の要素の高さに合わせる](#2-3-3-ポイント)
* [親のボックスを基点に子要素を配置する](#2-4-3-ポイント)
* [ボックスの角を丸くする](#2-4-3-ポイント)