webサイト制作の勉強|2022年5月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

cssで作るドロップダウンメニュー

コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。 メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…

課題提出用フォーム

読み込んでいます…

Canvasでパーティクルを表現する

Canvasとは Canvasとは、ブラウザ上に図を描くために策定された仕様です。これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現する…

ワイヤーフレームの参考資料

参考資料 stock.adobe.com

8月2日の作業 srcsetの設定

<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>srcsetとbxslider</title> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

Sassを使ってレスポンシブサイトをコーディングしてみる

素材 https://yachin29.com/school/0815test.zip レスポンシブサイトを作る際にはメディアクエリーが必須ですが、これもSassのmixinを使う事で見通しの良い記述に変える事が出来ます。 またブレイクポイントやメインのカラーコードを変数化する事で効率化が…

Webサイトの構成表の作成

Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか?」「どのページにどんな内容のコンテツを入れるか?」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか?」 などは、必…

google翻訳を使ってサイトを多言語化する

中国語に翻訳したデータ 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

background-attachmentを使ってパララックス風のサイトを作成する

cssの「background-attachment」を使う事で画面をスクロールする際、指定した要素の背景画像をその位置に固定する事が出来、パララックス風のサイトに簡単に出来ます。 例 frankiessportsbar.com 記述としては背景画像を固定したい要素に background-attachm…

.matchMedia()を使ってハンバーガーメニューを作成する

window.matchMedia window.matchMediaというメソッド使用することでCSS側に記述するブレイクポイントの記述と同じような形でJS側の判定条件を記述する事ができます。 例 1000pxまではjsを有効にさせる $(window).on('load resize', function(){ if(window.ma…

jquery-cookie.jsを使ってみる

github.com if($.cookie('access')){ //既にアクセス済みの場合はカーテンを非表示 $('#svg-wrapper').hide(); }else{ //初アクセスの場合はカーテンをfadeOutさせる $('#svg-wrapper').delay(4000).fadeOut(400); } //ファイルがロードされたら $(window).o…

$.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む

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>

7月26日作業データ(モバイルファースト)

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>

動きのあるバナー

バナーのサイズを決める 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合もあるので、色々なサイズに適したレイアウトのパターンを覚えておきましょう。…

SEO概論

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索(自然検索 / Organic Search)とは、…

photoshopでカンプを作成する

カンプとは、広告やwebサイトなどの制作において、制作物の仕上がりを具体的に示すために作られる見本のことである。 「カンプ」の名称は英語名の「comprehensive layout」が省略されたもので、「comprehensive」には「包括的な」「総合的な」といった意味が…

sassを使ってみる

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」の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://web.…</link>

7月15日の制作コード

<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>

フリー素材集

画像編 burst.shopify.com girlydrop.com https://www.pexels.com/ja-jp/ O-DAN (オーダン)- 無料写真素材・フリーフォト検索 stock.adobe.com イラスト編 illust-navi.com www.linustock.com tyoudoii-illust.com loosedrawing.com www.opendoodles.com en…

bxsliderでスマートフォン時にスライド部分をスクロール出来ない場合の解決法

bxslider.com bxsliderではデフォルトでは「touchEnabled」イベントがonになっていて、スマホ時でもスライド画像をスワイプで切り替える事が出来ます。しかし、 これがonになっているとスライド画像を縦にスワイプしても画面がスクロールされないので、オプ…

7月13日の作業データ

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>

TwitterなどのSNSをサイトに埋め込む

Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…

7月12日の作業内容

要件定義 7月12日 レストランサイトの作成ページ構成 シングルページ(レスポンシブ対応)コンテンツ内容 ・メインビジュアル(スライド) ・ナビゲーションをPCからSPまでずっとハンバーガー ・ロゴをsvgデータで作成 ・動画の埋め込み(mp-4とYouTubeの埋め…

配色の基本

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