HTML & CSS

すぐに役立つテクニック & 学習向けのコンテンツ

レシピ

ボーダー

  1. CSSで枠線(ボーダー)をデザインする
  2. 画像を使ってボーダーをデザインする
  3. ボーダーを使って見出しをデザインする

CSSレシピ

  1. ボタンのCSSレシピ
  2. テキストリンクのCSSレシピ
  3. メニューボタンのCSSレシピ

開発

  1. リセットCSSを活用する
  2. ブラウザの開発ツールを活用する

エフィクト

  1. テキストを半透明にする
  2. 要素を透過させる
  3. CSSでグラデーションを設定する
  4. サイズを指定した要素内にスクロールバーを表示する
  5. 要素を角丸にする
  6. 要素に影(ドロップシャドウ)を設定する
  7. 1つの要素に複数の影(ドロップシャドウ)を設定する
  8. テキストに影(ドロップシャドウ)を設定する
  9. 外部サイトへのリンクにアイコンをつける
  10. ファイルのダウンロードリンクにアイコンをつける

フォント

  1. Webフォントを使う
  2. どの環境でも綺麗なゴシック体、明朝体のフォントを指定する
  3. Font Awesomeを使う
  4. 絵文字が絵文字として表示されないときの解決方法

フォーム

  1. placeholder(プレースホルダー)属性のテキストカラーを変える
  2. フォームの入力欄に入力ヒントを表示する
  3. WindowsのChromeでテキストエリアの文字が小さくなるのを防ぐ
  4. 通常のテキストを入力するフォームを作る
  5. フォームの項目にラベル(項目名)をつける
  6. 複数行のテキストを入力するフォームを作る
  7. メールアドレスを入力するためのフォームを作る
  8. 電話番号を入力するためのフォームを作る
  9. パスワードを入力するためのフォームを作る
  10. 最初に入力してほしい入力欄(フィールド)に自動フォーカスする
  11. フォームの必須入力項目を指定する
  12. フォームに入力できない入力欄を設定する
  13. 非表示のデータ入力欄を設置する
  14. ラジオボタンを設置する
  15. チェックボックスを設置する
  16. プルダウンメニューを設置する
  17. プルダウンメニューの項目をグループで分ける
  18. ファイルをアップロードするためのフォームを作る
  19. 送信ボタンを設置する
  20. ブラウザによって異なる送信ボタンの余白やサイズを揃える
  21. 汎用的なボタンを設置する
  22. 入力状態のフィールドにスタイルを適用する
  23. フォームの入力チェックでエラーになったフィールドのスタイルを変える
  24. プルダウンメニューのデザインを変更する

画像

  1. IEでSVGファイルが豆粒みたいになる現象を回避する
  2. SVG形式の画像を表示する
  3. 背景画像の表示位置を指定する
  4. 背景画像のサイズを要素の幅に合わせて調整する
  5. 複数の背景画像を設定する
  6. 複数の背景画像を使って、引用のコンテンツにデザインを適用する
  7. 画像を使った送信ボタンを設置する
  8. ファビコンを設定する
  9. スマホ向けのファビコンを設定する
  10. ヘッダーに画像を使ったロゴを表示する
  11. 画像を角丸にしたり、円形に切り抜く
  12. 画面の幅いっぱいに画像を表示する
  13. ウインドウの幅に合わせて伸縮する画像表示を設定する
  14. CSSスプライトを使ってアイコンを表示する

レイアウト

  1. ページの中に他のHTMLを読み込んで表示する
  2. ブロックレベル要素内でコンテンツを完結させる
  3. テキストとアイコン画像の表示位置を揃える
  4. 画像を設置した時にできる隙間を無くす
  5. 検索キーワード入力欄とボタンが横並びになった検索ボックスを作る
  6. 横並びのメニューを作成する
  7. 「display:flex;」によるフレックスボックスでナビゲーションを等幅に並べる
  8. ナビゲーションのメニューボタンの余白を等幅で表示する
  9. 画像に対してテキストを回り込ませる
  10. 図やグラフに対してテキストを回り込ませる
  11. floatプロパティによる回り込みを途中で解除する
  12. floatプロパティでボックスを横に並べる
  13. フレックスボックス「display:flex;」を使って記事一覧を作成する
  14. clearfixを使ってfloatによる回り込みを解除する
  15. サムネイル画像とテキストのコンテンツを横並びにする
  16. 画像の上にテキストを表示する
  17. フレックスボックスのレイアウトパターン
  1. リンクにスタイルを設定する
  2. バナーなど画像にリンクを設定する
  3. スマートフォン/タブレットでリンクをタップしたときのスタイルを指定する
  4. サイト内リンクと外部リンクの設定
  5. ファイルをダウンロードするリンクを設定する
  6. ブロックレベルのリンクを作成する
  7. 電話番号の自動リンク設定を解除する

リスト

  1. リスト(箇条書き)のアイコンを画像にする
  2. リスト(箇条書き)の番号を設定する
  3. リストのアイコンを変更する
  4. リストのテキスト開始位置と改行位置を揃える

マークアップ

  1. 日付や時刻をHTMLでマークアップする
  2. 略称と正式名称の組み合わせをマークアップする
  3. テキストの訂正箇所をマークアップする
  4. テキストに新しい文言を追加した箇所をマークアップする
  5. リスト(箇条書き)のマークアップ
  6. 定義リストを使って、キーワードと説明をマークアップする
  7. メールアドレスや電話番号のマークアップ
  8. 連絡先をマークアップする
  9. article要素とsection要素の使い方
  10. 写真や図(グラフ)とキャプションをマークアップする
  11. キーボードの入力例をマークアップする
  12. パンくずリストを作成する

Sass

  1. Sass(サス)チートシート
  2. @extendと@mixinの違い
  3. Sassの書き方(ネスト)
  4. Sassの書き方(変数)
  5. Sassの書き方(オリジナルの関数を作る)
  6. Sassの書き方(デバッグ)
  7. Sassの書き方(ファイル分割)
  8. Sassの書き方(演算)
  9. @extendを使ってセレクタ単位でスタイルを共通化する
  10. @mixinを使ってCSSプロパティ単位でスタイルを共通化する
  11. Sassの書き方(コメント)
  12. Sassの書き方(if文)
  13. Sassの書き方(ループ)
  14. Sassで扱えるデータの型

設定

  1. HTMLページの文字コードを設定する
  2. HTMLページの説明文(概要)を設定する
  3. ページにキーワードを設定する
  4. ツールチップの表示を設定する
  5. viewport(ビューポート)の設定について
  6. メディアクエリを使って画面サイズごとにCSSを切り替える
  7. 印刷用のCSSを設定する
  8. 特定のページをGoogleなどの検索結果に表示されないようにする
  9. 要素にアクセスキーを設定する
  10. Tab(タブ)キーで要素の移動順序を設定する
  11. 特定の時間が経過したら自動的にページ遷移(リダイレクト)する

テーブル

  1. テーブル(表)のセルのサイズを指定する
  2. テーブルの奇数行、偶数行ごとに背景色を設定する
  3. テーブルのセルごとにスタイルを適用する
  4. テーブルの見出し、フッターにのみスタイルを適用する
  5. テーブルの行やセルにマウスカーソルが乗っているときにスタイルを変える
  6. テーブルの幅が狭くなってもテキストをできるだけ自動改行させないようにする

テキスト

  1. テキストの一部を重要なものとして強調させる
  2. HTMLで計算式や単位、元素記号、注釈のテキストを表記する
  3. HTMLページでの引用作法と書き方
  4. テキストに読み方(ルビ)を表記する
  5. HTMLで記号や特殊文字を通常文字として表記する
  6. テキストの行間や字間を調節する
  7. テキストの行揃えを調節する
  8. テキストに段落を設定する
  9. テキストの1文字目だけCSSを適用する
  10. テキストの1行目だけCSSを適用する
  11. ::beforeと::afterを使って要素の前後に文字を追加する
  12. 選択したテキストの選択範囲の色を変える
  13. テキストにペンで線を引いたようなスタイルを指定する
  14. タブの文字数(幅のサイズ)をCSSで指定する
  15. テキストの向きを横書き/縦書きにする
  16. テキストを改行しないで末尾に「…」を付けて省略表示する

ワークショップ

基礎

リファレンス

HTML

A
a要素
abbr要素
address要素
area要素
article要素
aside要素
audio要素
B
b要素
base要素
bdi要素
bdo要素
blockquote要素
body要素
br要素
button要素
C
canvas要素
caption要素
cite要素
code要素
col要素
colgroup要素
D
data要素
datalist要素
dd要素
del要素
details要素
dfn要素
dialog要素
div要素
dl要素
dt要素
E
embed要素
em要素
F
fieldset要素
figcaption要素
figure要素
footer要素
form要素
H
h1,h2,h3,h4,h5,h6要素
head要素
header要素
hr要素
html要素
I
i要素
iframe要素
img要素
input要素
ins要素
K
kbd要素
keygen要素
L
label要素
legend要素
li要素
link要素
M
main要素
map要素
mark要素
menu要素
menuitem要素
meta要素
meter要素
N
nav要素
noscript要素
O
object要素
ol要素
optgroup要素
option要素
output要素
P
p要素
param要素
picture要素
pre要素
progress要素
Q
q要素
R
rb要素
rp要素
rt要素
rtc要素
ruby要素
S
s要素
samp要素
script要素
section要素
select要素
small要素
source要素
span要素
strong要素
style要素
sub要素
summary要素
sup要素
T
table要素
tbody要素
td要素
template要素
textarea要素
tfoot要素
th要素
thead要素
time要素
title要素
tr要素
track要素
U
u要素
ul要素
V
var要素
video要素
W
wbr要素

CSS

B
background-attachmentプロパティ
background-clipプロパティ
background-colorプロパティ
background-imageプロパティ
background-originプロパティ
background-positionプロパティ
background-repeatプロパティ
background-sizeプロパティ
backgroundプロパティ
border-collapseプロパティ
border-colorプロパティ
border-image-outsetプロパティ
border-image-repeatプロパティ
border-image-sliceプロパティ
border-image-sourceプロパティ
border-image-widthプロパティ
border-imageプロパティ
border-radiusプロパティ
border-spacingプロパティ
border-styleプロパティ
border-widthプロパティ
borderプロパティ
box-decoration-breakプロパティ
box-shadowプロパティ
box-sizingプロパティ
break-afterプロパティ
break-beforeプロパティ
break-insideプロパティ
C
caption-sideプロパティ
clearプロパティ
clipプロパティ
colorプロパティ
column-countプロパティ
column-fillプロパティ
column-gapプロパティ
column-rule-colorプロパティ
column-rule-styleプロパティ
column-rule-widthプロパティ
column-ruleプロパティ
column-spanプロパティ
column-widthプロパティ
columnsプロパティ
D
directionプロパティ
displayプロパティ
E
empty-cellsプロパティ
F
floatプロパティ
font-familyプロパティ
font-feature-settingsプロパティ
font-sizeプロパティ
font-stretchプロパティ
font-styleプロパティ
font-variant-capsプロパティ
font-variantプロパティ
font-weightプロパティ
fontプロパティ
H
heightプロパティ
hyphensプロパティ
L
letter-spacingプロパティ
line-breakプロパティ
line-heightプロパティ
list-style-imageプロパティ
list-style-positionプロパティ
list-style-typeプロパティ
list-styleプロパティ
M
marginプロパティ
max-heightプロパティ
max-widthプロパティ
min-heightプロパティ
min-widthプロパティ
O
opacityプロパティ
outline-colorプロパティ
outline-offsetプロパティ
outline-styleプロパティ
outline-widthプロパティ
outlineプロパティ
overflow-wrapプロパティ
overflow-xプロパティ
overflow-yプロパティ
overflowプロパティ
P
paddingプロパティ
positionプロパティ
R
resizeプロパティ
T
tab-sizeプロパティ
table-layoutプロパティ
text-align-lastプロパティ
text-alignプロパティ
text-decoration-colorプロパティ
text-decoration-lineプロパティ
text-decoration-styleプロパティ
text-decorationプロパティ
text-emphasis-colorプロパティ
text-emphasis-positionプロパティ
text-emphasis-styleプロパティ
text-emphasisプロパティ
text-indentプロパティ
text-justifyプロパティ
text-overflowプロパティ
text-shadowプロパティ
text-transformプロパティ
U
unicode-bidiプロパティ
V
vertical-alignプロパティ
visibilityプロパティ
W
white-spaceプロパティ
widthプロパティ
word-breakプロパティ
word-spacingプロパティ
word-wrapプロパティ
writing-modeプロパティ
Z
z-indexプロパティ