HTML&CSSベース

7941 ワード
html CSS TIL テキストリンク
HTMLとは?
ハイパーテキストタグ言語の略で、タグからなるウェブフレームワークのタグ言語です.
tag:不等号(<>)で囲まれたHTMLのデフォルトコンポーネント
TREE STRUCTURE
  • HTMLドキュメントへようこそ
  • html
  • head
  • title : Page Title
  • body
  • h1
  • div
  • span
    • SELF-CLOSING TAG
    タグ内部に内容がない場合(<tag></tag>に示すように)、<tag />とタグ付けされる.
    Semantic tag
    意味学には「意味的、意味論的」という意味がある.
    HTML 4は<div>タグを使用してすべての構造を作成し、HTML 5は<header><nav><section>などの記号タグを使用する.
    仮想タグを使用する理由
    既存の<div>タグでは、idまたはclassプロパティを使用して開発者ごとに名前を付けており、検索エンジンがhtmlファイルを分析する際にコンテンツを正確に分析することは難しい.しかし、HTML 5から提供される記号タグはタグの意味を持ち、サイトに関する情報を検索エンジンのスクロールに比較的正確に伝えることができる.
    シンボルマークの種類<article>:文書またはサイトから独立したコンテンツ領域を指定します.<aside>:ページの左側または右側にあるコンテンツ領域を示す<details>:その他の情報を記述する領域<dialog>:ダイアログまたはウィンドウを指定し、opneプロパティを使用して非表示または表示できます.<figure>:ドキュメントフローで理解するためのドラゴン図で、同余像を含む場合に使用します.<figcaption>:<figure>要素の見出しを指定<footer>:文書またはSectionの下部情報領域<header>:文書または上部情報領域の選択<main>:ドキュメントの主なコンテンツ領域を指定します.<mark>:タグまたは強調表示を示すテキスト<menuitem>:ポップアップメニューの項目の指定<nav>:ドキュメントナビゲーションを表します<section>:セクションは、通常、トピック固有のコンテンツグループであり、タイトルを有する
    CSS & SELECTOR
    CSSは、Webコンポーネントのスタイルを定義するための積層スタイルシートの略です.
    3種類のCSS応用方法
  • 外部cssファイルを作成し、linkタスクを使用してcss
    • を適用します.
      <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  • headラベルにスタイルラベルを使用してcss
    • を適用する
      <head>
    <style>
      html,
      body {
        margin: 0;
      }
      
      h1 {
        color : #000; 
      }
    </style>
  </head>
  • ラベルでスタイルプロパティを使用してcss
    • を適用する
      <h1 style="color:lightgray">Hello World</h1>
    CSSセレクタ
    CSSセレクタは、ブラウザがCSS属性値を適用するためにどのHTML要素を選択すべきかを示すモードです.
    例:
    h1 {
 color: red;
 font-size: 30px;
}
    これにより、HTMLドキュメント内の<h1>タグのすべてが{}内のcss属性値に適用されます.
    このように、ラベル名のほかに、選択者に与える方法があります.
    選択者タイプ
  • タイプ、クラス、idセレクタ
    • h1{
  color : red;
  font-size: 30px;
}
 
.box {
  border: 1px solid #000;   
}
  
#unique{
  background: lightgray;
}
  • 属性セレクタ
    • <!-- 요소에 특정 속성이 있는지에 따라 요소를 선택 -->
  
a[title] {
  text-decoration: none;  
}
  
<!--특정 값을 가진 속성의 존재 여부 기반 --> 
  
a[href="https://index.com"]{
 text-decoration: none; 
}
  • 擬似クラスおよび擬似要素
    • <!-- 요소의 특정 상태를 스타일링하는 pseudo-classes -->
a:hover{
 color: red;  
}
<!-- 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements -->
p::first-line{
  color: blue;
}
  • 結合子
    • <!-- 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합 -->

article > p {
 font-size: 30px;  
}
    Jpaマルチデータソース、データソースごとに個別のネーミングポリシーを構成
    MYSQL共通関数