Web制作リファレンス

HTML・CSSを学び、コードと表示で確かめる。

HTMLタグ・属性、CSSプロパティ・疑似クラス、アニメーションを目的から検索し、実際のコードと表示を見比べながら学べます。HTML図鑑・HTMLライブラリ・HTMLリファレンス、CSS図鑑・CSSライブラリ・CSSリファレンスとして、学習にも制作中の確認にも使えます。

はじめて使う方へ

3ステップで使えます

作りたい内容に近いページを選び、検索結果から必要な説明とコード例だけを確認できます。

動きはCSSアニメーション、タグはHTML辞典、見た目の指定はCSS辞典から探します。

「画像」「中央揃え」「ホバー」のような言葉でも検索できます。名称が分からなくても構いません。

必要なコードだけをコピーし、説明を見ながら値を調整します。公開前に対象ブラウザーでも確認してください。

ページを選ぶ

名称が分からなくても、用途に近いページから日本語で検索できます。

360種類の動きを実際に確認し、HTMLとCSSをコピーできます。時間・距離・色など、変更する場所も説明します。

HTML要素と属性を、使用場面、サンプル、注意点から調べられます。

プロパティ、値、単位、関数、セレクターを、初心者向けの説明とコード例から調べられます。

画像内をクリックして色を取得し、HEX・RGB・HSLなどをコピーできます。画像は端末内で処理します。

日本語で役割を入力し、意味が伝わるclass・ID・BEM・data属性の候補を作ります。

完成例と確認中のHTML・CSS・JavaScriptを左右に貼り付け、記号、全角・半角、大文字・小文字を含むコードの違いを確認できます。

W3C HTML5 Logoを基にした非公式素材です。配布条件と必要なクレジットを確認してダウンロードできます。

HTML、CSS、JavaScript、Microsoft、Adobeのロゴ利用とクレジット位置を確認できます。

運営者サイト

InkSignal Labの運営者サイトです。Windows、Office、Adobe、Web制作、アプリ開発の記事を公開しています。