HTML/CSS メモ [逐一更新]

2020/11/19

ホーム / HTML/CSS

学んだことなどを逐次メモ

子要素の画像にborder-radius が適用されない場合

.parent {
	overflow: hidden;
}

. parent img {
	border-radius: 8px;
}

画像の白背景を抜く

<div class="image">
    <img src="logo.jpg">
</div>
.image {
    mix-blend-mode: multiply;
}

スマホでinput操作時にズームさせない

スマホのときフォームのinput入力画面に移行すると、font-sizeが小さい場合とズームされてしまいます。ズームを解除するにはピンチ操作が必要なので面倒です。

input[type=text] {
  font-size: 16px;
}

リンク先の文字列をハイライト

<a href="https://xxxx.com/#:~:text="ハイライトしたい文章">リンク</>

スマホでタッチしたときのハイライトカラー

a{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

横中央

さまざまな方法があるので場合によって変える

.el {
  margin-left: auto;
  margin-right: auto;
}
.el {
  margin: 0 auto;
}

縦横中央

その1 block要素を縦横中央に配置

.el {
  margin: auto
}

疑似要素

transformで調整する

li {
	position: ralative;
}

li::before {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

リンクを親ブロック全体にする

aリンク 子要素を上にかぶせる

<div class="parent">
  <a href="">リンク</a>
</div>
 .parent {
  position: relative;
  width: 300px;
  height: 70px;
  margin: 15px auto;
}
.parent a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

リンク文字が絶対位置になってしまうので a{color:transparent}にしてもよいかも

リストの場合

<ul>
	<li><a href="#"></a></li>
	<li><a href="#"></a></li>
<ul>

余白はa要素で調節する

ul li {
  margin: 0;
  padding: 0;
}

ul a {
  display: block;
  padding: 8px;
}

小要素の数でスタイルを変える

<ul>
  <li class="item"></li>
</ul>
<ul>
  <li class="item"></li>
  <li class="item"></li>
</ul>
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>
/* 1個の場合 */
.item:only-child {
  color: #a00;
}
/* 2個の場合 */
.item:first-child:nth-last-child(2),
.item:first-child:nth-last-child(2) ~ .item {
  color: #0a0;
}
/* 3個の場合 */
.item:first-child:nth-last-child(3),
.item:first-child:nth-last-child(3) ~ .item {
  color: #00a;
}

ヘッダーズレ調整

AMPでは動かない

PCのみと思ったほうがよい

html {
	scroll-behavior: smooth;
}

@media (max-width:767px) {
	html {
		scroll-padding-block-start: 64px;
	}
}

こちらのほうが実用的

/*--------------------------------------
ヘッダーリンク位置調整
--------------------------------------*/
#link:target,
h2:target,
h3:target,
h4:target,
h5:target,
h6:target {
    margin-top: -64px;
    padding-top: 64px;
}

SVGアイコンなどに使う方法

transform がきかない要素もあるので以下のようにするとアイコンなどにも使える

.wrap i {
	display: inline-block;
}

.wrap:hover i {
	transform: rotate(45deg);
}

リンクを無効にする

アンカーリンクをクリックしたときに画面遷移を無効にする方法。href がないと Lighthouse のスコアが下がるのを避けるために。クリック自体は可能。

<a href="#" class="some-link">もくじを表示</a>
.some-link {
    pointer-events: none;
}
HTML/CSS
# HTML# CSS