読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

header部分の制作

以前、既存のサイトをモデルにしてレスポンシブサイトを制作し、jQueryのプラグインを使いトップにスライダーを導入しましたが、モデルサイトに最も近い形のスライドショーを導入したパターンが今回のやつです。 今回のスライドショーの主なポイントブラウザ…

レスポンシブサイトのナビボタンを画像で作る

前回の授業で作ったギャラリー部分とスライダーにナビゲーションを追加します。 レスポンシブサイトのナビゲーションを画像で作る場合、レスポンシブを加味した画像作りを心がけましょう。 また、今回のナビゲーションボタンの画像はCSSスプライトで作ります…

モバイルファーストを意識したレスポンシブデザインサイトの制作 4

ここまでで、PC時のレイアウトも含めほぼ完成ですが、今のままだとPC時にもjQueryのアコーディオンパネルが動いてしまうので、if文でウィンドウサイズがスマホサイズの時のみに動くように条件分岐をしてみましょう。 また、スマホの機種によっては、「touchs…

モバイルファーストを意識したレスポンシブデザインサイトの制作 3

レスポンシブサイトのタブレット・PCレイアウトを完成させます。 作例http://yachin29.webcrow.jp/sp-pc/ タブレット・PCレイアウトを完成させる為に行うことHTMLにタブレット・PC専用のコンテンツを挿入する。 ブレイクポイントを指定し、タブレット・PC用…

メガドロップダウンメニューの導入

最後にPC用のナビにメガドロップダウンメニューを入れます 最近よく見かけるメガドロップダウンメニュー。特にコーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならな…

既存サイトのトレース ニュースリリース部分

PCレイアウト タブレット(959px〜641px) スマホ時(640px以下) このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良…

モバイルファーストを意識したレスポンシブデザインサイトの制作

モバイルファースト モバイルファーストとは、Webサイトやソフトウェアの開発・運営方針の一つで、スマートフォンなどの携帯端末向けの版をパソコン向けなどより先に、あるいは同時に公開すること。また、サイトやソフトの機能や表示、操作方法を設計する際…

.htaccessの作成

「.htaccessファイル」を使った自動振り分け スマートフォン利用者を自動的に「スマートフォン版サイト」へ誘導できるよう、「アクセス者の端末に応じて自動でアクセス先を振り分ける機能」を作ってみましょう。この授業では「.htaccessファイル」を使って、…

既存サイトのトレース キリン編

以前も言ったように既存のサイトをトレースする事は、非常に勉強になるので、積極的にやって行きましょう。 今回はキリンのサイトをトレースします。 こういったコンテンツの多いコーポレートサイトは細かい箇所の処理が多く、PCで見せる物とSPで見せる物を…

カフェサイトの作成

参考サイトhttp://racines-park.com/

フルスクリーンレイアウトのレスポンシブデザイン

スマホレイアウト 今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像…

ローディング中にアニメーション画面を表示させる

liginc.co.jp photoshopvip.net uxmilk.jp 最近は、トップページに全画面サイズの画像や動画を表示させているサイトも珍しくありません。アイキャッチとしては非常に有効ですが、どうしてもデータサイズが大きくなり、表示に時間がかかってしまいます。また…

レスポンシブデザイン グリッドレイアウト

グリッドレイアウトとはグリッドとは「格子状の」という意味がありますが、画面をいくつかのサイズのブロックで組み合わせ、コンテンツを配置していく画面設計手法のひとつです。元々紙媒体でよく使われたレイアウト方法ですが、Webでもレスポンシブデザイン…

高解像度ディスプレイへの対応

Retinaディスプレイ Retinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって解像度は320×480ピクセルから640×960ピクセルに、つまり倍になってい…

Cotorier Cafeのスマホレイアウト

Cotorier CafeのPCレイアウト

各要素のレイアウトが上手くいかない場合は背景色を入れて可視化したり、webデベロッパーツールで要素を可視化出来るようにしましょう。 コーディング例 HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>Cotorier Cafe</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css"> </head> <body> </body></html>

固定カラムレイアウトをフルードグリッドにする

授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。 フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿って配置する「グリッドデザイン(Grid Design)」と、ブラウザーの横幅が変わってもレイア…

レスポンシブデザイン実践1

今までの内容を踏まえて実際にレスポンシブサイトを制作していきましょう。 まずはシンプルな2カラムレイアウトをレスポンシブ化してみましょう。 今回のブレイクポイントは PCサイズ 960px以上 タブレットサイズ 768px~959px スマートフォンサイズ 767px以…

レスポンシブデザイン基礎2

レスポンシブWebデザイン(RWD)の制作 レスポンシブWebデザインでは、あらゆるデバイスに対して単一のWebページ(HTML)を使い、スクリーンサイズ(画面幅)を基準にCSSだけを切り替えてレイアウトを調整します。小さいスクリーンに対しては小さいスクリー…

レスポンシブデザイン基礎1

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

既存サイトのトレース フッター部分とメガドロップダウンメニューの作成

フッター部分の制作 PC時のレイアウト スマホ時のレイアウト <footer> <div class="inner"> <ul> <li><a href="#">商品情報</a></li> <li><a href="#">○○○○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> <ul> <li><a href="#">キャンペーン</a></li> <li><a href="#">○○○○○○○</a></li> <li><a href="#">○○○○○</a></li> </ul> </div></footer>

既存サイトのトレース ニュースリリース部分

前回はdl要素を使いましたが、今回はli要素でマークアップをしていきましょう。 文章構造 <div id="News_area"> <div id="News_release"> <h2 id="News_click">ニュースリリース</h2> <ul id="News_text"> <li><span>2016年9月2日</span><a href="#">[スプリングバレーブルワリー東京(代官山)限定]「秋三昧」を新発売</a></li> <li><span>2016年9月1日</span><a href="#">「のどごし〈生〉」の新CMがスタート</a></li> <li></li></ul></div></div>

モバイルファーストを意識したレスポンシブデザインサイトの制作 2

授業で制作を進めているモバイルファーストを意識したRWDサイト(netsmart)のモバイルサイト部分を完成させましょう。完成例 http://yachin29.webcrow.jp/sp/ 今回組み込むjQuery キービジュアルのスライド(bxslider) タブパネル アコーディオンパネル ウィ…

全面レイアウトのレスポンシブサイト

今までの授業ではカラムレイアウトを中心にレスポンシブデザインサイトの制作をして来ましたが、今回は既存のサイトをモデルにした全面レイアウトでのレスポンシブサイトを作っていきましょう。全面レイアウトの場合、そのような考えで画像をサイズを決めな…

背景画像を使ったフルードグリッド

画像を可変(フルード)にするには、2種類のやり方があります。imgタグで表示している画像にはフルードイメージの設定 img { max-width: 100%; } background-imageの場合、少し注意が必要です。imgの場合、img自身が幅や高さを持っているので、敢えて幅・高…

グリッドレイアウト部分の作成

既存のサイトをトレースし、コーディングをするのは非常に良い勉強になります。 見ているだけでは解らない事も自身で組み直す事で、見えてきたり、理解出来たりする事があります。 開発者の意図や設計思想をしっかりと理解し、コーディングし直す事がこの課…

ハンバーガーメニューにアニメーションを追加する

今回は前回のハンバーガーメニューに、CSS3のアニメーション機能を使って、クリックした際に3本線が✕印に変わるエフェクトを追加します。 CSS3の「 transform: rotate」を使って線を動かします。 3本線の1番上の線と1番下の線を反時計周りに回転させ、✕…

タッチアイコンの設定方法

スマートフォンの場合、PCのようにブラウザーから検索してWebサイトに行くよりも、ホーム画面に登録してあるアプリからワンタッチでWebサイトなりWebサービスを利用するケースがほとんどです。 なので、スマートフォンサイトを制作する場合には必ずスマート…

制作したレスポンシブサイトにjQueryを入れる

前回の授業でfooterを含めて、静的ページでのレスポンシブサイトは完成です。 今回はさらにjQueryを使い動的部分を導入し、ユーザビリティーをさらに高めていく手段を考えて行きましょう。yachin29.hatenablog.com今回取り入れたいjQueryは footer部分をアコ…

カンプを元に制作したPCサイトをレスポンシブにする

前回の授業でPC用に制作したCotorier Cafeサイトをレスポンシブ対応させる yachin29.hatenablog.com PCサイトをレスポンシブにする場合、基本的にはPXで指定した値を%指定にして行きます。ここで注意したいのは幅は%で問題無いですが、高さは%だと不安定にな…

固定カラムレイアウトをフルードグリッドにする

前回の授業で作った固定カラムレイアウトのCSSファイルを書き換えて、フルードグリッドにします。http://yachin29.hatenablog.com/entry/2015/06/12/111647yachin29.hatenablog.com フルードグリッド フルードグリッドは、Webページの要素を罫線や升目に沿っ…

レスポンシブデザイン実践2

今回のパターンはブレイクポイントごとにカラム落ちしていくパターンで、 PCでは3カラム タブレットでは2カラム スマホでは1カラム になるレイアウトです。 このような場合は横幅に今までと同じように固定値を指定出来るので、簡単に作る事が出来ます。PC…

モバイルフレンドリーテストがリニューアル

5月17日、GoogleがWebサイトのモバイルデバイスへの対応をチェックできるツール「モバイルフレンドリーテスト」の新バージョンをリリースしました。使い方はこれまでの「フレンドリーテスト」と同様にサイトのURLを入力するだけで、自動で解析して問題点を教…

レスポンシブデザイン基礎3

複数ファイルでのレスポンシブデザインとviewportの設定 前回の授業で、レスポンシブデザインはメディアクエリーを使って各ブレイクポイントでCSSを切り替えマルチデバイスに対応する。という手法だという事が解ったと思います。 前回のように記述が短い場合…

2カラムをRWDにするー基礎編

以前制作した2カラムレイアウトのデータをレスポンシブ化します。ソースコード <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムをRWDにする</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header></header> <nav></nav> <div id="wrapper"> <div id="content"></div> </div></div></body></html>

スマートフォンサイトのテスター「RWD Tester」

レスポンシブデザインサイトの制作ではスマホサイズでどのように見えているかを確認する為にスマートフォンのエミュレーターが必須です。 この「RWD Tester」は無料で利用できるChromeの機能拡張で、インストールするとツールバーから簡単に利用できます。 …

レスポンシブデザイン模擬試験

見本画像PCレイアウトは960px固定で2カラム。liは130pxで固定。content画像は100%の大きさで使用する。navとfooterの幅は100%。 タブレットはフルードレイアウトで縮小。liは130pxで固定。 スマホはフルードレイアウトで1カラム。li幅は3等分 ブレイクポイン…

要素をグリッド状に配置してくれる「jQuery Masonry」

グリッドに沿って各要素をレンガ状にレイアウト出来る「Masonry」、ウィンドウサイズが変わった際のアニメーションなども含まれていて、初心者の方でも比較的簡単に導入でき、カスタマイズも容易に出来るのでぜひ使ってみましょう。 http://masonry.desandro…

モバイルファーストを意識したレスポンシブデザインサイトの制作 その4

授業で進めていた、モバイルファーストを意識したレスポンシブデザインサイトの制作もいよいよPCレイアウト(960px以上)を整えて終了です。基本的にはタブレットサイズで768pxに指定していた横幅を960pxにすれば完成です。 http://yachin29.com/sp-pc/index…

モバイルファーストを意識したレスポンシブデザインサイトの制作 その3

レスポンシブサイトのタブレット・PCレイアウトを完成させます。 今回のブレイクポイントは PC 960px以上 タブレット 768px~959px スマートフォン 767px以下 タブレット・PCレイアウトを完成させる為に行うこと HTMLにタブレット・PC専用のコンテンツを挿入…

基本的なレスポンシブデザインサイトの制作(固定レイアウト)

レスポンシブデザインの練習では、まずは固定レイアウトの作り方をしっかりと覚えましょう。 今回のブレイクポイントである、 PCレイアウト 960px以上 タブレット 959px~768px スマホ 767px以下を踏まえて、各ブレイクポイント内で最小幅のpxで横幅の指定を…

制作したレスポンシブサイトに動きをつける

制作したRWDサイトのギャラリー部分に動きをつけます。 今回はサムネイルが並んでいるギャラリー部分にjQueryプラグインの「masonry」を導入します。masonry.desandro.com 「masonry」を導入する事で、タブレット・スマホ時のCSSの記述も変更が必要になりま…

レスポンシブデザインの復習

http://yachin29.html.xdomain.jp/test6.zip 1、試験データ(zipファイル)をダウンロードし解凍する 2、新規にフォルダーを作成し、自分の苗字(半角英数字)をつける。 3、完成イメージ(kansei.jpg)を基に以下の様に制作する事。指示の無い箇所は適宜各自で…

レスポンシブデザインの復習

http://yachin29.html.xdomain.jp/test6.zip 1、試験データ(zipファイル)をダウンロードし解凍する 2、新規にフォルダーを作成し、自分の苗字(半角英数字)をつける。 3、完成イメージ(kansei.jpg)を基に以下の様に制作する事。指示の無い箇所は適宜各自で…

メディアクエリーの設定

レスポンシブWebデザインでは、「メディアクエリー」を使って画面幅に応じてCSSを切り替えます。メディアクエリーとは、デバイスの画像解像度・ウィンドウの幅・向きなどの指定条件にあわせて別々のCSSを適用できる機能です。メディアクエリーを使ったCSSの…

制作したサイトに横から出てくるスワイプメニューを加える

先日制作したレスポンシブサイトに今度は横から出てくるスワイプメニューを加えてみましょう。今回はスライドの動きをCSS3の「transition」と「transform」を使い、ボタンでの制御は前回同様jQueryを使います。 http://yachin29.com/kirin/index3.html スラ…

制作したレスポンシブサイトにjQueryドロップメニューを加える

先日制作したレスポンシブサイトにjQueryで動くナビゲーションボタンをつけ加えてみましょう。ボタンをタップすると下に出てくるドロップメニューと 横からスライドして出てくるメニューの2種類をここでは作ってみます。 メニューボタンはスマートフォンサイ…

レスポンシブデザインの制作

http://yachin29.com/kirin/ 用意する画像 ギャラリー部分 378px×378px 1枚 378px×184px 3枚 184px×184px 5枚 スライド部分 980px×400px 3枚の合計12枚 PC用ーボタン画像 タブレット用ーボタン画像 まずはギャラリー部分の作成 (白い隙間はすべて10pxとする…

レスポンシブデザインにおけるブレイクポイントの値

レスポンシブデザインサイトを制作するうえで、ブレイクポイントの設定は必須です。しかし授業でも述べているように、ブレイクポイントの値は今の所これといった決まった値があるわけでは無く、その時々の主要デバイスの大きさによって変化していきます。ま…

レスポンシブデザインの復習

豆はカラダにイイホーム枝豆一覧枝豆隊アクセス 枝豆の栄養素はスゴい枝豆は大豆が未成熟で収穫したものですが、たくさんの栄養がつまっています。枝豆のタンパク質に含まれる成分はアルコールを分解を促します。カリウムも含まれており塩分を体の外に排出す…