一日毎の更新を目指してますが、
結構大変ですね
毎日更新の皆様、すごい
めっちゃ尊敬です
忙しい人にかぎって、
毎日コツコツをちゃんとされてますよね
私はズボラなりに、
嫌にならない程度でコツコツ続けて行こうと思います
さて、11日はOfficeの日だったので、
10&12日目のまとめって感じで行っちゃいましょう
今回の課題は
スマホ用にも転用できる、
1カラムのレイアウトです
結婚式の招待状で、
招待客に様々な情報を入力してもらう
『Form』sectionの中に
新たなHTMLのタグが登場しました。
<input type=“属性” name=“任意の名前” value=“送信時の表示内容”>
type属性で入力欄の種類を指定し、name属性で入力欄の名前を指定する。開始タグ及び終了タグはなく、単独で使用する。
(valueはtextなど自由入力形式の場合は設定不要)
以下、type属性欄に入力する値
・radio…複数の選択肢から1つ選択
・checkbox…複数の選択肢から0〜複数選択
・text…１行のテキスト入力蘭
・email…メールアドレス入力欄
ブラウザによっては入力値の検証あり
・url… URL入力欄
ブラウザによっては入力値の検証あり
・submit…フォームの内容を送信するボタン
<select>
<option>〜</option>
<option>〜</option>
</select>
ドロップダウン形式で表示できるフォーム部品。
セレクトボックス。選択肢一つ一つを<option>タグで囲む。
<label>〜</label>
このタグで囲まれた項目名と入力欄関連付けられるため、項目名をクリックしても反応する。
更に、今回は
web上のフォントを使用しました。
①webサイトで『googlefont』へアクセスし、コードをコピーします。
②HTMLにコードを貼り付けます。
※この時、reset.cssよりも後ろ且つstyle.cssよりも前に貼り付ける
③CSSにも使用する箇所にfont family名をコピーして指定する。
そして、CSSのキモは
位置を指定する『position』
要素同志を重ねたり、
1カラムの縦長のレイアウトでも
行きたいページに飛びやすくなります
position:値;
値に入るのは
static…初期値位置指定はできない。
rerative…基点は元の場所の左上
left・right・top・bottomで位置指定可
後続の要素はそのまま
avsolute…基点ウィンドウの左上
left・right・top・bottomで位置指定可
後続の要素の位置が詰まる
block boxの横幅いっぱいの性質を失う
fixet… 基点ウィンドウの左上
スクロールしても要素がその場に固定される
以下、CSS覚え書きです。
・文字の間隔を調整する
letter-spacing: .05em
(1em=文字の高さ。ゼロを省略して、コンマからの入力でOK。スマホ用に転用する場合は可変的なemを使うのがベター)
・背景画像の配置
background:url(ファイルパス) 繰り返し 横位置 縦位置/サイズ;
サイズにはcover(全体を覆う)とcontain(画像の全体を表示)や%などで指定することもできる。
・要素の重なりを指定する
z-index：数字;
数字が大き方が前面に出る。マイナスにすると背面へ。重なりを考えて数値を考えて入力する。
・擬似要素を生成する
セレクタ::before(after){content:〜;}
〜には画像やテキストを入れることができる。
・インライン要素同志の縦位置調整
vertical-align:〜;
〜には、baseline、middle、top、bottomなどが入る。middleで揃わない場合もあるため、画面を見てより揃っているものを入力する。
※text-alignのように親要素に対して子要素を中央寄せするわけではないので注意