2月29日 1.サイトの概要： スマホに特化した、サブスク型のコーヒー豆のお取り寄せサービスの紹介ページ 2.クライアントの情報 会社名：Coffee Journey タグライン：おうちで楽しむ本格コーヒー体験 サービスの特徴： 全国各地の有名なコーヒー店から厳選し…
Figmaのオートレイアウト機能は、フレーム内の要素を自動的に配置・調整する機能です。これはFigma全体的に言える事ですが、HTMLとCSSでコーディングする事が前提になっていて、このオートレイアウト機能はCSSで言う「Flexbox」です。それ以外にもPositionの…
Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。 Figma の特徴 ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。 リア…
Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が…
mainブランチ メインブランチ。基本的には現在サーバーで運用されているデータ。このブランチに直接コミットはせずに下のdevelopブランチをマージするだけ。 backlog.com developブランチ 開発用メインブランチ。細かい修正がコミットされる featureブランチ…
GitHub Pagesとは、GitHubがユーザーに提供している静的なウェブページのためのウェブホスティングサービスです。GitHubのアカウントがあればすぐに使えるので、gitの基本的な仕組みを覚える為にも使ってみましょう。 html、css、js、画像等、静的なサイトで…
githubを使う時に登録したIDとメールアドレスを削除する場合、「コントロールパネル」→「資格情報マネージャー」→「windows資格情報」の中の「github」関連の情報を削除する
Gitとは？ gitとは、「誰が」、「いつ」、「何を」、編集したかを記録・追跡するためのバージョン管理システムです。 ゲームなどで複数セーブデータを取っておいて、直前のデータ以外にも都合に応じてフラグが立つ前のデータに戻す事が出来る、と同じような…
window.matchMedia window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。 例 1000pxまではjsを有効にさせる $(window).on('load resize', function(){ if(window.ma…
Cookie（クッキー）とは？ Cookie（クッキー）とは、ホームページを訪問した ユーザーの情報を一時的の保存する仕組み、またはそのデータです。ID、パスワード、メールアドレス、訪問回数などが ユーザー情報として保存されます。これによって再訪問したとき…
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システムで、…
