A DIARY

2015年

5月4日

CSSの基本 今日はhtmlとCSS 勉強しようまだまだ＜ｐ＞のタグぐらいか・・理解できたかな特殊記号を文字コードで記す、Blakck＆Deckerの電動ノコとドリルドライバーを車で購入に行く。


l これがitalic体 l 思い出した！この花は？名前は思い出せない

-- Canape−リンク --


CSS(css3)色表示HSLA要素

HSLとはhue(色相)、Saturation(彩度)、Lightness(明度)の事で、それに不透明度のAを足したのがhslaです。指定の仕方は、色相のhueは、赤の0度からはじまって同じく
赤の360度で終わるカラーサークル(色相環)の色の角度で指定します。 Saturation(彩度)とLightness(明度)は%の単位で指定します。彩度が100%でもっとも鮮やかになり、0%ではその逆になります。明度は100%で白になり、0%で黒になります。
50%が標準の明度の状態になります。不透明度の値は0~1で、0は透明、1は不透明です。 

 指定の仕方は、
             
   ●色相のhueは、赤の0度からはじまって同じく赤の360度で終わるカラーサークル(色相環)の色の角度で指定します。
            
   ●Saturation(彩度)とLightness(明度)は%の単位で指定します。彩度が100%でもっとも鮮やかになり、0%ではその逆になります。
             
   ●明度は100%で白になり、0%で黒になります。50%が標準の明度の状態になります。
             
   ●不透明度の値は0~1で、0は透明、1は不透明です。
　　　　　

Pの場合

   CSSで p.sample {background: hsla(色相,彩度,明度,不透明度); }

<p style="border-style: solid; border-width: thin; background: hsla(180,50%,50%,0.8);">―</p>

  ―ハイフン部分の文字列が線で囲まれる、1px で同じ太さ。 参照サイト

<p style="border-style: solid; border-width: 2px; background: hsla(90,50%,50%,0.8);">-</p>

  ―ハイフン部分が囲線,2px太さ、色相90に変えた。 参照サイト


tableの場合

HTML側CSS部分
<p class="demo1">背景1</p>
 .demo1 { background: hsla(180,50%,50%,0.1);} hsla参照サイト

カラーコードの場合

カラーコード変換ツール参照サイト

同じ赤色、指示４つのやり方がある

  1. redの場合。
  2. #f00の場合。
  3. rgba( 255, 0, 0, 1 )の場合。
  4. hsla( 360, 100%, 50%, 1)の場合。
hslaの使い方こちら！

CSSリンク

CSS 3つの置く場所
CSS (cascating style sheetsの意味) 令和2年4月
  1. [ タグの間のインラインで適用 インラインスタイル宣言 ]
    <p>タグや<span>タグでくくる。
    <p style= " 属性 : 属性値; 属性 : 属性値 " >
    <span style="font-size:2em;color: blue">大きく</span>参考


    2. 　
  2. [ ヘッダー内設置してそのページだけ適用 ]
    <head>内に <style>cssで記述宣言そしてbodyの中に・h1・ p・ divなどタグに反映させる。


    3. 　　　
  3. [ 外部スタイルシート宣言 ]
    HTML 文書にある <head> 要素の中にコード [ <link rel="stylesheet" href="styles.css">　 ]
    この場合 ” styles.css ” 相対パスを使いフォルダー内にHtmlとは別のcssファイル作りつなぐ
    階層　別フォルダーのときは　　../styles.css　　
    シャープ/ナンバー
     <div id =”contents”> → css側　#contents{ }
    ドット/ピリオド　
     <div class =”contents”> → .contents
    html側の例
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞の下に
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" href="styles.css">　 のように書く最近は type="text/css" 入らない 。

参考サイトMDN css入門

※CSS には vw, vh, vmin, vmax という単位がある

CSSの記号

関連サイト
  • 「,」（カンマ）の意味
    「,」（カンマ）は、複数の要素を指定する際に利用するセレクタです。複数の要素にスタイルを適用したい場合は、「,」（カンマ）で区切って利用しましょう。
  • 「.」（ドット）の意味
    「.」（ドット）は、指定したclass名の要素にスタイルを適用するクラスセレクタです id名と異なり、class名は同じHTML文書内で何度も利用できる
  • 「#」の意味
    「#」は、指定したid名の要素にスタイルを適用するIDセレクタです。 id名は1つのHTML文書内で、一意の名称にする必要があります。
  • 「*」の意味
    「*」は、すべての要素にスタイルを適用する全称セレクタです。指定の方法により、適用する要素の範囲を指定できます。 
    --- [CSS]----------
 * { color: red; }
 div * { color: blue; font-size: 20px; } 
 
--- [HTML]---------- 
＜p>fontが赤色＜/p>
＜div＞
    ＜p＞font-sizeが20pxで青色に＜/p＞
    ＜ul＞＜li＞サイズ20px、青色リスト＜/li＞＜/ul＞
＜/div＞
＜ol＞＜li＞赤色リスト＜/li＞＜/ol＞

    「*」を単体で利用すると、すべての要素に適用されます。例のように「div」要素を加えると、divタグの配下の要素全てに適用されるスタイルとなります。
  • 「>」の意味
    「>」は、指定した要素の直下にある要素にスタイルを適用します。子要素にのみスタイルを適用するということですね。 
    • --- [CSS]----------

 div .sample > p { color: red; font-size: 15px; } 
 
--- [HTML]---------- 

＜div class="sample"＞
    ＜p＞font-sizeが15pxで赤色に＜/p＞
    ＜span＞
        ＜p＞スタイルは適用されない＜/p＞
     ＜/span＞
＜/div＞
  • 「+」の意味
    「+」は、指定した要素に隣接する要素にスタイルを適用します。「>」と似ていますが、子要素ではなく「隣接する要素」にのみ適用します。
  • 「~」の意味
    「~」は、「+」と似ていますが、指定した要素の後にある要素全てに適用されます。 「+」よりも適用される範囲が広いことを覚えておきましょう。
  • 「$」の意味
    「$」は今までのセレクタと異なり、要素ではなく属性を指定する際に使用する記号です。 「$」について説明する前に、要素ではなく属性を指定するセレクタを見てみましょう
    下図はリンク3は、フォントカラーが赤色の太字となります。 
    --- [CSS]----------
a[href="#"] { color: red; font-weight: bold; } 
 
--- [HTML]---------- 

＜a href="#"＞リンク1＜/a＞＜br＞
＜a href="#"＞リンク2＜/a＞＜br＞
＜a href="https://www.hoge.com">リンク3＜/a＞＜br＞
＜a href="https://www.hoge.jp">リンク4＜/a＞＜br＞


    リンク1とリンク2は、フォントカラーが赤色の太字となります。
   ＜css＞--------------
   a[href="#"]{
     color: red;
     font-weigght: bold;
   }
 ＜hrml＞ -----------------------
 ＜a href="#">リンク1＜/a＞＜br＞
 ＜a href="#">リンク2＜/a＞＜br＞
 ＜a href="https://www.hoge.com">リンク3＜/a＞＜br＞
 ＜a href="https://www.hoge.jp">リンク4＜/a＞＜br＞
   

    --- [CSS]----------
「リンク３だけグリーンになる」

a[href$="com"] { color: green;} 
 
--- [HTML]---------- 

＜a href="#"＞リンク1＜/a＞＜br＞
＜a href="#"＞リンク2＜/a＞＜br＞
＜a href="https://www.hoge.com">リンク3＜/a＞＜br＞
＜a href="https://www.hoge.jp">リンク4＜/a＞＜br＞

    リンク1
    リンク2
    リンク3
    リンク4
    こちらの方がいいかも
    「[]」で囲まれたなかで属性を指定してしており、これまでのセレクタと違うことがわかりますでしょうか。 上記の例では、aタグのhref属性の値が「#」のものにスタイルを適用する指定です。リンク1とリンク2は、フォントカラーが赤色の太字となります。 「$」は、この属性を指定する際に利用される記号であり、「$」は「属性値が指定した値で終わるもの」という意味になります。
  • 「&」の意味
    「&」もCSSでは特殊な記号であり、CSSを拡張するためのLessやSass（Scss）などを利用する際に使われる記号です。「&」は親セレクタを参照する意味を持ちます。
  • 「:link」の意味
    「:link」は、未訪問リンクのスタイルを指定する擬似クラスです 
    --- [CSS]----------


a : link { color: red;} 
 
--- [HTML]---------- 

＜a href="#"＞未訪問リンクを赤色＜/a＞
  • 「:visited」の意味
    「:visited」は、訪問済みリンクのスタイルを指定する擬似クラスです。 
    --- [CSS]----------


a : visited { color: green;} 
 
--- [HTML]---------- 

＜a href="#"＞訪問リンク済を緑色＜/a＞
  • 「:hover」の意味
    「:hover」は、指定の要素にマウスカーソルなどが乗った際のスタイルを指定する擬似クラスです。 
    • --- [CSS]----------
a :hover { 
        color: green;
        font-weight: bold;
        font-size: 20px;
        } 
 
--- [HTML]---------- 

＜a href="#"＞カーソルを乗せると20pxの緑太字に＜/a＞
    カーソルで20pxの緑文字
  • 「::first-letter」の意味
    「::first-letter」は、指定した要素の最初の文字スタイルを指定する擬似要素です。 
    • --- [CSS]----------
 p .sample ::first-letter { 
        color: green;
        font-weight: bold;
        font-size: 30px;
        } 
 
--- [HTML]---------- 

＜p href="sample"＞最初の文字だけ30pxの緑太字に＜/p＞
参考させて頂きました：サイト名”Kredo Blog”
UP top

複雑なCSSファイルを分けて書く



　 〜〜〜〜〜〜〜〜〜〜簡単なホームページの表現[目次]にもどる〜〜〜〜〜