2日目まとめ
Webページのデザインの学習
HEML
・divタグは汎用性が高く一つの塊として使うことができる
・幅=width(ウィズ)、高さ=height(ハイト)で設定できる
・色はbackground-colorで指定出来る
・border 要素に枠線を設定する
-枠の種類-
solid (実線) double(二重線)、dashed(破線)、dotted(点線)
-枠の位置-
top right bottom left
※border-top-widthのように位置指定が可能
・padding:borderより内側の余白-背景色が適用される
・margin :borderより外側の余白-背景色が適用されない
※padding(margin)-topの様に位置指定可能
※padding(margin): 5px ; 全方向指定
5px 5px ; 上下 左右
5px 5px 5px ; 上 左右 下
5px 5px 5px 5px ; 上 右 下 左 (時計回り)
難しい。。。
1日目まとめ
1日目のまとめ
HTML(エイチティーエムエル)
・Webページを作るためのプログラミング言語
・要素がいくつか集まっているのも
・headとbodyの要素で出来ている
・Webページのスタイルを指定する言語
HTMLの初めにする事
①〈!DOCTYPE HTML〉
・HTMLである事、どのバージョンであるか、
このドックタイプに従いますと宣言する事
②〈html lang="ja"〉
・言語は日本語と指定する事
頻出タグ(終了タグあり)
〈h1〜6〉見出し
〈a〉リンクを貼り付ける
〈p〉段落
〈ul〉箇条書き
〈title〉検索エンジンに示されるタイトル
頻出タグ(終了タグなし)
〈img〉画像
〈link〉CSSファイルと結びつける
〈br〉改行
タグは基本的に属性と属性値を一緒に表示
・〈タグ 属性="属性値"〉で表示される!
a → href 外部ファイルを指定(url等)
link → rel 現在のファイルとの関係性を表示
img → src画像ファイルの場所 altテキスト表示
※linkでhref属性でファイルを指定する際、相対パスで指定する
・指定ファイルが現在と同じフォルダ
ファイル名のみ
・下のフォルダ
フォルダ名/ファイル名
・上のフォルダ
../ファイル名(一個上の場合)
../..ファイル名(2個上の場合)
CSSの流れ
①セクレタ{
②プロパティ:③値;
}
①セクレタ =どこを
②プロパティ=どのように
③値 =どうする
で表示
セクレタを特定の箇所だけ変更する場合
①id属性を使う
html表示
〈p id="red-word"〉
css表示
#red-word{
color:red;
}
※#を使う事でセクレタになる
②class属性を使う
html表示
〈p class="word-red"〉
css表示
.word-red{
color:red;
}
※.を使う事でセクレタになる
!classの方が汎用性が高い
!全てのhtmlタグに使用できる
!複数回使用可能
ここまで学習しました。
続きは明日。