HTML/CSS　PM的視点からの要点まとめ

投稿者: Auther | 1 年, 7 ヶ月 前 | 0 のコメント

HTMLのブロック分解

WEBページというものは大きなブロックの中に小さなブロックが集まってできているもの。

HTML要素は、通常、次のようにブロックに分解することができます。

  1. <html>ブロック：これはHTMLページのルート要素であり、すべてのHTML要素はこのブロック内に配置されます。

  2. <head>ブロック：これはHTMLページのヘッダーを定義するための要素です。このブロックには、ページのタイトル、CSSスタイルシート、スクリプト、キーワードなどの要素が含まれます。

  3. <body>ブロック：これはHTMLページの本文を含む要素であり、ページ上に表示されるコンテンツを定義します。このブロックには、テキスト、画像、リンク、ボタン、テーブル、フォームなどの要素が含まれます。

  4. <div>ブロック：これはHTMLページの領域をグループ化するための要素であり、CSSスタイルシートを適用することができます。

  5. <section>ブロック：これはHTMLページの大きな範囲をグループ化するための要素であり、見出しを含むことができます。

  6. <header>ブロック：これはHTMLページのヘッダーを定義するための要素であり、見出し、画像、ロゴなどの要素を含むことができます。

  7. <nav>ブロック：これはHTMLページのナビゲーションを定義するための要素であり、リストやリンクなどの要素を含むことができます。

  8. <article>ブロック：これはHTMLページの記事を含む要素であり、ブログ投稿、ニュース記事、雑誌記事などの要素を含むことができます。

  9. <footer>ブロック：これはHTMLページのフッターを定義するための要素であり、著作権情報、連絡先情報などの要素を含むことができます。

これらのブロック要素は、ウェブページの構造を明確にするために使用されます。ウェブ開発者は、これらの要素を使用して、視覚的な階層構造を作成し、ユーザーがページ上で見たり相互作用したりするコンテンツを整理することができます。

class属性の追加

不必要なスタイリングの上書きを防ぎ、別のページで意図せずレイアウトの崩れを引き起こさないようにするために、極力class属性をつけてスタイリングする。

メインエリアに3つの箱を作る

sectionタグを使用

<section class="main-hero"></section>
<section id="works" class="main-works"></section>
<section id="about" class="main-about"></section>

CSSコーディング

コンテンツのサイズを自動調整

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

内部リンクスクロールをスムーズに

html {
  scroll-behavior: smooth;
}

＜Body＞にフォントの色と種類を設定

body {
  color: #3a4454;
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

<h1> ～　<h3>にタイトルのスタイルを設定

要素が抜けたときの影響を最小限に

h1, h2 {
  font-family: "Piazzolla", "Times New Roman", "YuMincho",
    "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  line-height: 1.4;
}
h2, h3 {
  margin-top: 0;
  font-weight: 700;
}

h1 {
  margin-top: 0;
  font-weight: 500;
}

h2 {
  text-align: center;
}

<ul>のデフォルトスタイルを打ち消す

ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

<p>の行間を設定

p {
  line-height: 1.8;
}

<img>が柔軟にリサイズできるように

figure {
  margin: 0;
}

img {
  max-width: 100%;
}

<a>の下線を打ち消す

a {
  text-decoration: none;
}

hover時にアニメーションが起きるように

a, input, textarea {
  transition: all 0.15s ease-in-out;
}

送信ボタンにカーソルを合わせたときの効果を追加する

input[type="submit"]:hover {
  cursor: pointer;
}

共通クラスのコーディング

コンテイナーのスタイリングを追記する

/* --------------------------------------
  Reusable Classes
-------------------------------------- */

.container {
  max-width: 1280px;
  margin: 0 auto;
}

containerは最大幅と中央揃えの設定だけに絞る

ボンタンはprimaryとsecondaryで色だけ変更する

button {
  display: inline-block;
  padding: 10px 15px;
  border: none;
  border-radius: 3px;
  color: #FFF7F7;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-decoration: none;
}

ボタンの色を設定する

.button-primary {
  background-color: #53687E;
}
紺色のボタンのデフォルトカラー

.button-secondary {
  background: #6B4E71;
}
紫色のボタンのデフォルトカラー

.button-primary:hover,
.button-primary:focus {
  background-color: #495B6F;
}
紺色のボタンにカーソルをあてる、もしくはフォーカスしたときのカラー

.button-secondary:hover,
.button-secondary:focus {
  background: #5D4462;
}
紫色のボタンにカーソルをあてる、もしくはフォーカスしたときのカラー

social-linkはレイアウトの設定だけ

最初の<li>は左に<li>がないのでmarginがつかない

.social-links {
  display: flex;
  flex-wrap: wrap;
  font-size: 2rem;
}

.social-links li + li {
  margin-left: 20px;
}

Headerのコーディング

headerで一貫している注目すべき点は「テキストのスタイル」「左右で分かれるレイアウト」「スクロールで追従してくること」

テキストのスタイリング

/* --------------------------------------
  Header
-------------------------------------- */
テキストのスタイリングの追記
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;　#間に余白を入れる
  position: fixed;　＃ヘッダーが追従
  z-index: 2;　　　 ＃ヘッダーが追従
  width: 100%;
  background-color: #6B4E71; #背景色設定
  color: #FFF7F7;
  font-family: "Piazzolla", "Times New Roman", "YuMincho",
    "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-weight: 700;
}
ヘッダーロゴのレイアウトを設定
.header-logo {
  display: flex;
  align-items: center;
}
メニューボタンの文字色を設定する
.header-nav-menu {
  display: flex;
}
メニューボタンの文字色を設定する
.header-nav-menu-item > a {
  color: #FFF7F7;
}
hover focusしたときの色変化
.header-nav-menu-item > a:hover,
.header-nav-menu-item > a:focus {
  color: #FFC4C4;
}

 mainのコーディング

/* --------------------------------------
  Main - Hero
-------------------------------------- */
背景色と文字色の設定
.main-hero {
  background-color: #6B4E71;
}

.main-hero-highlight,
.main-hero-highlight-links a {
  color: #FFF7F7;
}

.main-hero-highlight-links p {
  font-size: 1.2rem;
}
<p>直下の子要素である<a>だけに適用
.main-hero-highlight-links p > a {
  text-decoration: underline;
}

.main-hero-highlight-links a:hover,
.main-hero-highlight-links a:focus {
  color: #FFC4C4;
}

/* --------------------------------------
  Main - Works
-------------------------------------- */

.main-works {
  background-color: #FFF7F7;
}

.main-works-item:last-child {
  margin-bottom: 0;
}

.main-works-item-img img {
  border-radius: 5px;
}

.main-works-item-img.primary img {
  box-shadow:
    1px 1px 10px rgba(0, 0, 0, 15%),
    10px 10px 0 #53687E;
}

.main-works-item-img.secondary img {
  box-shadow:
    1px 1px 10px rgba(0, 0, 0, 15%),
    10px 10px 0 #6B4E71;
}

/* --------------------------------------
  Main - About
-------------------------------------- */

.main-about {
  background-color: #FFF;
}

.main-about-addition-skills ul {
  padding-left: 20px;
  list-style: disc;
}

.main-about-addition-follow a {
  color: #C2B2B4;
}

.main-about-addition-follow a:hover,
.main-about-addition-follow a:focus {
  color: #AB9698;
}

現在未評価

現在コメントはありません

新しいコメント

必須

記入が必要です(公開はされません)

オプション

最近の投稿

アーカイブ

2024
2023
2021
2020

タグ

多義語(1) 英語原論(15) 単語　上級(12) コラム(7) mezzanine(1) サブスリー(4) music(11) 海外移住(2) 文化(2) 政治(2) nujabes(3) ランニング(5) 発音(14) django(4) 文法(15) 文法問題(1) 教育論(3) 転職(2) 仕事(1) アニメ(1) cowboy bebap(26) TOEIC(1) 歴史(2) vuejs(7) 経済(1) lesencrypt(1) データサイエンス(1)

著者

Auther (120) admin (2)

フィード

RSS / Atom

Social Links

運営より

当ウェブサイト内のコンテンツ（文章、写真、イラスト、サイト構造など）に関する著作権等は 弊社、または制作者などに帰属しております。営利、非営利を問わず、当ウェブサイトのコンテンツの全て 、または一部を許可なく複製、転用、販売など二次利用することはご遠慮ください。

目覚めよ！英語力