😁
フロントエンド Tips集
フロントエンドのTipsを書き連ねる記事
毎回調べるのめんどくさいので業務で使用したフロントエンドのTipsをどんどん追加していきます。
書きなぐりなので見づらいところがあるかも・・・
フッター下固定
mainの要素が少ない時にフッターを下固定にする。
<html>
<body>
<div class="main">
<header></header>
<div class="main__inner"></div>
<footer></footer>
</div>
</body>
</html>
html,body {
min-height: 100vh;
}
.main {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.footer {
margin-top: auto;
}
クリックやタップしたときに青くなる現象
-webkit-tap-highlight-color:rgba(0, 0, 0, 0)
ツールバーやアドレスバーで要素が隠れてしまう
bodyにinnerHeightを設定する。
// 読み込み時にbodyにウィンドウの高さを指定
document.body.onload = ()=>{
document.body.style.minHeight = window.innerHeight + 'px';
}
// 横向きにした時に再度高さを指定
let timer;
window.addEventListener("resize", () => {
clearTimeout(timer);
timer = setTimeout(() => {
document.body.style.minHeight = window.innerHeight + 'px';
}, 500);
});
ライブ配信のコメントビュワー
YouTubeのようなライブ配信のコメントビュワーをCSSのみで実装
※スクロールができないので注意
※liをDOMで追加していく
<html>
<body>
<div class="main">
<header></header>
<div class="comment-viewer">
<ul class="comment-viewer__list">
<li class="comment-viewer__item"></li>
<li class="comment-viewer__item"></li>
</ul>
</div>
<footer></footer>
</div>
</body>
</html>
.comment-viewer {
position: absolute;
top: 40%;
right: 40px;
bottom: 24px;
left: 16px;
overflow: hidden;
}
.comment-viewer__list {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
}
.comment-viewer__item {
width: 100%;
margin-bottom: 4px;
}
ベーシック認証がかかったURLにリダイレクトする方法
https://ユーザー名:パスワード@hogehoge.jp
Discussion