2020年7月クラス
スニペットを使ってホバーにエフェクトをつけましょう。 photoshopvip.net
ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com BootStrap CDN v…
小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…
今回のページに入れるコンテンツ トップにメインビジュアル（スライダーで動かす。object-fitで高さの調整） お知らせ部分をajaxで外部ファイル化 動画（youtubeからデータを持ってくる） ギャラリー部分 SNS Googleカレンダー GoogleMap Googleフォーム（自…
Googleフォームに自動返信機能を付けましょう function sendMailGoogleForm() { Logger.log('sendMailGoogleForm() debug start'); //------------------------------------------------------------ // 設定エリアここから //-----------------------------…
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
jQueryでテキストを変更するには「.text()」を使用します。 <script> $(function(){ $('#btn').text('閉じる'); }); </script> </head> <body> <p id="btn">もっと見る</p> </body> flgを使ったスイッチの作成 ボタンを押すたびに「もっと見る」と「閉じる」が切り替わるようにjqueryを設定します。 ボタンを押すた…
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属性を…
いよいよサイト制作が始まります。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで１番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え、…
webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
ポイント レスポンシブサイトに必要なmetaの設定 cssは外部参照で記述し、適切なリセットをかける事 960pxまではPC、959~641pxまではタブレット、640px以下はモバイルレイアウトになるようにメディアクエリーを設定する flexプロパティを使ってコンテンツを…
developers.google.com レスポンシブWebデザイン（RWD）の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ（HTML）を使い、スクリーンサイズ（画面幅）を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに…
