our note web制作のwiki
現役フロントエンジニアが、web制作に必要なHTML・CSS・Sass・Javascript・jQueryなどの知識を参照しやすい形で記事に致しました！
個人でも、コーディングやWebサイトで使用するパーツ作成など、様々なお仕事をいただいております。
このページは、私が運営しているour noteと私自身の紹介ページです。
現役フロントエンジニアが、web制作に必要なHTML・CSS・Sass・Javascript・jQueryなどの知識を参照しやすい形で記事に致しました！
個人でも、コーディングやWebサイトで使用するパーツ作成など、様々なお仕事をいただいております。
このページは、私が運営しているour noteと私自身の紹介ページです。
| background-clip | background-clip:背景の適用範囲を指定する |
|---|---|
| background-origin | background-origin:背景の基準位置を指定する |
| background-size | background-size:背景画像のサイズを指定する |
| border-radius | border-radius:角丸をまとめて指定する |
| border-top-left-radius | border-top-left-radius:左上の角丸を指定する |
| border-top-right-radius | border-top-right-radius:右上の角丸を指定する |
| border-bottom-left-radius | border-bottom-left-radius:左下の角丸を指定する |
| border-bottom-right-radius | border-bottom-right-radius:右下の角丸を指定する |
| border-image | border-image:画像の枠線を指定する |
| border-image-source | border-image-source:画像の枠線に使用する画像ファイルを指定する |
| border-image-slice | border-image-slice:ボーダー画像の使用範囲を指定する |
| border-image-width | border-image-width:画像の枠線の太さを指定する |
| border-image-outset | border-image-outset:ボーダー画像の領域がボーダーボックスを超えて拡がる量を指定する |
| border-image-repeat | border-image-repeat:画像ボーダーの繰り返し方法を指定する |
| box-shadow | box-shadow:要素に影(シャドウ)をつける |
| opacity | opacity:要素の透明度を指定する |
| rgba()関数：色の透明度も指定可能！ | rgba()関数:色と透明度を指定する |
| color-profile | color-profile:カラープロファイルを指定する |
| rendering-intent | rendering-intent:描画の際のカラープロフィールを指定する |
| linear-gradient()関数 | linear-gradient()関数:線形グラデーションを指定する |
| radial-gradient()関数 | radial-gradient()関数:円形グラデーションを指定する |
| repeating-linear-gradient()関数 | repeating-linear-gradient()関数:繰り返しの線形グラデーションを指定する |
| repeating-radial-gradient()関数 | repeating-radial-gradient()関数:繰り返しの円形グラデーションを指定する |
| flex-flow | flex-flow:flexboxの子要素の配置方向と折り返し方法をまとめて指定する |
| flex-direction | flex-direction:flexboxの子要素の配置方向を指定する |
| flex-wrap | flex-wrap:flexboxの子要素の折り返し方法を指定する |
| order | order:flexboxの子要素の表示順序を指定する |
| flex | flex:flexboxの子要素の幅についてまとめて指定する |
| flex-basis | flex-basis:flexboxの子要素の基本幅を指定する |
| flex-shrink | flex-shrink:flexboxの子要素の縮み方の比率を指定する |
| flex-grow | flex-grow:flexboxの子要素の伸び方の比率を指定する |
| grid-template-rows | grid-template-rows:グリッドトラックの縦方向のサイズリストを指定する |
| grid-template-columns | grid-template-columns:グリッドトラックの横方向のサイズリストを指定する |
| grid-template-areas | grid-template-areas:名前付きグリッド領域を指定する |
| grid-template | grid-template:グリッドトラックのリストについてまとめて指定する |
| grid-auto-rows | grid-auto-rows:サイズリストでは不明確なグリッドトラックの縦方向のサイズを指定する |
| grid-auto-columns | grid-auto-columns:サイズリストでは不明確なグリッドトラックの横方向のサイズを指定する |
| grid-auto-flow | grid-auto-flow:グリッドアイテムの自動配置のされ方を指定する |
| grid | grid:グリッドについてまとめて指定する |
| grid-row-start | grid-row-start:行グリッドの開始位置やサイズ（グリッドスパン）を指定する |
| grid-column-start | grid-column-start:列グリッドの開始位置やサイズ（グリッドスパン）を指定する |
| grid-row-end | grid-row-end:行グリッドの終了位置やサイズ（グリッドスパン）を指定する |
| grid-column-end | grid-column-end:列グリッドの終了位置やサイズ（グリッドスパン）を指定する |
| grid-row | grid-row:行グリッドの開始と終了についてまとめて指定する |
| grid-column | grid-column:列グリッドの開始と終了についてまとめて指定する |
| grid-area | grid-area:行グリッド・列グリッドの開始と終了についてまとめて指定する |
| columns | columns:からむ幅とカラム数を指定する |
| column-width | column-width:カラム幅を指定する |
| column-count | column-count:カラム数を指定する |
| column-gap | column-gap:アイテム同士の縦方向の間隔を指定する |
| column-rule | column-rule:カラムの区切り線のスタイル・幅・色を指定する |
| column-rule-color | column-rule-color:カラムの区切り線の色を指定する |
| column-rule-style | column-rule-style:カラムの区切り線のスタイルを指定する |
| column-rule-width | column-rule-width:カラムの区切り線の幅を指定する |
| column-span | column-span:要素がまたがる（横切る）カラム数を指定する |
| column-fill | column-fill:カラム同士の高さ（内容量）を揃えるかどうかを指定する |
| break-before | break-before:ボックス前でのカラムの区切り方法を指定する |
| break-after | break-after:ボックス後でのカラムの区切り方法を指定する |
| break-inside | break-inside:ボックス途中でのカラムの区切り方法を指定する |
| orphans | orphans:改ページされる際の前ページの最低行数を指定する |
| widows | widows:改ページされる際の次ページの最低行数を指定する |
| box-decoration-break | box-decoration-break:ボックスが改行する際の表示形式を指定する |
| align-content | align-content:flexboxの子要素全体の交差軸方向の揃え位置を指定する |
| justify-content | justify-content:flexboxの子要素全体の主軸方向の揃え位置を指定する |
| place-content | place-content:flexboxの親要素全体の交差軸方向と主軸方向の揃え位置をまとめて指定する |
| align-items | align-items:flexboxの子要素の交差軸方向のデフォルト揃え位置を指定する |
| justify-items | justify-itemsflexboxの子要素のアイテムの主軸方向のデフォルト揃え位置を指定する |
| place-items | place-items:flexboxの子要素の交差軸方向と主軸方向のデフォルト揃え位置をまとめて指定する |
| align-self | align-self:flexboxの子要素の個別アイテムの縦方向の揃え位置を指定する |
| justify-self | justify-self:flexboxの子要素の個別アイテムの横方向の揃え位置を指定する |
| place-self | place-self:flexboxの子要素の個別アイテムの縦方向と横方向の揃え位置をまとめて指定する |
| row-gap | row-gap:アイテム同士の横方向の間隔を指定する |
| column-gap | column-gap:アイテム同士の縦方向の間隔を指定する |
| gap | gap:アイテム同士の横方向と縦方向の間隔をまとめて指定する |
| object-fit | object-fitで画像を指定したサイズにフィットさせる |
| object-position | object-position:画像などのボックスへの配置位置を指定する |
| image-orientation | image-orientation:横向きや逆さまの画像を回転させて正しい向きに補正する |
| image-rendering | image-rendering:画像が拡大・縮小された際の描画方法を指定する |
| image-resolution | image-resolution:画像を描画する際の解像度を指定する |
| mix-blend-mode | mix-blend-mode:背景色と要素のブレンド方法を指定する |
| background-blend-mode | background-blend-mode:背景色と背景画像のブレンド方法を指定する |
| isolation | isolation:要素をスタッキングコンテキストから分離する |
| shape-outside | shape-outside:フロート要素への回り込みの形状を指定する |
| shape-image-threshold | shape-image-threshold:画像ファイルから図形を抽出する際の不透明度を指定する |
| shape-margin | shape-margin:フロート要素への回り込みの形状にマージンを指定する |
| clip-path | clip-path:要素をクリッピング（切り抜き）する |
| clip-rule | clip-rule:SVGグラフィックス要素の塗りつぶし方法を指定する |
| mask-image | mask-image:マスクレイヤーとなるイメージを指定する |
| mask-mode | mask-mode:マスクのモード（輝度値・アルファ値）を指定する |
| mask-repeat | mask-repeat:マスクレイヤーイメージの繰り返し方法を指定する |
| mask-position | mask-position:マスクレイヤーイメージの位置を指定する |
| mask-clip | mask-clip:マスク適用の範囲を指定する |
| mask-origin | mask-origin:マスク適用の基準位置を指定する |
| mask-size | mask-size:マスクレイヤーイメージのサイズを指定する |
| mask-composite | mask-composite:複数マスクの合成方法を指定する |
| mask | mask:マスクに関する指定をまとめて行う |
| mask-border-source | mask-border-source:マスクボーダー画像として使用する画像を指定する |
| mask-border-mode | mask-border-mode:マスクボーダーのモード（輝度値・アルファ値）を指定する |
| mask-border-slice | mask-border-slice:マスクボーダー画像の使用範囲を指定する |
| mask-border-width | mask-border-width:マスクボーダーの太さを指定する |
| mask-border-outset | mask-border-outset:マスクボーダー領域がボーダーボックスを超えて拡がる量を指定する |
| mask-border-repeat | mask-border-repeat:マスクボーダーの繰り返し方法を指定する |
| mask-border | mask-border:マスクボーダーに関する指定をまとめて行う |
| transform | transformでアニメーション！要素を動かすプロパティ |
| transform:matrix() | transform:matrix():要素に2D変形を適用する |
| transform:matrix3d() | transform:matrix3d():要素に3D変形を適用する |
| transform:translate() | transform:translate():要素の表示位置を移動させる |
| transform:scale() | transform:scale():要素を拡大・縮小表示する |
| transform:rotate() | transform:rotate():要素を回転表示する |
| transform:skew() | transform:skew():要素を傾斜変形させる際に使用 |
| transform:perspective() | transform:perspective():3D変形の遠近効果を調節する際に使用 |
| transform-origin | transform-origin:変形させる要素の中心点の位置を指定 |
| transform-style | transform-style:子要素を平面か立体的に表示するかを指定 |
| perspective | perspective:3D変形させた要素の奥行きを指定 |
| perspective-origin | perspective-origin:3D変形させた要素の奥行きの起点を指定 |
| backface-visibility | backface-visibility:3D空間で変形した要素の背面の表示方法を指定 |
| transition | transition:transitionの値をまとめて指定する |
| transition-duration | transition-duration:変化に掛かる時間を指定する |
| transition-timing-function | transition-timing-function:変化のタイミング・進行割合を指定する |
| transition-delay | transition-delay:変化がいつ始まるかを指定する |
| animation | animation:アニメーションについてまとめて指定する |
| animation-name | animation-name:アニメーション名を指定する |
| animation-duration | animation-duration:アニメーション一回分の時間の長さを指定する |
| animation-timing-function | animation-timing-function:アニメーションのタイミング・進行割合を指定する |
| animation-iteration-count | animation-iteration-count:アニメーションの繰り返し回数を指定する |
| animation-direction | animation-direction:アニメーションを交互に反転再生させるかどうかを指定する |
| animation-play-state | animation-play-state:再生中か一時停止かを指定する |
| animation-delay | animation-delay:アニメーションがいつ始まるかを指定する |
| text-transform | text-transform:テキストを大文字・小文字・全角文字への変換を指定する |
| white-space | white-space:ソース中のホワイトスペース・改行の表示方法を指定する |
| word-break | word-break:テキストや単語の改行方法を指定する |
| overflow-wrap | overflow-wrap:単語やテキストの改行方法を指定する |
| word-wrap | word-wrap:テキストや単語を途中で改行方法 |
| text-align | text-align:ブロックコンテナ内の行の揃え位置・均等割付を指定する |
| word-spacing | word-spacing:単語の間隔を指定する |
| letter-spacing | letter-spacing:文字の間隔を調節する |
| text-decoration | text-decorationでリンクの下線を削除！テキストを装飾しよう！ |
| text-shadow | text-shadow:テキストに影をつける。サンプルコードあり！ |
| overflow-x | overflow-x:はみ出た要素の左右の表示方法を指定する |
| overflow-y | overflow-y:はみ出た要素の上下の表示方法を指定する |
| overflow | overflow:hidden・scrollなど。はみ出た要素の表示方法を指定しよう |
| overflow-style | overflow-style:スクロール方法の優先度を指定する |
| box-sizing | box-sizing:ボックスサイズの算出方法を指定する |
| resize | resize:ユーザーが要素のサイズを変更できるかどうかを指定する |
| calc()関数 | calc()関数で幅調整！テンプレコード付きでわかりやすい。 |
| attr()関数 | attr()関数で属性を取得！テンプレコード付きでわかりやすい！ |
| <!DOCTYPE html> | HTML5のテンプレート付き。DOCTYPE宣言について |
|---|---|
| <html>〜</html> | htmlタグの基本的な意味と使用方法を初心者向けに解説 |
| <head>〜</head> | html headタグの書き方 メタデータ・SEO対策 |
| <title>〜</title> | html titleタグの使い方は重要、SEO対策の基本 |
| <base> | html baseタグで基準のURLを指定 |
| <link> | html linkタグとaタグの違いと書き方・意味 |
| <meta> | html metaタグ 書き方・意味 |
| <style>〜</style> | html内にCSSを記述するstyleタグの書き方・意味 |
| <body>〜</body> | html body タグ 書き方・意味 |
| <article>〜</article> | html article タグ 書き方・意味 |
| <section>〜</section> | html section タグ 書き方・意味 |
| <nav>〜</nav> | htmlでナビゲーションを作成。navタグ書き方・意味 |
| <aside>〜</aside> | html aside タグ 書き方・意味 |
| <h1>〜</h1> | html h1タグ(見出し) の書き方・意味 |
| <h2>〜</h2> | html h2タグ(見出し) の書き方・意味 |
| <h3>〜</h3> | html h3タグ(見出し) の書き方・意味 |
| <h4>〜</h4> | html h4タグ(見出し) の書き方・意味 |
| <h5>〜</h5> | html h5タグ(見出し) の書き方・意味 |
| <h6>〜</h6> | html h6タグ(見出し) の書き方・意味 |
| <header>〜</header> | html header タグ 書き方・意味 |
| <footer>〜</footer> | html footer タグ 書き方・意味 |
| <address>〜</address> | htmlのaddressタグで電話番号や問い合わせを作成 |
| <p>〜</p> | html pタグ(段落) の余白削除・書き方・意味 |
| <hr> | htmlのhrタグで横線を作る書き方・意味 |
| <pre>〜</pre> | html pre タグ 書き方・意味 |
| <blockquote>〜</blockquote> | html blockquoteタグで長文の引用を指定する書き方・意味 |
| <ol>〜</ol> | htmlでリスト作成。olタグ 書き方・意味 |
| <ul>〜</ul> | htmlでリスト作成。ulタグ 書き方・意味 |
| <li>〜</li> | htmlでリストを作成。liタグ 書き方・意味 |
| <dl>〜</dl> | html dlタグでお知らせを作成。書き方・意味 |
| <dt>〜</dt> | html dtタグでお知らせを作成。書き方・意味 |
| <dd>〜</dd> | html ddタグでお知らせを作成。書き方・意味 |
| <figure>〜</figure> | htmlのfigureタグで画像・テキストの関連付け。書き方・意味 |
| <figcaption>〜</figcaption> | html figcaptionタグで画像・テキストを表示。書き方・意味 |
| <main>〜</main> | html mainタグで主な内容を指定。書き方・意味 |
| <div>〜</div> | html divタグとは？特徴・ 書き方・意味 |
| <a>〜</a> | htmlのaタグでアンカーリンクを設置！ 書き方・意味 |
| <em>〜</em> | html em タグ 書き方・意味 |
| <strong>〜</strong> | htmlのstrongタグで文字を強調・太字に！ 書き方・意味 |
| <small>〜</small> | htmlのsmallタグで注釈・小文字指定。書き方・意味 |
| <s>〜</s> | htmlのsタグで打ち消し線を作成。書き方・意味 |
| <cite>〜</cite> | htmlのciteタグで作品タイトルの引用を示す。書き方・意味 |
| <q>〜</q> | html qタグで短い文章の引用を示す。書き方・意味 |
| <dfn>〜</dfn> | html dfn タグ 書き方・意味 |
| <abbr>〜</abbr> | html abbrタグで文字の略称を示す。書き方・意味 |
| <code>〜</code> | html codeタグでCSSやJavascriptのプログラムコードを記述。書き方・意味 |
| <var>〜</var> | html varタグで変数や引数を定義。書き方・意味 |
| <samp>〜</samp> | html samp タグ 書き方・意味 |
| <kbd>〜</kbd> | html kbdタグでキーボードで入力する内容を示す。書き方・意味 |
| <data>〜</data> | html dataタグで様々なデータを指定。書き方・意味 |
| <sub>〜</sub> | html subタグで下付き文字を表示する書き方・意味 |
| <sup>〜</sup> | html supタグで注釈や*マークの書き方・意味 |
| <time>〜</time> | html timeタグで時間や日にちを表す。書き方・意味 |
| <i>〜</i> | html iタグで文字を斜め、イタリックにする書き方・意味 |
| <b>〜</b> | html bタグで文字を太字にする書き方・意味 |
| <u>〜</u> | html uタグで文字に架線を引く 書き方・意味 |
| <mark>〜</mark> | html markタグで文字を黄色くハイライトにする書き方・意味 |
| <ruby>〜</ruby> | html rubyタグでふりがな・ルビを振る書き方・意味 |
| <rb>〜</rb> | html rbタグ 書き方・意味 |
| <rt>〜</rt> | html rtタグでふりがなを振る書き方・意味 |
| <rtc>〜</rtc> | html rtcタグで複数のふりがな・ルビを振る書き方・意味 |
| <rp>〜</rp> | html rpタグでルビの内容を記述する書き方・意味 |
| <bdi>〜</bdi> | html bdiタグで文字方向を自動変更する書き方・意味 |
| <bdo>〜</bdo> | html bdoタグで文字方向を変更する書き方・意味 |
| <span>〜</span> | html spanタグで 汎用的なインライン要素を作成する書き方・意味 |
| <br>〜</br> | html brタグで改行を挿入する書き方・意味 |
| <wbr>〜</wbr> | html wbrタグで改行する書き方・意味 |
| <img>〜</img> | html imgタグで画像を表示する書き方・意味 |
| <div>〜</div> | html divタグで画像の切り替えをする書き方・意味 |
| <iframe>〜</iframe> | html iframeタグでファイルの埋め込み・書き方・意味 |
| <embed>〜</embed> | html embedタグで音声や動画の埋め込みを行う書き方・意味 |
| <object>〜</object> | html objectタグで画像や動画など様々なデータの埋め込みの書き方・意味 |
| <param>〜</param> | html paramタグでyoutubeの動画や音声・画像にパラメータを付与する書き方・意味 |
| <video>〜</video> | html videoタグで動画ファイルの埋め込みをする書き方・意味 |
| <audio>〜</audio> | html audioタグで音声データを埋め込む書き方・意味 |
| <track>〜</track> | html trackタグで音声・画像ファイルに字幕を埋め込む書き方・意味 |
| <source>〜</source> | html sourceタグでsrcなどソースファイルの代替ファイルを指定する書き方・意味 |
| <map>〜</map> | html mapタグでイメージマップを作成する書き方・意味 |
| <area>〜</area> | html areaタグでイメージアップを作成する書き方・意味 |
| <table>〜</table> | html tableタグで表を作成し枠線の間隔を調整する書き方・意味 |
| <caption>〜</caption> | html captionタグでtable(表)のタイトルを指定する書き方・意味 |
| <colgroup>〜</colgroup> | html colgroupタグでtable(表)の列の属性をまとめて指定する書き方・意味 |
| <col>〜</col> | html colタグでtable(表)の行をまとめて指定する書き方・意味 |
| <tbody>〜</tbody> | html tbodyタグで行をグループ化する書き方・意味 |
| <thead>〜</thead> | html theadタグでtable(表)のヘッダー部分をグループ化する書き方・意味 |
| <tfoot>〜</tfoot> | html tfootタグでtable(表)のフッター部分をグループ化する書き方・意味 |
| <tr>〜</tr> | html trタグでtable(表)の行(レコード)を定義する書き方・意味 |
| <td>〜</td> | html tdタグでtable(表)の列(カラム)を定義する書き方 |
| <th>〜</th> | html thタグでtable(表)の見出しセルを定義する書き方・意味 |
| <form>〜</form> | html formタグでお問合せフォームを定義する書き方・意味 |
| <fieldset>〜</fieldset> | html fieldsetタグでフォームの入力項目をグループ化する書き方・意味 |
| <legend>〜</legend> | html legendタグでフォームのグループにタイトル・説明の書き方・意味 |
| <label>〜</label> | html labelタグでフォームの項目名を関連づけする(ラベル付け)する書き方・意味 |
| <input> | html inputタグでフォームのテキスト入力欄・ボタンを作成する書き方・意味 |
| <select>〜</select> | html selectタグでフォームのセレクトボックスを作成する書き方・意味 |
| <option>〜</option> | html optionタグでセレクトボックスの選択肢を作成する書き方・意味 |
| <optgroup>〜</optgroup> | html optgroupタグでメニューの選択肢(option)をグループ化する書き方・意味 |
| <textarea>〜</textarea> | html textareaタグでフォームの長文の入力欄を作成する書き方・意味 |
| <button>〜</button> | html buttonタグでボタンを作成する書き方・意味 |
| <datalist>〜</datalist> | html datalistタグで入力候補をユーザーに提示する書き方・意味 |
| <output>〜</output> | html outputタグでJavaScriptによる計算の出力結果の書き方・意味 |
| <progress>〜</progress> | html progressタグで処理の進捗状況などを表示する書き方・意味 |
| <meter>〜</meter> | html meterタグでディスクの使用量・投票量などの測定値を表示する書き方・意味 |
| <script>〜</script> | html scriptタグでJavascriptの記述や外部のjsファイルを読み込む方法の書き方・意味 |
| <noscript>〜</noscript> | html noscriptタグでscriptタグに対応していないブラウザへのメッセージの書き方・意味 |
| <template>〜</template> | html templateタグでscriptによる文書への挿入・複製が可能なHTMLの断片を定義する書き方・意味 |
| <canvas>〜</canvas> | html canvasタグで図形を描画する書き方・意味 |
| <details>〜</details> | html detailsタグで簡易アコーディオンを作成する書き方・意味 |
| <summary>〜</summary> | html summaryタグとdetailsタグで簡易アコーディオンを作成する書き方・意味 |
| <menu>〜</menu> | html menuタグでメニューを作成する書き方・意味 |
| <menuitem>〜</menuitem> | html menuitemタグでメニューの項目を作成する書き方・意味 |
| <ins>〜</ins> | html insタグでSEO対策！insertで要素を追加したことを伝える書き方・意味 |
| <del>〜</del> | html delタグでSEO対策！deleteで要素を削除したことを伝える書き方・意味 |