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
@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
<a href="#" class="news-link-text">テキストテキストテキストテキスト</a>
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
<p class="news-link-list">
<a href="#" class="news-link-text">テキストテキストテキストテキスト</a>
</p>
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
<main class="news-link-wrapper">
<p class="news-link-list">
<a href="#" class="news-link-text">テキストテキストテキストテキスト</a>
</p>
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
<main class="news-link-wrapper coutainer">
<p class="news-link-list-button">
<a href="#" class="news-link-text">一覧</a>
</p>
</main>
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. まとめ
- お知らせ・最新情報などの一覧を作成する
- 要素を追加、または、テキストが改行されたとき、自動で領域の高さを調節
- 右上に「一覧」ボタンを作成。クリックすると過去の記事が見れるページに飛ぶ想定