HTML/CSS入門

Webサイトの作成に役立つツール

素材サイト

基本事項

  • HTML5の基本形(レスポンシブ対応)
  • DOCTYPE宣言(HTML5)
  • Webページの言語を設定する(lang)
  • Webページの文字コードセットをUTF-8に設定する
  • レスポンシブ対応のためのviewport設定
  • CSSファイルを読み込む
  • CSSファイルの文字コードを指定する
  • JavaScriptファイルを読み込む

テキスト

リスト

ボックス

画像

動画

フォーム

レイアウト

レスポンシブデザイン

Emmet

Sass

その他

エディタ・開発環境

  • Visual Studio Code
    マイクロソフトが開発するソースコードエディタ
  • ATOM
    GitHubが開発するソースコードエディタ
  • Brackets
    Adobe Systemsが開発するソースコードエディタ
  • Sublime Text(有料)
    「恋に落ちるエディタ」として有名だが、有料
  • Notepad++
    海外のプログラマの間で人気のあるエディタ

公式サイトやリファレンスサイト

@charset "UTF-8";
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="js/script.js"></script>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<html lang="ja">

英語の場合は「lang="en"」

<!DOCTYPE html>

.main p {
  text-indent: 1rem;
}


a[target="_blank"]::after {
  content: url("img/link.png");
  margin-left: 3px;
  /* 以下は、必要に応じて位置調整をする場合 */
  position: relative;
  bottom: -6px;
}

title属性を使う


<p><a title="ツールチップのサンプル"> ★ サンプル</a></p>

改行部分に「&#10;」を入れる


<div title="1行目&#10;2行目">…</div>

大きく分けて3パターン


/* ~以下を指定 */
@media (max-width:480px) { 

  /* 480px以下はここを読み込む */

}

/* ~以上、~以下を指定 */
@media (min-width:481px) and ( max-width:767px) {
	
  /* 481pxから767pxまではここを読み込む */

}

/* ~以下を指定 */
@media (min-width:768px) {
	
    /* 768px以上はここを読み込む */

}

bootstrapの区分は576px, 768px, 992px, 1200px

HTML


<div class="outer">
  <div class="inner">
    <img src="img/test.png">
  </div>
</div>

CSS


div.outer {
  position: relative;
}

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


hr {
  border-style: none;
  border-top: .5px solid silver;
}

120*90
http://img.youtube.com/vi/★ID★/default.jpg

320*180
http://img.youtube.com/vi/★ID★/mqdefault.jpg

480*360
http://img.youtube.com/vi/★ID★/hqdefault.jpg

640*480
http://img.youtube.com/vi/★ID★/sddefault.jpg


/* CSSで設定 1.4倍 */
transform: scale(1.4);

ブロックコメント「/* */」はCSSに出力される

行コメント「//」はCSSに出力されない


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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<!-- タイトル -->
<title>★</title>

<!-- CSS, JavaScript -->
<link rel="stylesheet" href="★">
<script src="★"></script>

</head>
<body>
	<!-- 本文 -->
</body>
</html>

flex-wrap: wrap;

・短いテキストの場合(インラインボックス)

q要素

・長いテキストの場合(ブロックボックス)

blockquote要素

controls 属性でインターフェイスを自動調整


<video controls src="hoge.mp4"></video>
      

<!-- pdfファイル -->
<a href="sample.pdf">sample.pdfはこちらから</a>

<!-- zipファイル -->
<a href="sample.zip">sample.zipはこちらから</a>

  • dl(definition list): 定義リスト
  • dt(definition term): 定義語
  • dd(definition description): 定義語の説明

<dl>
  <dt>定義語1</dt>
  <dd>定義語1の説明</dd>

  <dt>定義語2</dt>
  <dd>定義語2の説明</dd>
</dl>

ul要素か li要素にlist-style: none; を設定


ul {
  padding-left: 0px; // 左側の余白をなくす
  list-style: none;  // マーカーを消す
}

シェアする

  • このエントリーをはてなブックマークに追加

フォローする