WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

複数の場所にスムーススクロールで移動させる

複数の場所にスムーススクロールで移動させたい場合 以下の指定でa要素のhref属性の頭に#がついている場合という設定が出来ます。しかしこのままでは全てのa要素が対象になってしまうため、a要素にクラスを付けて対象を限定しましょう。 $('a[href^="#"]')対…

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

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

cssプラグインを使ってハンバーガーメニューを作る

プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>

Traversingメソッドを使ったタブパネルの作成

Traversingメソッドを利用 Traversingのメリット トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」か…

要素の属性を操作する

属性とは各要素に付属している情報です。 img要素であればsrcやalt、a要素であればhrefなどです。もちろんidやclassも属性の一つです。 jqueryでは「attr」メソッドを使う事で任要素の属性に対して値を設定/取得するする事が出来ます。 img要素のalt属性を…

jQueryとは

jQuery(ジェイクエリー)とは、ウェブブラウザー用のJavaScriptコードをより容易に記述できるようにするために設計された軽量なJavaScriptライブラリである。ジョン・レシグが、2006年1月にリリースした。様々な場面で活用されており、JavaScriptライブラリ…

3月23日のデータ

<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

ヒーローヘッダー

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(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デザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合も…

モバイルファーストの復習

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

CSS(Cascading Style Sheets) CSSとは、HTMLの要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…

Webサイトを見る、知る、そして作る

Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…

道具の使い方を覚える

PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…

パソコンの使い方

まず最初にパソコンで覚える事はファイルとフォルダーの作成、及び使い方です。 PCを使って働くのであれば、この記事の内容は必ず理解しなければいけない事です。とにかく読んで、意味の解らない箇所や語句を書き出してみましょう。 次に解らない箇所・語句…

ヒーローヘッダーを使ったサイト制作

今回の制作のポイント メインビジュアルはヒーローヘッダーでbxsliderを使ってフェードで見せる お知らせ部分はajaxを使って外部データを読み込む Movie部分にmp4データを設置 Menu部分にモーダルウィンドを設置(jQuery) Access部分にGoogleMapを設置 Form…

Webサイトの構成表の作成

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

Webクリエイター能力認定試験 エキスパート サンプル問題をやってみる

www.sikaku.gr.jp http://school.yachin29.com/web-ex/start.html UIデザインが勉強出来るUIデザインクイズサイト「can't unsee」 cantunsee.space

新しいスキルを身に着ける

授業も残り3週間になりました。残りの期間はとにかく今まで授業でインプットして来た物をポートフォリオという形でアウトプットしていきます。 けれど、ただ漠然とポートフォリオを作るというのも難しいので、目標となる物(入りたい会社や仕事でやりたい事…

htaccessを使った動的配信

「.htaccessファイル」を使った動的配信 動的な配信 | Google 検索セントラル | Google Developers スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみま…

LPの作成・実践編

フェリカテクニカルアカデミーwebサイト制作科の生徒募集用のランディングページの作成 ゴール フェリカ公式サイトの見学会申し込みページへのリンクボタンをクリックしてもらう URL:http://www.felica.info/kikin/web/web_form/index.shtml ポイント ユーザ…

LP(ランディングページ)の作成

ランディングページ(Landing Page)とは本来、訪問者が最初に着地する(land)ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを…

スクロール位置に応じてナジゲーションボタンにカレント表示をする

ある程度スクロールする必要がある縦長ページでは現在地を示すようにナジゲーションボタンにカレント表示をした方が良いでしょう。 各要素の「.offset().top」の位置を取得し、if文を使い、各要素の開始位置以上スクロールしたら、その要素にaddClassします…

pushStateとajaxを使ってSEOに強い無限スクロールページを作成する

SEOに適した無限スクロールの導入 FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール(英: Infinite Scrolling)ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富…

Illustratorの様々な機能を使用すればインパクトのある企画書を作成する事が出来ます。サイト制作のスケジュールにある程度余裕がある人はIllustratorで企画書の清書をしてみましょう。 さらに、完成後就活時を想定してPDF化してメール等で送れるようにして…

githubでreadmeファイルを作成する

READMEというのは、GitHub等で公開されるソフトウェア(リポジトリ)の説明書きのことです。 そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。 readmeに記載する物 プロジェクトのタイトル プロジェクトの概要説明 プロジェクトのUR…

既存サイトのトレース|家具のECサイト

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 www.bloomingville.com 今回のレイアウトのポイント 最大幅を指定したグリッドレイアウト cssはモバイルサイズから指定(モバイルファースト…