トビサワ– Author –
デジタルハリウッド(専門スクール)講師、大学非常勤講師。
Webサイトのデザイン・コーディング・PHPやJavaScriptによるプログラミング、サーバー設定などのスキルを保有し、企業や事業主からの依頼によりサイト制作を行っている。
クライアントの希望によって会社案内やパンフレットのデザイン、動画制作案件も請けている。
SIer企業でのシステムエンジニアを十数年経験後、2011年よりフリーランスへ転向。
-
HTML
12 Googleフォームをポップアップに埋め込む
お問い合わせフォームの機能をページに盛り込む場合、フォーム送信されたデータを受信してメールを送信する処理をWebサーバー側で行う必要があるので、一般的には実装するにはサーバー側のプログラミングの知識が必要です。 運用を考えると、Googleフォー... -
JavaScript
11 スクロールして表示されたタイミングでアニメーションを動かす方法
Webページを閲覧しているときに、スクロールしていてビューポート内に要素が入ったらアニメーションが動き始める、というケースは沢山見かけると思います。そのように動かす方法をここで学んでいきましょう。 CSSだけでスクロール検知してアニメーションさ... -
JavaScript
10 プラグインを使って機能を組み込む(画像のポップアップとスライドショー)
プラグインとは プラグインとは、機能を拡張するために追加できるソフトウェアのことです。Web制作においては、「プラグイン」「ライブラリ」のような呼び方で、ページに機能を組み込むことができます。 このページでは、3つの機能(計4つのパターン)の実... -
CSS
9 リンクの設定と、CSSアニメーションの実装方法
Webページに動きをつける理由を考えよう Webページに動きがあると、見る人への様々な効果があります。 視線の誘導 動きがあるとそこへ視線が移りやすいので、目立たせたい・見てほしい要素の近くに動きをつけることが多いです。また、次にどうしてほしいの... -
CSS
8 CSSでレイアウトを組む
レイアウトでよくあるケースについて、説明します。 要素の横幅、高さの設定について width, height 要素の高さは、ほとんどのケースで設定しません。横幅はほとんどの場合、%指定を行います。(ごく小さい要素の場合は、px指定する場合があります) レス... -
CSS
7 レスポンシブデザインの考え方と、実装方法
デバイスの幅に応じて表示を変えるための基本設定 headタグ内に、以下のように記載しましょう。この記載がないと、レスポンシブ対応されません。VS Codeでは、Emmetで! にて表示されるテンプレートに予めセットされています。 <meta name="viewport" co... -
CSS
6 CSSで色、幅、余白、線、背景、文字のスタイルを設定する
CSSファイルをHTMLへ組み込む CSSをHTMLに組み込む方法は、いくつかあります。通常は、CSSファイルのパスをlinkタグでheadタグの中に書きます。 フォルダーから読み込む(相対パス指定) HTMLから見たCSSのファイルパスを書きます。以下は、相対パスによる... -
VS Code
参考情報いろいろ
HTMLの整形に関する設定は、以下を参照。https://learn.frog-eight.info/syntax-check/#index_id3 VS Codeの拡張機能 沢山ありますが、必要最低限のもの、あると便利なものを紹介します。 W3C Web Validator識別子 celianriboulet.webvalidatorHTMLの構文... -
HTML
5 HTMLマークアップの進め方
マークアップ準備 実際にデザインを見ながらマークアップするとき、慣れないうちはデザインを印刷するか、白い紙に手書きで「セクションに分ける」枠を書き込みます。 それぞれの要素に対して、どの種類のタグを付与するか、これも書き込みます。 慣れてき... -
HTML
4 代表的なHTMLタグを理解しよう
HTMLのタグの種類は多いですが、今回は必要最低限(=必ず使うもの)について説明します。タグの記述サンプルと、表示サンプルを参考に、マスターしましょう。 レイアウト用のタグ ページは、セクションに分けてマークアップすることが基本です。また、文...
12