CSS インタビューの質問: 40 の練習用質問 (回答とコード例付き)

ここでは、CSS 面接の準備を整えるのに役立つ 40 の CSS 面接の質問とその回答およびコード サンプルを紹介します。

1. 要素を中央に配置するにはどうすればよいですか?

.element {
    
    
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

1. 要素を非表示にするにはどうすればよいですか?

.element {
    
    
  display: none;
}

1. 要素を非表示にしてスペースを占有するようにするにはどうすればよいですか?

.element {
    
    
  visibility: hidden;
}

1. フロートをクリアするにはどうすればよいですか？

.parent::after {
    
    
  content: "";
  display: table;
  clear: both;
}

1. フォントを設定するにはどうすればよいですか?

.element {
    
    
  font-family: Arial, sans-serif;
}

1. フォントサイズを設定するにはどうすればよいですか?

.element {
    
    
  font-size: 16px;
}

1. フォントを太字に設定するにはどうすればよいですか?

.element {
    
    
  font-weight: bold;
}

1. フォントの色を設定するにはどうすればよいですか?

.element {
    
    
  color: #000000;
}

1. 背景色を設定するにはどうすればよいですか?

.element {
    
    
  background-color: #ffffff;
}

1. 背景画像を設定するにはどうすればよいですか?

.element {
    
    
  background-image: url("image.jpg");
}

1. 背景のリピートを設定するにはどうすればよいですか?

.element {
    
    
  background-repeat: repeat-x;
}

1. 背景サイズを設定するにはどうすればよいですか?

.element {
    
    
  background-size: cover;
}

1. 境界線を設定するにはどうすればよいですか?

.element {
    
    
  border: 1px solid #000000;
}

1. 境界線の半径を設定するにはどうすればよいですか?

.element {
    
    
  border-radius: 5px;
}

1. 境界線の影を設定するにはどうすればよいですか?

.element {
    
    
  box-shadow: 1px 1px 5px #000000;
}

1. テキストを中央に設定するにはどうすればよいですか?

.element {
    
    
  text-align: center;
}

1. テキストの折り返しを設定するにはどうすればよいですか?

.element {
    
    
  word-wrap: break-word;
}

1. リストのスタイルを設定するにはどうすればよいですか?

.element {
    
    
  list-style: none;
}

1. ハイパーリンクのスタイルを設定するにはどうすればよいですか?

a {
    
    
  text-decoration: none;
  color: #000000;
}
a:hover {
    
    
  text-decoration: underline;
}

1. 明確なデフォルトスタイルを設定するにはどうすればよいですか?

* {
    
    
  margin: 0;
  padding: 0;
}

1. ブラウザの互換性を設定するにはどうすればよいですか?

.element {
    
    
  -webkit-box-shadow: 1px 1px 5px #000000;
  box-shadow: 1px 1px 5px #000000;
}

1. 要素の中央揃えを設定するにはどうすればよいですか?

.parent {
    
    
  display: flex;
  justify-content: center;
  align-items: center;
}

1. テキストのオーバーフロー省略記号を設定するにはどうすればよいですか?

.element {
    
    
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

1. 要素の位置を設定するにはどうすればよいですか?

.element {
    
    
  position: absolute;
  top: 0;
  left: 0;
}

1. 要素の幅を設定するにはどうすればよいですか?

.element {
    
    
  width: 100%;
}

1. 要素の高さを設定するにはどうすればよいですか?

.element {
    
    
  height: 100px;
}

1. 要素の最小幅を設定するにはどうすればよいですか?

.element {
    
    
  min-width: 500px;
}

1. 要素の最小高さを設定するにはどうすればよいですか?

.element {
    
    
  min-height: 200px;
}

1. 要素の最大幅を設定するにはどうすればよいですか?

.element {
    
    
  max-width: 1000px;
}

1. 要素の最大高さを設定するにはどうすればよいですか?

.element {
    
    
  max-height: 500px;
}

1. 要素の透明度を設定するにはどうすればよいですか?

.element {
    
    
  opacity: 0.5;
}

1. 要素をアニメーション化するにはどうすればよいですか?

.element {
    
    
  animation: myanimation 1s infinite;
}
@keyframes myanimation {
    
    
  0% {
    
    
    transform: rotate(0deg);
  }
  100% {
    
    
    transform: rotate(360deg);
  }
}

1. 要素の遷移を設定するにはどうすればよいですか?

.element {
    
    
  transition: all 1s ease-in-out;
}

1. 要素の回転を設定するにはどうすればよいですか?

.element {
    
    
  transform: rotate(45deg);
}

1. 要素のスケーリングを設定するにはどうすればよいですか?

.element {
    
    
  transform: scale(2);
}

1. 要素の傾きを設定するにはどうすればよいですか?

.element {
    
    
  transform: skewX(30deg);
}

1. 要素を移動するように設定するにはどうすればよいですか?

.element {
    
    
  transform: translateX(50px);
}

1. 要素の階層を設定するにはどうすればよいですか?

.element {
    
    
  z-index: 1;
}

1. 要素をフローティングに設定するにはどうすればよいですか?

.element {
    
    
  float: left;
}

1. 要素の固定位置を設定するにはどうすればよいですか?

.element {
    
    
  position: fixed;
  top: 0;
  left: 0;
}
}