TIL 05|Cssベース

2177 ワード
TIL CSS テキストリンク
前章では,HTMLがウェブ構造を作成するための注釈言語であることを確認した.
本章ではCSSについて学びました.
CSSは、HTMLなどの表記言語の使い方を決める積層スタイルシートの略です.
HTMLがWebページの構造を担当する場合、CSSは組織構造の外部と内部を担当します.
同じHTML構造のドキュメントに異なるCSSファイルを適用すると、まったく異なるWebサイトのように見える場合があります.

Achievement Goals

  • CSSの使用目的は理解できる.
  • フロントエンド開発者の基礎素質を理解することができます.
  • CSSの基本構文と構造は理解できる.
  • CSSをHTMLに適用する方法について説明します.
    CSSをHTMLで直接定義することを推奨しない理由が理解できます.

    • CSSは造形用のツールです


    同じ構造と論理であれば、CSSを使用するWebアプリケーションはもちろんより良いWebアプリケーションです.
    しかし、私たちが服を着るとき、いつも審美的な理由で服を着るのではないように、CSSも華やかさのために使われているわけではありません.
  • コンテンツの配置と位置(レイアウト設計)
    • 最小のフォントレイアウト(Typhography)、たとえば
  • のテキストを強調表示したり、下線を引いたりします.
    上記の要素を使用すると、より良いユーザー体験が得られます.
    CSSは、他のCSSファイルを既存のウェブページに適用し、活字メディアとして出版したり、色が弱くなったり、障害者がウェブページを使用したりする際に助けを提供したりすることができます.

    CSSはデザイナーの分野ですか?


    私はサーバー開発者になるか、設計感がないなどの考えが基本的な素質を学ぶのを妨げます.
    CSSを作成して簡単なUIを作成することは開発者の基本的な素質である.上記の内容を適切な位置に配置するレイアウト設計は、デザイナーでなくてもできるはずです.

    フロントエンド開発者になるには...


    ユーザがWebサービスを利用する場合,Chromeのようなブラウザが表示する部分をフロントエンド(フロントエンド,Front-end)と呼ぶ.
    また,開発フロントエンドのフロントエンド開発者は,レイアウト設計やフォント印刷を処理できる必要がある.
  • 画面構成またはレイアウト(レイアウト設計)
  • 太字フォントや色などを採用し、
    • 次の内容は、フロントエンド開発者にとって良い選択であり、なくても大きな違いはありません.
  • 配列または配色に対する感覚
  • UXを考え、UXを適用するWebまたはアプリケーションを分析します.
    /* 여기부터 */
.menu-item {
  text-decoration: underline;
}
/* 여기까지가 변경된 CSS 입니다! 이전 화면과 비교해서 무엇이 달라졌나요? navigation list 에만 밑줄이 생긴 것을 볼 수 있습니다.*/
.selected {
  font-weight: bold;
  color: #009999;
}

#navigation-title {
  color: red;
}
body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #4a4a4a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
header, footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
  flex: 0 0 180px;
  padding: 0 10px;
}
main {
  background: #f9f9f9;
  flex: 1;
  padding: 0 20px;
}
aside {
  background: #eee;
  flex: 0 0 130px;
  padding: 0 10px;
}
.container {
  display: flex;
  flex: 1;
}
    Htmlファイルにcsファイルを作成し、サイトを簡単に整理できます.
    • 2 D時計効果を実現
    04-拡大鏡特効