まくまくHTML/CSSノート
🏠HOME
2015-10-08
スタイルシートの使い方や、Web 用パーツサンプルなど。
ツイート
シェア
Pocket
HTML 全般
HTML ファイルの雛形(テンプレート)
IE 8 でも HTML5 の header や footer 要素を使えるようにする
Web サイトに favicon を設定する
全体のレイアウト
レイアウトの基礎知識
position プロパティによるレイアウト方法を理解する
box-sizing プロパティで width の計算方法を制御する
全要素に統一された上下マージンを設定する(ふくろうセレクタ)
画像の下に隙間が空くのを防ぐ
フローティングボックスを利用したレイアウトを理解する
ul や ol によるリスト要素のマージン設定を理解する
要素を中央寄せ/右寄せで表示する
画像や div 要素を両端に表示する
レスポンシブ
Viewport、メディアクエリ設定によるレスポンシブ Web デザインの基本
モバイルファーストで考えるコツ(max-width ではなく min-width を使うべし)
画面サイズによって全体のレイアウトを変更する
画像と埋め込み動画のサイズを画面内に収める
フレキシブルボックスによるレスポンシブレイアウト
(コラム)フレキシブルボックスの旧式の定義方法
フォント/テキスト
フォントサイズは 100% と指定する
rem や em を使用したサイズ指定を理解する
pre 要素でもテキストがはみ出さないように折り返す
要素
フォーム
入力フォームに自動的にフォーカスする(autofocus 属性)
プレースホルダーで入力フォームに補足説明を表示する(placeholder 属性)
入力必須の入力フォームを指定する(required 属性)
独自の入力フォーマットを指定する(pattern 属性)
入力エリアの入力候補を表示する(autocomplete 属性、datalist 要素)
ヘッダ
ヘッダ要素に連番を振る
メニュー
メニューの縦並びと横並びを切り替える
メニューの表示位置を固定する
メニューの高さを画面の高さに合わせる
メニュー要素内でスクロールできるようにする
CSS だけで開閉できるアコーディオンメニューを作成する
ある位置までスクロールしたら固定されるメニューを作成する
印刷時に特定の要素(メニューなど)を非表示にする
リンク
外部リンクに自動的にアイコンを付けて表示する (External link icons)
外部リンクをクリックしたときに必ず新しいタブで開く
リンク先ファイルの拡張子によって自動的にアイコンを付けて表示する
画像/ボタン
SVG アイコンの色をまわりの文字の色に合わせる
SNS ボタンをきれいに並べる
CSS セレクタ
結合子を使用して構造に応じてスタイルシートを適用する
子孫セレクタ
子セレクタ(直下セレクタ)
隣接兄弟セレクタ(隣接セレクタ)
一般兄弟セレクタ(間接セレクタ)
マルチメディア
audio タグを使って音声ファイルを再生する
その他
吹き出し風の見出しを作る
Web サイト作成に関するメモ: SEO 対策
jQuery に関しては JavaScript のページを参照
外部サイトリンク
HTML5の仕様 (W3C Recommendation)
HTML5の文法チェック (W3C Markup Varidation Service)
ブラウザのHTML5適合度チェック (HTML5test)
ツイート
シェア
Pocket
カテゴリ一覧
いろいろ
Android
Ansible
Blender
C/C++
Docker
Git
Go言語
Gradle
HTML/CSS
Hugo
Java
JavaScript
Kotlin
Linux/Shell
Mac
Middleman
Meta Trader
Node.js
Octave
Perforce
Perl
PHP
Python
R
Ruby
Rust
Sass
sed/awk
SQL
トレードステーション
Vagrant
VBA
Vim
Windows
天才まくまくノート
🏠HOME
2015-10-08