2週間で約80時間働き、今日は5連勤後の夜勤で完全に免疫力低下してます。
体温37度で喉ガラガラですが、明日もバイトがんばりまふー( ;∀;)
そんな私ですが、現在はある事情によって、HTMLを使って、ヤフーのトップページを作成しています。
ヤフーのトップページを作成する中で、自分が初めて見たコード(属性や値などの細かな部分も含めて）を調べて、実際に書いたものを簡単にまとめていこうと思います。
今回は、li(ul)クラスの中にあった値について
実際のヤフーのトップページはこうで、
この部分です!
VScodeで、「動画タブ」を入力します。(urlは長いので空白)
ここで、progateを終えたばかりの私は、ある疑問をもちました。
【疑問点】
・「動画」の後ろにある「LIVE」はなぜspanタブなのか？
・hidefocus="true"とは？
さっそく調べてみました。
【調べた結果】
・hidefocusとは、通常は、ボタンやリンクにフォーカスが当たると点線で囲まれるが、hidefocus=trueにすることで、点線が消えるらしい。
・spanタブ自体に意味は無いが、スタイルシートで書いた内容が適用されるとのこと。インライン要素であり、ブロック要素であるdivタグだと、改行が入ってしまう。
ってことらしい。そういえばprogateでもインライン要素とブロック要素って習ったな…
ブロック要素→縦並び、横幅や高さは指定できる、余白(padding,margin)が指定できる
インライン要素→横並び、横幅や高さは指定できない、上下余白が指定できない(img,input,selectなどは可)
だったな。
なるほど、だから「LIVE」はspanタグにしたのか。
ということで、タブ全部書いてみよう！
全部で10個ありました。
HTMLのコードだけだとこんな感じです。
ぱぱっとHTML書いて、CSSのスタイルシートも作らないと！！
今日はここまで！