😁

フロントエンド Tips集

2021/12/14に公開・約1,500字

CSS

フロントエンドの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

ログインするとコメントできます