複数の場所にスムーススクロールで移動させたい場合 以下の指定でa要素のhref属性の頭に#がついている場合という設定が出来ます。しかしこのままでは全てのa要素が対象になってしまうため、a要素にクラスを付けて対象を限定しましょう。 $('a[href^="#"]')対…
Webサイト上で新着情報や更新頻度の高い情報を表示させたい時には、TwitterやFacebookなど既存のSNSのプラグインを使うのが非常に便利です。SNSのプラグインを使用すれば、わざわざHTML内のデータを触る事無く、SNSに記事を投稿するだけでWebサイト内の情報…
プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>
Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…
属性とは各要素に付属している情報です。 img要素であればsrcやalt、a要素であればhrefなどです。もちろんidやclassも属性の一つです。 jqueryでは「attr」メソッドを使う事で任要素の属性に対して値を設定／取得するする事が出来ます。 img要素のalt属性を…
jQuery（ジェイクエリー）とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…
<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> <header> </header></body></html>
ベクター形式のロゴデータであれば、文字などを自由に編集できるので、場合によってはフリー素材などを使って編集してみましょう。 photoshopvip.net blog.spoongraphics.co.uk
最近、よく見かける「１枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー（Hero Header）とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…
今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。 まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 768px～959px スマートフォンサイズ 767px以…
www.ditjapan.com sankoudesign.com html5ではvideoタグを使うことで簡単にページに動画データを埋め込む事が出来ますが、スマートフォンで見た場合にはiOSとandroidで対応している物、していない物が違うので注意が必要です。場合によっては以前のように「P…
GoogleMapの挿入 GoogleFontsの挿入 FontAwesomeの使用 fontawesome.com fonts.google.com <html lang="ja"> <head> <meta charset="UTF-8"> <title>レスポンシブサイトの作成</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></head></html>
Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。１種類のバナーに対し様々なサイズを用意する場合も…
index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>モバイルファーストの復習</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <nav class="g-nav"> <ul> <li><a href="#">ボタン1</a></li> <li><a href="#">ボタン2</a></li></ul></nav></header></body></html>
CSS（Cascading Style Sheets） CSSとは、HTMLの要素をどのように修飾（表示）するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…
Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…
PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター（PC）は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…
まず最初にパソコンで覚える事はファイルとフォルダーの作成、及び使い方です。 PCを使って働くのであれば、この記事の内容は必ず理解しなければいけない事です。とにかく読んで、意味の解らない箇所や語句を書き出してみましょう。 次に解らない箇所・語句…
今回の制作のポイント メインビジュアルはヒーローヘッダーでbxsliderを使ってフェードで見せる お知らせ部分はajaxを使って外部データを読み込む Movie部分にmp4データを設置 Menu部分にモーダルウィンドを設置（jQuery） Access部分にGoogleMapを設置 Form…
Webサイトの構成を明確にする為に必ず、Webサイト構成表を作成しましょう。 「サイト全体で何ページになるか？」「どのページにどんな内容のコンテツを入れるか？」「どういう順番でコンテンツを並べたら、ユーザーが見やすい・解りやすいか？」 などは、必…
www.sikaku.gr.jp http://school.yachin29.com/web-ex/start.html UIデザインが勉強出来るUIデザインクイズサイト「can't unsee」 cantunsee.space
授業も残り3週間になりました。残りの期間はとにかく今まで授業でインプットして来た物をポートフォリオという形でアウトプットしていきます。 けれど、ただ漠然とポートフォリオを作るというのも難しいので、目標となる物（入りたい会社や仕事でやりたい事…
「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみま…
フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 ゴール フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう URL:http://www.felica.info/kikin/web/web_form/index.shtml ポイント ユーザ…
ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…
ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。 各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします…
SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…
Illustratorの様々な機能を使用すればインパクトのある企画書を作成する事が出来ます。サイト制作のスケジュールにある程度余裕がある人はIllustratorで企画書の清書をしてみましょう。 さらに、完成後就活時を想定してPDF化してメール等で送れるようにして…
READMEというのは、GitHub等で公開されるソフトウェア（リポジトリ）の説明書きのことです。 そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。 readmeに記載する物 プロジェクトのタイトル プロジェクトの概要説明 プロジェクトのUR…
今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 www.bloomingville.com 今回のレイアウトのポイント 最大幅を指定したグリッドレイアウト cssはモバイルサイズから指定（モバイルファースト…