レシピ
エフィクト
フォーム
- placeholder(プレースホルダー)属性のテキストカラーを変える
- フォームの入力欄にプレースホルダーを設定して入力のヒントを表示する
- WindowsのChromeでテキストエリアの文字が小さくなるのを防ぐ
- 通常のテキストを入力するフォームを作る
- フォームの項目にラベル（項目名）をつける
- 複数行のテキストを入力するフォームを作る
- メールアドレスを入力するためのフォームを作る
- 電話番号を入力するためのフォームを作る
- パスワードを入力するためのフォームを作る
- 最初に入力してほしい入力欄（フィールド）に自動フォーカスする
- フォームの必須入力項目を指定する
- フォームに入力できない入力欄を設定する
- 非表示のデータ入力欄を設置する
- ラジオボタンを設置する
- チェックボックスを設置する
- プルダウンメニューを設置する
- プルダウンメニューの項目をグループで分ける
- ファイルをアップロードするためのフォームを作る
- 送信ボタンを設置する
- ブラウザによって異なる送信ボタンの余白やサイズを揃える
- 汎用的なボタンを設置する
- 入力状態のフィールドにスタイルを適用する
- フォームの入力チェックでエラーになったフィールドのスタイルを変える
- プルダウンメニューのデザインを変更する
画像
レイアウト
- ページの中に他のHTMLを読み込んで表示する
- ブロックレベル要素内でコンテンツを完結させる
- テキストとアイコン画像の表示位置を揃える
- 画像を設置した時にできる隙間を無くす
- 検索キーワード入力欄とボタンが横並びになった検索ボックスを作る
- 横並びのメニューを作成する
- 「display:flex;」によるフレックスボックスでナビゲーションを等幅に並べる
- ナビゲーションのメニューボタンの余白を等幅で表示する
- 画像に対してテキストを回り込ませる
- 図やグラフに対してテキストを回り込ませる
- floatプロパティによる回り込みを途中で解除する
- floatプロパティでボックスを横に並べる
- フレックスボックス「display:flex;」を使って記事一覧を作成する
- clearfixを使ってfloatによる回り込みを解除する
- サムネイル画像とテキストのコンテンツを横並びにする
- 画像の上にテキストを表示する
- フレックスボックスのレイアウトパターン
リンク
マークアップ
Sass
設定
テーブル
テキスト
- テキストの一部を重要なものとして強調させる
- HTMLで計算式や単位、元素記号、注釈のテキストを表記する
- HTMLページでの引用作法と書き方
- テキストに読み方（ルビ）を表記する
- HTMLで記号や特殊文字を通常文字として表記する
- テキストの行間や字間を調節する
- テキストの行揃えを調節する
- テキストに段落を設定する
- テキストの1文字目だけCSSを適用する
- テキストの1行目だけCSSを適用する
- ::beforeと::afterを使って要素の前後に文字を追加する
- 選択したテキストの選択範囲の色を変える
- テキストにペンで線を引いたようなスタイルを指定する
- タブの文字数（幅のサイズ）をCSSで指定する
- テキストの向きを横書き／縦書きにする
- テキストを改行しないで末尾に「…」を付けて省略表示する
ワークショップ
基礎
CSS
CSSプロパティ
- 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プロパティ
- 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プロパティ
- directionプロパティ
- displayプロパティ
- empty-cellsプロパティ
- floatプロパティ
- font-familyプロパティ
- font-feature-settingsプロパティ
- font-sizeプロパティ
- font-stretchプロパティ
- font-styleプロパティ
- font-variantプロパティ
- font-variant-alternatesプロパティ
- font-variant-capsプロパティ
- font-variant-east-asianプロパティ
- font-variant-ligaturesプロパティ
- font-variant-numericプロパティ
- font-weightプロパティ
- fontプロパティ
- heightプロパティ
- hyphensプロパティ
- letter-spacingプロパティ
- line-breakプロパティ
- line-heightプロパティ
- list-style-imageプロパティ
- list-style-positionプロパティ
- list-style-typeプロパティ
- list-styleプロパティ
- marginプロパティ
- max-heightプロパティ
- max-widthプロパティ
- min-heightプロパティ
- min-widthプロパティ
- opacityプロパティ
- outline-colorプロパティ
- outline-offsetプロパティ
- outline-styleプロパティ
- outline-widthプロパティ
- outlineプロパティ
- overflow-wrapプロパティ
- overflow-xプロパティ
- overflow-yプロパティ
- overflowプロパティ
- paddingプロパティ
- positionプロパティ
- resizeプロパティ
- 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プロパティ
- unicode-bidiプロパティ
- vertical-alignプロパティ
- visibilityプロパティ
- white-spaceプロパティ
- widthプロパティ
- word-breakプロパティ
- word-spacingプロパティ
- word-wrapプロパティ
- writing-modeプロパティ
- z-indexプロパティ
HTML
HTML要素
- a要素
- abbr要素
- address要素
- area要素
- article要素
- aside要素
- audio要素
- b要素
- base要素
- bdi要素
- bdo要素
- blockquote要素
- body要素
- br要素
- button要素
- canvas要素
- caption要素
- cite要素
- code要素
- col要素
- colgroup要素
- data要素
- datalist要素
- dd要素
- del要素
- details要素
- dfn要素
- dialog要素
- div要素
- dl要素
- dt要素
- embed要素
- em要素
- fieldset要素
- figcaption要素
- figure要素
- footer要素
- form要素
- h1,h2,h3,h4,h5,h6要素
- head要素
- header要素
- hr要素
- html要素
- i要素
- iframe要素
- img要素
- input要素
- ins要素
- kbd要素
- keygen要素
- label要素
- legend要素
- li要素
- link要素
- main要素
- map要素
- mark要素
- menu要素
- menuitem要素
- meta要素
- meter要素
- nav要素
- noscript要素
- object要素
- ol要素
- optgroup要素
- option要素
- output要素
- p要素
- param要素
- picture要素
- pre要素
- progress要素
- q要素
- rb要素
- rp要素
- rt要素
- rtc要素
- ruby要素
- s要素
- samp要素
- script要素
- section要素
- select要素
- small要素
- source要素
- span要素
- strong要素
- style要素
- sub要素
- summary要素
- sup要素
- table要素
- tbody要素
- td要素
- template要素
- textarea要素
- tfoot要素
- th要素
- thead要素
- time要素
- title要素
- tr要素
- track要素
- u要素
- ul要素
- var要素
- video要素
- wbr要素