2-28 headers.netlify.app www.sidethree.co.jp <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>navgationの作成その1</title> </meta></meta></meta></head></html>
2-26 １、プロジェクト概要 今回作成するサイトの概要 ２、クライアント情報 クライアントの情報 クライアントの要望 要望に対する答え ３、サイトのコンテンツ概要 ページ構成 各ページのコンテンツ ターゲットとなるユーザー像（ペルソナ） 入れる機能（ス…
2-26 ページネーション（pagination）とは、日本語でページ割りという意味で、Web制作においては、検索結果一覧など、内容の多いページを複数のWebページに分割し、各ページへのリンクを並べてアクセスしやすくするために設置します。 github.com html <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> </meta></meta></head></html>
2-26 参考資料
2-25 www.kunkalabs.com github.com saruwakakun.com
2-24 index.html （furniture-store） <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>furniture-store</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>
2-24 Photoshopには非常に多くの機能があるので目的から逆算して学習した方がとても効率的です。自身で以下の機能が使えるか確認してみましょう。 Photoshopをゼロから学ぶ人を対象に「これだけできればOK！」という基礎リストをまとめてみました。Photoshop…
2-24 github.com if($.cookie('access')){ //既にアクセス済みの場合はカーテンを非表示 $('#svg-wrapper').hide(); }else{ //初アクセスの場合はカーテンをfadeOutさせる $('#svg-wrapper').delay(4000).fadeOut(400); } //ファイルがロードされたら $(wind…
2-24 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>
2-22 マイクロインタラクション マイクロインタラクションとは、単一のシナリオに基づいてひとつの作業だけをこなす最小単位のインタラクションのことです。 goworkship.com webdesign-trends.net ドローイングアニメーション www.adobe.com Adobe Capture …
2-21 フッター要素などにあるコピーライトの記述。サイトによって色々な書き方がありどう書いて良いか迷う所ですが、そもそもコピーライトの記述は絶対に必要なものでは無く、記述しようがしまいが、日本では著作物は法律でちゃんと守られます。それでも何と…
2-19 WordPressとは wordpressとはヒューストンに住んでいた若者とイギリスに住んでいた若者がインターネットを通じてコラボレーションで開発を進めたオープンソースのプロジェクトです。2003年にリリース。 WordPressとは、オープンソースのブログソフトウ…
2-19 drive.google.com noteに知見を溜めていましたが、9月からPDFに変えました☺️サイトを分析して、まとめて、考察して深ぼっていくのが大好き。もはや趣味。ちょうど30サイトになったので、統合して１つにまとめました！良ければ見てやってください https:…
2-19 SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索（自然検索 / Organic Search）と…
2-18 <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>furniture-store</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <h1>fur…</h1></header></body></html>
2-17 webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。初心者にとって配色は難しい部分ですが、まずは既存のサイト…
2-17 カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。 「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった…
2-15 画像編 burst.shopify.com girlydrop.com stock.adobe.com o-dan.net イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com isometric.online enpitsu-sozai.com https://www.pexels.com/ja-jp/ soco-st.com www.linust…
2-15ワイヤーフレームとは「サイトの設計図」です。サイトを作成する前に「何を・どこに・どのように」画面に配置するかを明らかにする事で、実際の作成作業をスムーズに進める事が出来ます。また複数人で作業する場合やクライアントとデザインイメージを共…
2-15 要件定義とは、Web サイトやアプリケーションなどの開発初期段階において、発注者と受注者の情報共有のために、実装すべき機能や満たずべき性能を第３者でも分かるように明確化しておく作業のことです。要件定義は、Web サイトやアプリ開発において非常…
2-14 <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="stylesheet" href="css/style.css"> </head> <body> <h1>アコーディオンパネルの作成</h1></body></html>
2-14 jQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。jQueryを適切に記述する事である程度の改善は出来…
2-14 bxslider.com bxsliderではデフォルトでは「touchEnabled」イベントがonになっていて、スマホ時でもスライド画像をスワイプで切り替える事が出来ます。しかし、これがonになっているとスライド画像を縦にスワイプしても画面がスクロールされないので、…
2-10 Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」などは、…
2-10 スクロールに合わせて「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>…
2-08 Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。 SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内…
2-08ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net blog.spoongraphics.co.uk
2-05 webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはし…
1-25 scrollイベント 要素がスクロールした時のイベントとして関数を指定できます。 $(window).scroll(function() { var a=$('html,body').scrollTop(); console.log(a); }); scrollTopイベント 「scrollTop()」を使用した場合、要素の最上部から縦スクロー…
1-24 プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
