WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

2020年7月クラス

Googleフォームに自作のCSSを当ててカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトに…

バナーの作成

バナー広告とはディスプレイ広告の1つです。 広告代理店によってバナー広告のサイズは細かく決まっています。ここではGoogleのディスプレイ広告のガイドラインに沿って、モバイル用のバナーを作成してみましょう。 バナー広告の種類 モバイル:代表的なサイ…

シングルページの作成

今回のページに入れるコンテンツ トップにメインビジュアル(スライダーで動かす。object-fitで高さの調整) お知らせ部分をajaxで外部ファイル化 動画(youtubeからデータを持ってくる) ギャラリー部分 SNS Googleカレンダー GoogleMap Googleフォーム(自…

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付けましょう function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------------------------------ // 設定エリアここから //-----------------------------…

スムーススクロールの実装

jQueryのanimate機能を使ってスムーススクロールを実装します。 scrollTop 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした現在位置までのピクセル数を取得します。 { scrollTop: 0 }であればtopから0ピクセルの位置で停止、{ scrollTop:1…

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

jQueryでテキストを切り替える

jQueryでテキストを変更するには「.text()」を使用します。 <script> $(function(){ $('#btn').text('閉じる'); }); </script> </head> <body> <p id="btn">もっと見る</p> </body> flgを使ったスイッチの作成 ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。 ボタンを押すた…

Bxsliderの実装

bxslider.com 必要なファイル jquery.bxslider.css jquery本体(CDN) jquery.bxslider.js <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>bxsliderの実装</title> <style> html,body,h1,ul,li{ margin: 0; padding: 0; } ul{ list-sty…</meta></meta></head></html>

ガントチャートの作成

クライアントワークが本格的に始まります。 ただ、しばらくは授業と平行でクライアントワークの準備を進めて行くため、どうしても厳しいスケジュールになりがちです。 その為、しっかりとしたスケジュール管理が必要となってきます。 まずはガントチャートを…

要素の属性を操作する

属性とは各要素に付属している情報です。 img要素であればsrcやalt、a要素であればhrefなどです。もちろんidやclassも属性の一つです。 jqueryでは「attr」メソッドを使う事で任要素の属性に対して値を設定/取得するする事が出来ます。 img要素のalt属性を…

クライアントへのヒアリング

いよいよサイト制作が始まります。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え、…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1…

レスポンシブサイト演習

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。 まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 768px~959px スマートフォンサイズ 767px以…

webサイト制作におけるワークフロー

webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…

レスポンシブ レイアウトの作成

ポイント レスポンシブサイトに必要なmetaの設定 cssは外部参照で記述し、適切なリセットをかける事 960pxまではPC、959~641pxまではタブレット、640px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを…

レスポンシブデザイン基礎

developers.google.com レスポンシブWebデザイン(RWD)の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに…