いまさら聞けないHTMLとCSS

研修で初めに学ぶのがHTMLとCSS・・・
成果物の大半がHTMLあるいはそれに関与してしたもので構成されるので、一番最初に学ぶことになる。
研修では、時間やほかの制約で一通りの学習しかできないので、ここではさらに実践に近いことを記載してみたい。

まずはHTMLとCSSのおさらい
HTMLはテキスト情報を<>で囲まれたタグを使って情報を追加したり装飾をする
タグの属性は2つ、くくる<div>xxxx</div>のようなものと<br>のような単独のもの
CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)は、出力テキストをベースとして
タグに対してStyleを指定する。
記載の仕方は、3つ、直書き まとめ書き 外部ファイルのリンク形式の3種類がある。
基本的には動的に稼働するものではないが、Javascriptなどと併用して表示を変化させることも可能です。

現場では、エミュレータ(ブラウザの機能)で開発して、下記の実機で検収確認することが多い
windows edge IE Firefox Crom
MAC Safari Firefox Crom
Iphone Safari Firefox Crom
android Crom Firefox

HTMLの記述の確認の仕方は、大体統一されていて、各ブラウザーの[F12]キーで検証ツールが起動する。
起動するツールでは、CSSだけではなく、パーツ名やロード時間などが確認できる。
使い方については熟知することが必要です。
といっても、どれか好きなブラウザーをベースに覚えればいいので、そんなに気合はいらない。

検証ツール(F12)の最も実践的な使い方はリアルタイムでCSSやコードを変更するプレビューの機能です。
この機能を利用すれば、短期間で検証と修正をすることができます。
検証ツール上で変えたCSSやコードはコピって実際のソースに反映しすることで
トライエラーを繰り返す微調整を行うことができるのです。

これは実際見ないとわかりにくいので・・・・やってみることをお勧めします。