2024-07-01から1ヶ月間の記事一覧
//thanks.htmlへのリダイレクト let load = 0; $('#google-form').on('load', function(){ load++; if (load > 1) { window.location.href = "thanks.html"; // リダイレクトさせるファイルのパスを入れる } }); このコードは、`#google-form`というIDを持つ…
vegas.jaysalvat.com 画像を背景画像にする事でcssアニメーションが手軽にかけてるようになるスライド用プラグインです。bxsliderのようなシンプルなスライドとは違って、様々なアニメーションを掛けることが可能です。 関数の呼び出し $("#example, body").…
webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。初心者にとって配色は難しい部分ですが、まずは既存のサイトやサー…
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 $(window).scroll(function() { var a=$('html,body').scrollTop(); console.log(a); }); scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロールした…
animation-timing-functionとは、アニメーションの変化(速度)のスタイルを指定します。cssのkeyframe animation には非常に多くのtiming-functionが用意されています。ちなみにjQueryでデフォルトで使えるのは2種類です。それぞれのanimation-timing-functio…
Figmaとは、ブラウザ上で動作するUI/UXデザインツールです。2016年にリリースされて以降、その使いやすさや豊富な機能から、多くのデザイナーに愛用されています。 Figma の特徴 ブラウザ上で動作する: インストール不要で、どこからでも作業可能です。リア…
webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
background-attachmentをfixedにすると簡単にパララックス（視差効果）を使ったスクロールが実装出来ます。ただ、iOSはどういった理由か、この「background-attachment:fixed;」を頑なに対応させない為（ベンダープレフィックスを付けてもダメ）、iOSでは別…
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（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…
スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。なので、スマートフォンサイトを制作する場合には必ずスマートフ…
今まで習ったjavascriptで3連ガチャを作りましょう。 使う機能 function関数 配列 for文 if文 配列に値を追加する fruits = ['apple', 'orange', 'banana']; fruits.push('strawberry'); ガチャのカテゴリー、本数、確率を決め、変数に代入 画像をダウンロー…
bard.google.com Google Bard は、Google AI の大規模な言語モデル（LLM）であり、テキストとコードの大規模なデータセットでトレーニングされています。テキストの生成、言語の翻訳、さまざまな種類のクリエイティブコンテンツの作成、質問への有益な回答を…
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リセットとは、デフォルトでブラウザに付いているスタイルを打ち消す（リセットする）CSSのことです。すべてのブラウザには、すべてのWebページに適用される「user agent stylesheet」と呼ばれるデフォルトのスタイルが付属しています。 CSSリセットはブ…
columns を使ってピンタレスト風のカラムレイアウトの作成このカラムレイアウトの一番のメリットは画像をすべて同じ大きさにトリミングする必要が無いことです。 www.pinterest.jp columns: ;; break-inside: avoid; ボックス途中でのカラムの区切り方法を指…
小・中規模でのサイト制作では、それほど明確なcss設計をしなくても問題は起こりませんが、大規模案件になるとhtmlもcssもかなりの量になり、css設計がないと保守性が悪くなってしまったり、意図しないところに影響してしまったりします。また、複数人で制作…
for文は繰り返し（ループ）処理です。 for ( 変数ｉの初期値 ; 繰り返し条件 ; 変数の変更 ) { 処理の結果 } 記述例 <script> for (var i = 1 ; i <= 100 ; i++) { console.log( i ); } /* for ( 変数の初期値； 繰り返し条件； 変数の変更(最後は;がいらない) ) { </script>…
「 new Date()」を使う事で、現在の時間を取得することが出来ます。 <script> var date = new Date(); document.write(date); </script> 実際に表示してみると「 new Date()」には日時についての様々なデータが収納されているのが解ります。このままでは使いづらいので「 new …
