Skip to content

Instantly share code, notes, and snippets.

@LeeDDHH

LeeDDHH/html-css-styling.md

Last active September 11, 2023 08:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LeeDDHH/bbafebb7e31aa7e13c9ef1c8dcd40427 to your computer and use it in GitHub Desktop.
Save LeeDDHH/bbafebb7e31aa7e13c9ef1c8dcd40427 to your computer and use it in GitHub Desktop.
Download ZIP
HTML、CSSでスタイリングする時のtips
Raw
html-css-styling.md

箇条書きのマーカーを消して、左に寄せる

ul {
  list-style: none;
  padding-left: 0;
}

フォント指定の例

* {
  font-family: YuGothic, "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
}

* {
  font-family: YuMincho, "Hiragino Mincho ProN", HGS明朝E, serif;
}

サイト全体のボックスモデルに、 padding と border の幅と高さを含める

*{
 box-sizing: border-box;
}

迷った時のサイト全体の共通指定

*{
 box-sizing: border-box;
 font-family: YuGothic, "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
 margin: 0; /* デフォルトCSSのmarginを無効化する */
}

指定したDOMを左右

揃えにする

対象DOM {
  margin: 0 auto;
}

画面全体からいい感じに左右中央に揃える

︙
<body>
  <div class="wrapper">
    ︙
  </div>
</body>
︙
body {
  padding: 40px;
  margin: 0 auto;
}

.wrapper {
  width: 75vw;
  max-width: 90%;
  padding: 20px;
  margin: 0 auto;
}

a タグの下線を消す

a {
  text-decoration: none;
}

サイトで設定しているフォントサイズよりちょっとだけポイントをあげるとき

ポイントを上げるDOM {
  font-size: 1.2em;
  font-weight: bold;
}

左右中央に配置する

margin: 0 auto;

最後の子要素に装飾を適用させる擬似クラス

:last-child

input要素のtextの左側に余白をおく

input {
  text-indent: 1em;
}

要素をホバーしたら、直下要素を表示する

<div class="elm">
  text1
  <div class="hoverAppear">
    text2
  </div>
</div>
.hoverAppear {
  display: none;
}

.elm:hover > .hoverAppear {
  display: block;
}

親要素に指定されたスタイルを継承する

継承する要素: inherit;

右クリックを禁止する

<body oncontextmenu="return false;">
  ︙
  本文
  ︙
</body>

テキストの選択を禁止する

body{
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select: none;
  -moz-user-select:none;
  -khtml-user-select:none;
  -webkit-user-drag:none;
  -khtml-user-drag:none;
}

文字数制限（三点リーダーによる省略）を実装する

文字数制限したい要素 {
  width: 300px; /* 省略せずに表示するサイズを指定 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

テキストの縦（上下）方向の中央寄せ

テキストの要素 {
  line-height:200px; /* 表示するテキストの高さ */
  text-align:center;
  background-color:#fff2fa;
}

\nで改行する

テキストの要素 {
  white-space: pre-wrap;
}

フォントサイズをレスポンシブに合わせる

調整したい要素 {
  font-size: ○vw;
}

ヘッダーを固定

ヘッダー {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

フッターを固定

フッダー {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

テキストサイズをレスポンシブに表示する

// calc(基準となるフォントサイズ + (最大フォントサイズ - 基準となるフォントサイズ) * ((ビューポイントの画面幅 - 最低限表示する画面幅) / (最大限表示する画面幅 - 最低限表示する画面幅)))
.responsive-text {
  font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1920 - 320)));
}

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment