2024-07-01から1ヶ月間の記事一覧

thanks.htmlにリダイレクトさせる

//thanks.htmlへのリダイレクト let load = 0; $('#google-form').on('load', function(){ load++; if (load > 1) { window.location.href = "thanks.html"; // リダイレクトさせるファイルのパスを入れる } }); このコードは、`#google-form`というIDを持つ…

背景画像をcssアニメーションで動かす「VEGAS2」

vegas.jaysalvat.com 画像を背景画像にする事でcssアニメーションが手軽にかけてるようになるスライド用プラグインです。bxsliderのようなシンプルなスライドとは違って、様々なアニメーションを掛けることが可能です。 関数の呼び出し $("#example, body").…

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。初心者にとって配色は難しい部分ですが、まずは既存のサイトやサー…

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

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

スクロールイベントの設定

scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 $(window).scroll(function() { var a=$('html,body').scrollTop(); console.log(a); }); scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした…

css animation-timing-functionの違い

animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。cssのkeyframe animation には非常に多くのtiming-functionが用意されています。ちなみにjQueryでデフォルトで使えるのは2種類です。それぞれのanimation-timing-functio…

Figmaとは

Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。 Figma の特徴 ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。リア…

サイト制作のワークフロー

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

background-attachmentを使ってパララックスを作成する

background-attachmentをfixedにすると簡単にパララックス(視差効果)を使ったスクロールが実装出来ます。ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為(ベンダープレフィックスを付けてもダメ)、iOSでは別…

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

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

プラグインを使ってハンバーガーメニューを作る

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <button class="hamburger " type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button>

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…

タッチアイコンの設定方法(2024年版)

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。なので、スマートフォンサイトを制作する場合には必ずスマートフ…

ifとforを使って3連ガチャを作る

今まで習ったjavascriptで3連ガチャを作りましょう。 使う機能 function関数 配列 for文 if文 配列に値を追加する fruits = ['apple', 'orange', 'banana']; fruits.push('strawberry'); ガチャのカテゴリー、本数、確率を決め、変数に代入 画像をダウンロー…

コンテンツをLLMを使って作成する

bard.google.com Google Bard は、Google AI の大規模な言語モデル(LLM)であり、テキストとコードの大規模なデータセットでトレーニングされています。テキストの生成、言語の翻訳、さまざまな種類のクリエイティブコンテンツの作成、質問への有益な回答を…

7月5日の作業データ(net smart)

index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Net Smart</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <…</link></link></meta></meta></head></html>

レスポンシブデザインの作成

採点ポイント cssは外部参照で、リセットと文字コードを設定する事 fontawesomeからsvgアイコンをダウンロードし、使用すること ナビゲーションボタンに境界線とホバーの適切な設定をする flexプロパティを使ってコンテンツを均等に並べる h1にGoogle Fonts…

cssリセットについて(2024年版)

CSSリセットとは、デフォルトでブラウザに付いているスタイルを打ち消す(リセットする)CSSのことです。すべてのブラウザには、すべてのWebページに適用される「user agent stylesheet」と呼ばれるデフォルトのスタイルが付属しています。 CSSリセットはブ…

columns を使ってPinterest風のカラムレイアウトの作成

columns を使ってピンタレスト風のカラムレイアウトの作成このカラムレイアウトの一番のメリットは画像をすべて同じ大きさにトリミングする必要が無いことです。 www.pinterest.jp columns: ;; break-inside: avoid; ボックス途中でのカラムの区切り方法を指…

cssのクラス命名規則

小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…

for文の使い方

for文は繰り返し(ループ)処理です。 for ( 変数iの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 記述例 <script> for (var i = 1 ; i <= 100 ; i++) { console.log( i ); } /* for ( 変数の初期値; 繰り返し条件; 変数の変更(最後は;がいらない) ) { </script>…

Dateオブジェクトで時間の取得

「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> var date = new Date(); document.write(date); </script> 実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。このままでは使いづらいので「 new …