2022-07-01から1ヶ月間の記事一覧
中国語に翻訳したデータtranslate.google.com 自身のサイトのURLを https://translate.google.com/translate?sl=ja&tl=zh-CN&u=http://felica29.starfree.jp/season2020-07/ slにサイトで使用している言語tlに翻訳したい言語uに翻訳したいサイトのURL
cssの「background-attachment」を使う事で画面をスクロールする際、指定した要素の背景画像をその位置に固定する事が出来、パララックス風のサイトに簡単に出来ます。 例frankiessportsbar.com 記述としては背景画像を固定したい要素に background-attachme…
window.matchMedia window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。 例 1000pxまではjsを有効にさせる $(window).on('load resize', function(){ if(window.ma…
github.com if($.cookie('access')){ //既にアクセス済みの場合はカーテンを非表示 $('#svg-wrapper').hide(); }else{ //初アクセスの場合はカーテンをfadeOutさせる $('#svg-wrapper').delay(4000).fadeOut(400); } //ファイルがロードされたら $(window).o…
svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。 <body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> </circle></g></svg></body>
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>北欧のECサイト風ページ</title> <meta name="description" content="家具・インテリアの通販サイトです。北欧風の家具を中心に取り扱っています。"> …</meta></meta></meta></meta></head></html>
<ul> <li><a href="#">Brands</a></li> <li><a href="#">Products</a></li> <li><a href="#">Stores</a></li> <li><a href="#">Catalogs</a></li> <li><a href="#">Styling tips</a></li> <li><a href="#">Partners & Press</a></li> </ul>
バナーのサイズを決める 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。…
SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索（自然検索 / Organic Search）とは、…
カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。 「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味が…
Sassとは？ Sass(Syntactically Awesome Stylesheets）とはcssのメタ言語で、簡単にいうとcssの機能を拡張した高機能版cssといった感じです。 Sassを使うメリット 変数などプログラム的な使い方が可能 メンテナンス性が高い 記述量を減らし、データの圧縮が…
ワイヤーフレームとは「サイトの設計図」です。サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共有す…
webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…
既存サイトのヘッダーをモデルにヘッダー部分を作ってみましょう。 headers.netlify.app SP時のメニューについてwww.sidethree.co.jp
ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします。…
高機能モーダルウィンドウ「Fancybox」のCDNを使ってギャラリーページを作ってみる fancybox CSS <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" /> fancybox JS <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> https://we…</link>
<html lang="ja"> <head> <meta charset="utf-8" <meta name="viewport" content="width=device-width"> <title>Net Smart</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> </link></link></meta></head></html>
bxslider.com bxsliderではデフォルトでは「touchEnabled」イベントがonになっていて、スマホ時でもスライド画像をスワイプで切り替える事が出来ます。しかし、これがonになっているとスライド画像を縦にスワイプしても画面がスクロールされないので、オプシ…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>レストランサイト（仮）</title> <link rel="preconnect" href="https://fonts.googleapis.com"> </link></meta></meta></meta></head></html>
Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。 SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…
要件定義7月12日レストランサイトの作成 ページ構成シングルページ(レスポンシブ対応) コンテンツ内容・メインビジュアル（スライド）・ナビゲーションをPCからSPまでずっとハンバーガー・ロゴをsvgデータで作成・動画の埋め込み（mp-4とYouTubeの埋め込み）…
webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。初心者にとって配色は難しい部分ですが、まずは既存のサイトやサー…
https://school.yachin29.com/tab1/school.yachin29.com
使用テキスト Net Smart よりスマートなインターネットライフを HOME CONCEPT SERVICE ACCESS 必要なものは、 ビジネスの価値を届けるデザインの力。 Net Smartは、ビジネスとユーザーを理解し、 関係性を構築するためのストーリーの設計とUXデザインをご提…
jQuery jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptラ…
一連の処理をひとまとめにして、名前をつけたものを「関数」と呼びます。手間のかかる処理を関数として定義しておけば、必要なときに必要なだけ何度も呼び出すことができます。 関数は、function文を使って定義する。定義した関数を実行するときは、関数名を…
JavaScriptで乱数を取得したい場合には「random関数」を使います。 覚えるメソッド Math.random Math.random()は、0〜0.9999...(1未満)の間から、1つの数値をランダムで返すメソッドです。0は含みますが、1は含みません。 Math.round Math.round()は、小数点…
