ゼロから始めるエンジニアへの道 #10 ~html or css~ - 初心者がエンジニアに転職するための、壁打ちブログ('ω')

学習範囲

・別のscript導入（cssのscriptを、<ink>で読み込む)
・Chromeconsole

セレクターとプロパティの設定

・前提
・VSコードはプロパティをカラー属性を導入する場合、わかりやすく表記してくれます

f:id:Takeda2864:20200518172221p:plain — Bodyの<h1>←のテキストcollarを赤文字に変更するよという意味です。

1.このように CSS ではどこにどんなスタイルをあてるかを設定していきます。
2..この「どこに」（画像<h1>）の部分をセレクター、「どのようなスタイルを」<style>+{color red (属性)}>の部分をプロパティと呼ぶので、用語として暗記

HPやLPの作りついて

・テキストを含め、コンテンツ自体は別のscriptを格納して作成しているらしい

・上記に書いたように、html/css/phpなどは、style等の各tagと属性で、同じscriptの中に顕在させることができる

~
<html>
    <head>
     <body>
     <meta charset='utf-8'>
      <title>HTML内でのPHP処理</title>
    </head>
       <h1>
           <?php echo 'PHPのechoを使っています'; ?>
       </h1>
         <?php$text = "HTML内でのPHPスクリプト実行処理";echo "
          <p> $text  
         </p>";?>
 </body>
</html> 
~

上記でいえば、Echo文は出力を意味するPHPです。
こんな感じで、PHPの場合は代入と出力が出来るので、HTML内においてもそん色はありませんが、データが多量化してしまったり、データの保守性が担保できなかったりといろいろな理由で、 [PHP] / [CSS] / [php]は切り分けたscriptを使っている人が多いようです。

前回(`#`8で)公開したLPでは。。。

f:id:Takeda2864:20200518175114p:plain — javascript

上記のように、わかりやすく[javascript]のscriptをlinktagで活用していました。

chromeのconsoleについて

・前提として、データサイエンス(w)lをやっている際に、CTIツールのリテラル値を照会するにあたって、（WEBCRM＞Zendeskだったので）Googleconsoleを利用。
・chromeconsolの、Elements→Computedの順で、タグとSTYLE等の親子関係を[Computed]で確認ができる。
・またどのディレクトリに保管しているかの確認もでき、filter内で内部のコンテンツすべての確認ができます（どのデータなのか～・・・など）

Googleconsoleの愚痴

その際にリテラルの値とCSVで吐き出してた監査log、パイプライン経由で吐き出した数値、API トークン経由でエ
クスポートしたデータなどなど、その中でもUX系のデータはUIについている名前などのアクティビティなど
も計測したりするので、データ照会を行うにあたり必需でした(´ω｀*)
（まぁ、「インサイトはいらねんだよ！」だの、「事実数だと閻魔帳にならない？」等いわれますが....」

CSSのキーワード（主要職の定義）とRGB

・0 ~ 255の数値でカラーリング表現をします。
・16進数での表現も可能で、下記の画像のように#255で黄など、

f:id:Takeda2864:20200519174826p:plain — 10進数 / 16進数の表現

セレクターとプロパティの優先度

ちなみに CSS では、同じセレクターに対して同じプロパティを複数設定した場合、あとから書いたほうが優先されるということも覚えておきましょう。