webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
スニペットとは スニペットとは、一般的には「切れ端」「断片」という意味の英語である。 IT用語としては、プログラミング言語の中で簡単に切り貼りして再利用できる部分のこと。 VS Codeでスニペットを登録 よく使うスニペットをVS Codeに登録しましょう。V…
CLI（コマンドラインインターフェース）と、GUI（グラフィカルユーザーインターフェース）はどちらもインターフェースの略称になります。 インターフェイス 「インターフェイス（Interface）」とは、日本語に直訳すると「境界面」や「接点」などの意味を持っ…
通常、html+css+jQueryで作成するページを静的（static）なページといい、PHPなどサーバーと常にやりとりをしながら作成するページを動的（dynamic）ページといいます。 動的（dynamic）ページとは 動的（dynamic）ページとは、簡単に言うとユーザー毎に表示…
Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」 などは、必…
jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。 jQueryを適切に記述する事である程度の改善は出来るの…
配色には色々なルールがありますが、まずはこの3つを覚えましょう 1、コントラスに気を付ける 2、色数を抑える 3、トーンを合わせる HSBを使った配色 photoshopではRGB以外にもHSBやLabといった数値でも色の調整が出来ます。特にHSBは配色時によく使うので是…
ワイヤーフレームとは「サイトの設計図」です。 サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…
採点ポイント cssは外部参照で、リセットと文字コードを設定する事 fontawesomeからsvgアイコンをダウンロードし、使用すること ナビゲーションボタンに境界線とホバーの適切な設定をする flexプロパティを使ってコンテンツを均等に並べる h1にGoogle Fonts…
vegas.jaysalvat.com 画像を背景画像にする事でcssアニメーションが手軽にかけてるようになるスライド用プラグインです。 bxsliderのようなシンプルなスライドとは違って、様々なアニメーションを掛けることが可能です。 関数の呼び出し $("#example, body")…
ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。 各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします…
スクロールに合わせて「Fade」「Flip」「slide」「Zoom」の4種類のアニメーションを簡単に実装出来、「duration」などの細かい設定も行えるスクロールアニメーションのプラグインAOSを実装してみましょう。michalsnik.github.io index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>AOSを実装し</title></meta></head></html>…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイト制作｜トップページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
//thanks.htmlへのリダイレクト let load = 0; $('#google-form').on('load', function(){ load++; if (load > 1) { window.location.href = "thanks.html"; // リダイレクトさせるファイルのパスを入れる } });
スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイト制作｜トップページ</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></head></html>
CSSリセットとは、デフォルトでブラウザに付いているスタイルを打ち消す（リセットする）CSSのことです。 すべてのブラウザには、すべてのWebページに適用される「user agent stylesheet」と呼ばれるデフォルトのスタイルが付属しています。CSSリセットはブ…
bard.google.comGoogle Bard は、Google AI の大規模な言語モデル（LLM）であり、テキストとコードの大規模なデータセットでトレーニングされています。テキストの生成、言語の翻訳、さまざまな種類のクリエイティブコンテンツの作成、質問への有益な回答を…
モーダルウィンドウ（英: Modal window）は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、…
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 $(window).scroll(function() { var a=$('html,body').scrollTop(); console.log(a); }); scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした…
画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという２つの「マスク機能」があります。この２つのマスク機能を使い分ける…
webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…
HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…
プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…
今まで習ったjavascriptで3連ガチャを作りましょう。使う機能 function関数 配列 for文 if文 配列に値を追加する fruits = ['apple', 'orange', 'banana']; fruits.push('strawberry'); ガチャのカテゴリー、本数、確率を決め、変数に代入 画像をダウンロー…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>新春お御籤</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } img{ vertical-align: bottom; max-width: 100%; } h1{ text-align: center; fo…</meta></meta></head></html>
JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round()は、小数点…
