二足のわらじ

〜プログラミングとSEOの勉強をはじめたミーハー26歳のメモ帳〜

【学習65日】chat-spaceのサイト画面の制作④【応用27日】

chat-spaceの画面ができた!!!!やっと!!!亀のごとし!!!

でも できたので良しとする!!!

f:id:vamnasocana:20191028224302p:plain

 

・久々に触るとHTMLやCSSで忘れている部分が多いなと反省…

 定期的に好きなサイトを模写?しながら慣れていこう!

 

・親要素のCSSで「display:flex」に定義するだけで

 その直下の要素が並列になる。

 このユーザー名と日付が変わる部分で利用。

f:id:vamnasocana:20191028224819p:plain

参考記事:https://mamewaza.com/support/blog/howto-use-flex.html

 

・margin auto はあっても

 padding auto はない。

 

・親要素にposition: relative;

 子要素にposition: absolute;

 

参考記事:https://uxmilk.jp/63409

 

 

・cursor: pointer; でポインター

 

・<LABEL>タグはフォームの構成部品(一行テキストボックス・チェックボックスラジオボタン等)と、 その項目名(ラベル)を明確に関連付けるための要素です。 これによりチェックボックスラジオボタンでは、 関連付けられたテキスト部分をクリックしてもチェックを付けることができるようになります。

 

参考記事:http://www.htmq.com/html/label.shtml

 

・HTMLをマークアップ する時には

 完成したサイトの挙動を意識して作る。

 「ヘッダーフッダーは固定すべきだから

  ヘッダーフッダーでまとめて作成する」

 というような先入観は捨てる。

 実際に仕事で扱うようであれば

 必ず上司に確認をしてから作業を始める

 

(例)今回のチャットスペースでは、

 最初は、画面左側には何も表示されず

 チャットルームをクリックすると

 チャットの内容が画面左に展開されるため

 上下ではなく、左右で分けて考える。