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

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

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

作業効率が劇的に上がる! ショートカットキー早見表

作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。 ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣…

Photoshopによる画像制作

素材をダウンロード http://yachin29.com/photoshop2.zip header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 バナー制作の参考サイト ディレクターなら知っておきたい「バナー広告制作の基礎知識」 : …

GitHubとSourceTreeの導入

Git

Gitとは? Git(ギット)とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか?」や「リリース予定の機…

Positionを使ったレイアウト

見本 素材のダウンロード先 http://yachin29.com/photoshop/position.zip index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Patisserie camellia</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="container"> <header> <h1>Patisserie camellia</h1> <ul> <li id="info">…</li></ul></header></div></body></html>

バナーの制作

Webデザイナーとして任される最初の仕事として代表的なものがバナー広告の制作です。 バナーのサイズ 広告の場合、ある程度はサイズに規定があります。仕事の場合大抵クライアントの方から指定があります。1種類のバナーに対し様々なサイズを用意する場合も…

Positionレイアウト

練習素材 <html lang="ja"><head><meta charset="utf-8"><title>positionとfloatを使ったレイアウト</title><style>html,body,h1,p { margin:0; padding:0;}img { vertical-align:bottom;}body { background:#979797;}header { width:800px; height:120px; margin:100px auto 0; background:#FFFFFF; position:relative;}h…</meta></head></html>

Google画像検索風のjQuery

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応) Googleで画像検索した際に表示される、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくるやつです。一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処…

header部分の制作

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

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

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

SEOに適した無限スクロールの制作

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

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

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

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

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

ウィンドウサイズによって画像を切り替える

レスポンシブサイトでは基本的に画像は可変に設定するべきですが、幅が960pxの時と幅が320pxの時とで同じ画像で良いか、というと必ずしもそうではありません。例えば画像に文章が乗っている場合であれば、なおさらです。 backgroundプロパティであればメディ…

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

ドロワーメニュー

/* ハンバーガーメニュー ---------------------------------------------------------- */ #globalHeader nav { float: right; } #globalHeader nav p#menuToggle { background: -webkit-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%);/*古い…

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

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

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

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

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

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

スマートフォン専用サイトの制作・シンプル版の詳細ページの作成

詳細ページの作成 詳細ページのイメージ トップページ(index.html) <html lang="ja"> <head> <meta charset="utf-8"> <title>スマートフォン専用サイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no, email=no"> </meta></meta></meta></head></html>

.htaccessの作成

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

スマートフォン専用サイトの制作・シンプル版

スマートフォン専用サイトの制作。まずは動きの少ないシンプルなレイアウトのスマートフォン専用サイトを制作します。 スマートフォン専用サイトなので、HTML5とCSS3を積極的に使います。 画像素材 トップページ <html lang="ja"> <head> <meta charset="utf-8"> <title>スマートフォン専用サイト</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></head></html>

今のトレンドを知る

物を作る上で、必ずしもその時々のトレンドを盲目的に取り入れれば万事OKという訳でないですが、選択肢の1つとして知っておく事はとても大事です。 特にポートフォリオなどに「ツカミ」として、最新のトレンドを取り入れる事で、面接などでアピール出来るの…

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

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

カフェサイトの作成

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

レスポンシブレイアウトの復習

前回のレスポンシブ演習で分からない箇所があった人はもう一度こちらの課題をやってみて下さい。http://yachin29.webcrow.jp/test_05.zip

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。 この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに…

Unknown collation: 'utf8mb4_unicode_ci' のエラーの原因

WordPressを仮想サーバーからレンタルサーバー等にデータ移行(デプロイ)する際に Unknown collation: 'utf8mb4_unicode_ci というエラーが出る事があります。 これは仮想サーバーよりレンタルサーバーのデータベースのバージョンが低い場合に出る事があり…

WordpressをXAMPPからサーバーにデプロイする

授業ではXAMPP環境でWordPressの制作を進めましたが、ポートフォリオ等に載せる為にはWordPressのデータを別サーバーに移行する必要があります。 データ移行用のプラグインなどもありますが、ここでは手作業でデータの移行を行います。 旧WordPressサイト(XA…

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

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

東京のダンス公演で活躍中の振付やダンスレッスン講師も行うモダンジャズダンサーJURI

東京のダンス公演で活躍中のモダンジャズダンサー 振付 ダンス講師 JURI 東京のダンス公演を中心に活躍中のモダンジャズダンサーです。モダンダンス、ジャズダンス、コンテンポラリーダンスでのダンス公演出演、振付を行っています。DANCE STUDIO FIRST渋谷…

アイシングクッキーのオーダーメイド 結婚式やイベント用はプティシュシュ

アイシングクッキーのオーダーメイド 結婚式やイベント用はプティシュシュ。 アイシングクッキーのオーダーメイド スイーツギフトpetit chou chou(プティシュシュ)。結婚式用の席札やプチギフト、出産祝いやお誕生日などのイベントに最適です。アイシング…

動きのあるバナー

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

スマートフォンサイトの特性を知る

スマートフォンサイトの特徴 カラムのリキッドデザインが基本 縦位置と横位置の両方を考慮する 画面サイズとページ容量を考慮する 情報量、ページの長さ、遷移のバランスを考慮する HTML5+CSS3で制作する Flashは使用しない スマートフォンサイト制作 よくあ…

既存サイトのトレース|全面レイアウト1

今回トレースするサイトは非常にシンプルで今時な感じがする全画面を使ったグリッドデザインで出来たサイトです。 今の段階で細かい部分の作りをするのは少し難しいので、まずはワイヤーフレームのようにレイアウトのみにしぼって作っていきましょう。www.bl…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.br SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形…

CSS3によるアニメーション・animation

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

PHPでの日付や時間を取得

PHP

基本的にはJavascriptと同じですが、PHP独自のフォーマットをしっかりと覚えましょう。 1、「どのような形式で」を指定できる関数:date関数(フォーマット文字列) 2、「いつの日付を」を指定できる関数:mktime関数(タイムスタンプ) timezoneの設定 本…

PHPの演習問題

PHP

問1 現在の年月日・時刻をPHPで記述し、ブラウザに表示させなさい 問2 数字「1」から「10」までの数字を、ブラウザにランダムに表示させなさい 問3 九九の表をPHPで繰り返し文で記述し、ブラウザに表示させなさい 問4 「input.php」に「名前」と「年…

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

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

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

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

ハンバーガーメニューの実装

<html lang="ja"> <head> <meta charset="utf-8"> <title>スクロールすると固定になるナビ</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/nav.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="nav2.js">…</link></meta></meta></head></html>

PHP フォームの復習

PHP

以下のような入力フォームと確認画面を作りなさい。・お名前は必須項目 ・興味がある科目は複数選択可 ・生まれ年は1945年~2000年までの設定入力画面 確認画面

PHPでの配列

PHP

配列はJavascriptでも出て来ましたが、まずは配列の特性を復習しましょう。 通常、変数は1つの値しか入れる事が出来ず、新しい値を入れると上書きされてしまいます。一方、配列ではひとつの箱に複数の値を入れることができます。データベースと連動させる事…

GETとPOSTの違いと使い分け

PHP

PHPでは情報を別のデータに受け渡すときにGETとPOSTの2つの方法(メソッド)が使われます。 GET GETメソッドはURLの末尾に「?」をつけ、「パラメーター名="値"」という形式でデータを送ります。 そのせいで、URLにデータが表示されてしまい、誰からでも見る…

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

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

Googleフォームに自動返信機能を付ける

Googleフォームに自動返信機能を付ける 以前作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。 自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、…

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

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

webサイトにGoogleAPIを導入する

Googleが提供しているGoogleAPIを使うことで簡単に様々な便利な機能をwebサイトに導入する事が出来ます。 Webサイトにスケジュール表やメールフォームを追加したい場合、PHPで作成する事が可能ですが、「Googleカレンダー」と「Googleフォーム」を使うのも選…

Automatorを使ってフォルダに画像の自動圧縮機能をつける

授業でも幾度となく出てきた「TinyPng」 画像のデータ量を半分以上軽くしてくれ、なおかつ画像の質もそこそこ保ってくれる、という便利なサービスで、画像を高解像度に対応させるためにはもはや必須と言っても良いくらいです。 このTinyPNG、実は中で動いて…

transformプロパティ

CSS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。 transformプロパティでは 移動(translate) 縮尺(scale) 回転(rotate) 傾斜(skew) 遠近効果(perspective) の5つの動きがありますが、このうち移動、縮尺…