Progate HTML/CSSの学習
内容
初級
HTML
・<h>要素 見出し hが最大、h6が最小
・<p>要素 段落 見出し以外の文
・<--! --> コメント ブラウザに表示されないのでメモとして使用
・aタグ リンク
href属性 リンクの飛ぶ先 <a href = “url”>としてurlにリンクの先のURLを入れる
・<img>要素 画像の表示 <img src=”url”>としてurlに画像のリンクを指定
テキストをのせないので終了タグはいらない
・<li> リスト <ul>で囲むと先頭に・と黒点、<ol>で囲うと連番がつく
・class 要素に名前をつける <h1 class=”名前”>
・<head> ページに関する情報
文字コード <title>ページタイトル
<link rel=”stylesheet” href=”stylesheet.css> CSSの読み込み href属性で読み込むCSSファイルを指定
・<body> 実際にページに載せたい内容
・<div>要素 要素をグループ化
header、main、footerのclass名をもつ3つの<div>要素でレイアウトを分割する
・<span> 囲った文中の一部にCSSを適応可能
・ブロック要素 改行される 親要素の横幅いっぱいに広がる <div> <h> <p>要素など
・インライン要素 改行されない テキスト部分のみ <a> <span>要素など
・<input>要素 一行のテキスト入力を受け取る要素
submitというtype属性を設定するとテキスト入力欄でなく送信ボタンになる
value属性でボタンに表示されるテキストを指定
例 <input type=”submit” value=”保存”>
・<textarea> 複数行のテキスト入力を受け取る要素
・colorプロパティ 色を指定
・/* */ コメント
・font-size 文字の大きさの指定
・font-family フォントの種類を指定
・background-color 背景色の指定
・width height それぞれ要素の横幅、高さの指定
・.クラス名でCSSを指定 (タグにはドットをつけない)
・list-style:none; リスト先頭のマークを消すことができる
・float 指定した要素を横並びにする float:left;で要素が左から順に並ぶ
・padding 要素に余白をつくるpadding:値;で上下左右にその値の大きさの余白ができる
padding-top bottom left rightでそれぞれを指定
padding:上下 左右; padding:上 右 下 左; と省略も可能
・.header-list li このようにすると「header-list」の中の<li>要素にのみCSSを適応可
・float:left;で左寄り、float:right;で右寄り これらの組み合わせで左右に要素を配置可能
・border 要素にボーダー(枠線をつける) boder:太さ 種類(solid) 色;
border-方向 で特定の場所のみ枠線をひける
・margin 要素の外側の余白 (paddingは内側の余白)
・複数のセレクタを「,」で区切ることによってそれらに同じCSSを適用できる
中級
・background-image:url(); 背景画像の指定
・background-size:cover; 一枚の画像で表示範囲を埋めつくす
・opacity 文字の透明度
・letter-spacing 文字の間隔
・display
aタグなどのインライン要素はhigh width上下のmarginを指定できない。
displayプロパティはブロック、インライン、インラインブロック要素を指定できる
インライン要素→インラインブロック要素にする
display:inline-block;
・複数クラスの指定 class = “① ②”
・ボタン設定
・hover カーソルを乗せたときの色を変える
・border-radius角を丸くする
・text-align インライン要素、インラインブロック要素の配置の指定
margin:0 auto containerのような大きい要素を中央に
text-align テキストやボタンなど小さいものを中央に
・Font Awesome アイコンの調達
・rgb 色の指定(三原色)
・rgba指定した色のみを透明に (opacityは全体を透明にする)
・transitionアニメーション。変化の対象や変化にかかる時間を設定。
・line-height 行の高さを設定。行間を調整する際に使用。設定すると文字が中央にくる。
・aタグ インライン要素→ブロック要素
範囲がテキスト部分から親要素全体に広がるのでクリックできる面積が大きくなる。
・font-weight 文字の太さ h1~h6まではbold
・ボックスのwidthやheightをpxでなく%にすると、親要素に対してどれくらいの幅や高さにするか設定できる。
・position:absolute; HTMLの要素を重ねる。基準位置はサイト全体の左上部。
基準としたい親要素にposition:relativeを指定すると、その親要素の左上部が基準になる。position:relativeは要素を本来の位置からずらすためにも使う。
.parent{
position:relative;
}
.child{
position:absolute;
top:;
left:;
}
・box-shadow:水平方向 垂直方向 色; ボックスに影をつくる
・cursorカーソルが要素にのったときカーソルの形を変える
aタグなどは初期状態から設定されている
・active要素がクリックしてあるときのみCSSを適応
セレクタ:active
・box-shadow:none; 影を消す
多くのプロパティはnoneを設定し消すことができる
・position:fixed;指定した要素をつねに画面の同じ位置に固定する
・z-index 要素の重なりの順序を決める
・background-image:url(); 背景画像の指定
・background-size:cover; 一枚の画像で表示範囲を埋めつくす
所要時間
正確に計測していませんでしたが、ほぼ目安時間と同じだったと思います。
難易度
ひとつひとつ指示通りにやれば難しくなかったです。
が、道場コース中級で完全に手がとまり挫折しました。
このレッスンは道場コースができてはじめて人並みにマスターできたといえると思います。