0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML・CSSでよく使う記述

Last updated at Posted at 2019-12-11

初めに

よく使う記述で、毎度調べたりするのが面倒なので、ここに書き溜めていきます。

HTML編

HTML空の記述

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>
  
</body>
</html>

CSSの読み込み

<!-- cssの読み込み -->
<link rel="stylesheet" href="./css/xxx.css">

<!-- メディアクエリーで条件付きのcssの読み込み -->
<link rel="stylesheet" href="./css/xxx.css" media="screen and (min-width: 640px)">

JavaScriptの読み込み

<!-- JavaScriptの読み込み -->
<script src="./js/xxx.js"></script>

全部head要素内に入れてることが多い。
jQueryなどのライブラリを先に読み込んで、他の外部ファイルに関しては、追加順で記述することが多い
(処理によっては前後させる)

CSS編

メディアクエリ

@media screen and (min-width: 640px) {
  /* 横幅640pxより大きくなると適応 */
}

親要素をはみ出す

.body {
  width: 640px;
  margin: 0 auto;
}
.title {
  margin-left: calc(((100vw - 100%) / 2) * -1);
  margin-right: calc(((100vw - 100%) / 2) * -1);
  background: #ccc;
}
.title span {
  width: 640px;
}

↓↓こういうやつ↓↓
download.png
対応ブラウザ https://caniuse.com/#search=calc
対応ブラウザ https://caniuse.com/#feat=viewport-units

以上

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?