タブレイアウトを作ってみた【HTMLとCSSとJS】

2019年11月14日2019年11月18日

何を作るのか

タブレイアウト

・HTMLとCSSは最適なものを使う

・コード量は少なく簡潔に行う

・タブが切り替わる仕組み

・JavaScriptの内容を理解する

border-radiusは今まで50%の指定しかしたことがなかったのですが、今回はリファレンスを確認して左上・右上だけを指定する方法を知った。

aタグを使用して別ウィンドウに飛ばす方法を学んだ。

overflow:hiddenを使うことでブロック内にテキストを収めることができる。overflow:scrollを使うとスクロールができるようになるとのこと。これは使う場面が多そう。

今回参考にしたJavaScriptはそのまま使っていて、内容を理解することに注力しています。

・それぞれのタブにindexを設定する
・functionをクリックで動作するようにイベント追加
・functionでは一旦全てを初期化したあと、選択されたタブのindexに対してactive用のクラスを追加

今回はなし

今回は、タブレイアウトをプログラムで組みましたが、全く満足できない結果となりました。

学べたことも多いのですが、レスポンシブにすることができませんでした。

PCの大きいサイズでしか綺麗に見えないのがなんとも悔しく思いますが、今の技術力ではレスポンシブ化の方法とそれにかかる時間が測れないので、レベルアップしたら再チャレンジしたいと思います。

Posted by temochic