Webページを公開するには Webページを外部に公開するには、「動く場所＝サーバー」「サイトの名前＝ドメイン」「技術要件＝SSLなど」がそろっている必要があります。 例えば、WordPressを使用したサイトの場合は、PHPやMySQL、メールが動作する必要があり...

お問い合わせフォームの機能をページに盛り込む場合、フォーム送信されたデータを受信してメールを送信する処理をWebサーバー側で行う必要があるので、一般的には実装するにはサーバー側のプログラミングの知識が必要です。 運用を考えると、Googleフォー...

Webページを閲覧しているときに、スクロールしていてビューポート内に要素が入ったらアニメーションが動き始める、というケースは沢山見かけると思います。そのように動かす方法をここで学んでいきましょう。 CSSだけでスクロール検知してアニメーションさ...

プラグインとは プラグインとは、機能を拡張するために追加できるソフトウェアのことです。Web制作においては、「プラグイン」「ライブラリ」のような呼び方で、ページに機能を組み込むことができます。 このページでは、3つの機能（計4つのパターン）の実...

Webページに動きをつける理由を考えよう Webページに動きがあると、見る人への様々な効果があります。 視線の誘導 動きがあるとそこへ視線が移りやすいので、目立たせたい・見てほしい要素の近くに動きをつけることが多いです。また、次にどうしてほしいの...

レイアウトでよくあるケースについて、説明します。 要素の横幅、高さの設定について width, height 要素の高さは、ほとんどのケースで設定しません。横幅はほとんどの場合、％指定を行います。（ごく小さい要素の場合は、px指定する場合があります） レス...

デバイスの幅に応じて表示を変えるための基本設定 headタグ内に、以下のように記載しましょう。この記載がないと、レスポンシブ対応されません。VS Codeでは、Emmetで! にて表示されるテンプレートに予めセットされています。 <meta name="viewport" co...

CSSファイルをHTMLへ組み込む CSSをHTMLに組み込む方法は、いくつかあります。通常は、CSSファイルのパスをlinkタグでheadタグの中に書きます。 フォルダーから読み込む（相対パス指定） HTMLから見たCSSのファイルパスを書きます。以下は、相対パスによる...

HTMLの整形に関する設定は、以下を参照。https://learn.frog-eight.info/syntax-check/#index_id3 VS Codeの拡張機能 沢山ありますが、必要最低限のもの、あると便利なものを紹介します。 W3C Web Validator識別子　celianriboulet.webvalidatorHTMLの構文...

マークアップ準備 実際にデザインを見ながらマークアップするとき、慣れないうちはデザインを印刷するか、白い紙に手書きで「セクションに分ける」枠を書き込みます。 それぞれの要素に対して、どの種類のタグを付与するか、これも書き込みます。 慣れてき...