はじめに
◆HTML,CSSを学ぶ目的 主にウェブサイトの作成に用いられる。 HTMLで骨組みをつくり、CSSで装飾をする。◆環境設定
・機種：Mac
・ブラウザ：Google Chrome
・エディタ：brackets
・ファイルの拡張子は表示させておく
「Finder」「環境設定」「詳細」「すべての拡張子」
・インスペクターツール（developerツールや開発コマンドといったりする）
「詳細」「設定を」
開発していく中で、反映が正しくされているかなど、確認する。
気になるサイトがどう作られているかなどものぞける。
◆学んだ方法
・書籍かドットインストール、プロゲートなど。
・学びはノートに書く。今日やること、やったことはノートへ。
・知り合いのエンジニアに書いたコードを、見せる。
HTML、CSSとは何か
◆HTML(hyper text markup language)とは。
ハイパーテキストを、マークアップする言語のこと。
つまり、複雑な文書の各要素に目印をつけ、コンピュータが文書の構造を理解できるようにする。
シンプルに言うと、要素の集まり。
◆CSSとは(cascading style sheet)とは。
コンピュータが文書の各要素についた目印を頼りに、定義されたスタイルをつけにいく。
シンプルに言うと、要素の集まりであるHTMLをいじくること。
◆たとえば
HTMLは見出しや、文章、画像などを配置する。
CSSは、見出しの前にアイコンをつけたり、背景色をつけたり、画像を左寄せにするなどできる。
HTMLについて
◆要素の集まりであるHTMLだが、基本的な要素は先に書いておく。 ・と書き、宣言する。 ・HTMLの構造は、headとbodyに分かれている。 ・文字コードはUTF-8が基本 ・HTMLとCSSをリンクする方法◆タグの書き方
<> >
<>の中にh1とかpとかdivとか要素をいれる。
>で閉じる。
例
<div>
あああああ
</div>
CSSについて
@charset "UTF-8";をつける。cssはセレクタ、プロパティ、値がセットになっている。
各々、どこに、何を、どうするか。
◆セレクタ=どこに書くかを表す。
例）
id="アイディー名"
class="クラス名"
使用例）
<div class="test-txt">
<p>ああああ
</div>
◆プロパティ=何を書くかを表す。
例）
文字サイズ font-size
文字の太さ font-weight
文字の間隔 letter-spacing
行間 line-height
・ボックスモデル
例）
要素と要素の幅 margin
要素内の幅 padding
幅 width
高さ height
・色の指定
文字の色 color
背景の色 background-color
◆値=セレクタ、プロパティをどうするか。
例）
文字サイズを18ピクセルに font-size:18px;
幅を240ピクセルに width:240px;
文字の色を白に color:#ffffff;
ディレクトリとパスについて
◆ディレクトリとは。
ファイルの保存場所のこと。
◆パスとは。
・絶対パス 自サイト外を示す時に使う。
・相対パス 今いるところから、階層が上なのか下なのか。
◆階層を分ける。
・同じディレクトリ。
ファイル名のみ。
・上位階層を示すやり方。
../ 一つ上
../../ 二つ上
・下位階層を示すやり方。
/
◆ファイルの準備
「Document」の中にファイルをつくる。
そのファイルの中にhtmlファイルと、cssフォルダ、画像フォルダをおく。
cssフォルダには、cssファイル、画像フォルダには画像を入れておく。
つまずいたポイント
開発が始まる前に、詳しい人を探して確認をしておいた方がいいもの。・フィードバックをもらうタイミング。
8割をこなした段階でフィードバックをもらいたい。
最後の残りの2割を仕上げるのに、また同じくらいの時間がかかる。
・テスト環境について確認をしておく
開発スケジュールの早い段階で、粗くても良いので、試すのが大事。
またGITHUBを使用するチームであれば、これも積極的にキャッチアップしておく。
・デザインについて
デザイナーの方に、画面サイズが変わった時の動きを確認しておく。
※せっかくコーディングしたのに、最後に大幅にHTMLの書き直しをしたりしないために。
・画像について
pngは周りの白が残らないけど、重い40KBくらいまで落とせば大丈夫。
JPEGは軽いため、周りの白が残るので、アイコンなどは不向き、背景などに使用。
※重すぎると動かず、特にファーストビューが開かないと離脱が増えるので、重要。
・画像の重さを削る方法
photoshopで画像のサイズを変えるか。
使用する色数を減らす。