【CSS】CSSでオシャレになれるか？(ざっくりCSS超入門)

###1.最近少し気が付いたこと
プログラムを作って、思い通りの動作を確認する。
↓
嬉しくなってQiitaに下書きして、美しいハイライトを見て満足する。
↓
実行画面の一部のキャプチャーもアップ。

####ダサい!!!
####linuxの管理者専用の白黒画面がオシャレに見えるほどダサい!!!

###２.cssとは

• 見た目を一切気にしようとしない処理を書く人々には縁のないもの
• デザイナーさんのような華のある人々が駆使するもの
• webページの見た目を華やかにするもの

こういう技術があるという事は、エンジニアの皆様も日々自分の
ダサさに悩んでいるんだ。(!？)

これを覚えれば、恐竜登録ツールもイケイケになるはず。

###3.CSSの基本スタイル

セレクタ{ プロパティ:値; }
という書式から成る。

セレクタ – どのHTMLタグに対して見合えを調整するか
プロパティ – どういった内容のデザインを施すか
値 – プロパティはどの程度か。
というものらしい。

とりあえず、色を変えれば今の『逆Linux』画面から変わるはず！

参考urlを調べて実装してみる。
ワクワクするなあ。

###4.CSSのコーディング例

dino_css.css

h1 {
	color: red;
	background: #33ffff;
}
body {
	background: #aaffff;
}
input[type="text"][name="dname0"]{
	color: #ffffff;
	background: #00ffff;
}
input[type="text"][name="hdname0"]{
	color: red;
	background: #00ff33;
}
input[type="submit"][name="btn2"]{
	color: red;
	background: #77ccff;
}
select{
  background:#ffcccc;
}

このファイルを適用したいファイルのタグの前に、下記一行を書けばいいのだ
<link rel="stylesheet" type="text/css" href="dino_css.css" />
どうなるか楽しみ！！！

###5.結果

恐竜登録ツール2
上記ソースに適用してみる。

設定した内容が適用された。
それ以上でも、それ以下でもない。
こういう技術があるんだという事を知っただけでも良かった。。。

イケイケになったか？→未達成。
唯一分かった事がある。
__『デザイナーへの転職は厳しい』__という現実だ。

美しさの提供って大変ですね。

###6.参考サイト様
CSSの基本的な書き方
[CSS 属性セレクタのサンプル(要素名[属性名=”値”])]
(https://itsakura.com/css-selector-zokusei)