WEBサイト制作の勉強

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

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要素を使う方が良…

今のトレンドを知る

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

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

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

カフェサイトの作成

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

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

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

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…

PHPでの日付や時間を取得

PHP

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

PHPの演習問題

PHP

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

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

<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でもレスポンシブデザイン…

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

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

transformプロパティ

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

未経験者のポートフォリオの作り方

未経験者にとってポートフォリオをどうやって作れば良いか? 非常に悩むところです。 http://katoshun.com/blog/からの抜粋です。 未経験者のポートフォリオに載っている作品は、以下のようなものがほとんどです。 スクールの課題で作った架空の会社のサイト…

Cotorier Cafeのスマホレイアウト

冬休みの課題

課題① webライティング 今回のテーマは webの利便性と危険性 以下の記事を読み、今後のwebがどうなるか、自らの考えを述べよ。 死にゆくウェブ、犯人はアプリ-便利さの裏で消える開放性 jp.wsj.com 今回の課題では Counter argument(カウンター・アーギュ…

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>

覚えると便利なnth-child()

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)計算式 n=0: 2*0+1= 1 =…

illustratorでWebサイトのカンプを作る

今回はillustratorでカンプを作ります。 作例 http://yachin29.webcrow.jp/Cotorier/ まずはおおまかなレイアウトを決め、ワイヤーフレームを完成させます。ワイヤーフレームとは、Webページのおおまかなコンテンツ要素やレイアウトを示すものです。 作成す…

ホームシアター壁面収納 オーダー家具|東京木工所

ホームシアター壁面収納 オーダー家具|東京木工所 ホームシアター壁面収納 オーダー家具|東京木工所 魅せる収納で床に物を置くのやめました。 1950年創業 亀戸の小さな木工所 設計、製作、施工、地震対策まで全て行います.tokyo-moccoh.la.coocan.jphttp:/…

練馬 真言宗 慈照院

真言宗 慈照院(じしょういん) 練馬にある真言宗のお寺です。法事、葬儀など仏事を慈照院にご相談ください。人生のお悩みも承っております。 東京練馬区のご供養のお寺、慈照院では人生・仏事・ご供養のご相談を承ります。 http://www.jishouin.jp

フィルター機能とソート機能がついた「MixItUp」

ある程度の数のサムネイルを見せる時にはフィルタリング機能やソート機能を使い、グループ分けしてあげる事がサイトの見易さにつながります。 mixitup.kunkalabs.com <html lang="ja"> <head> <meta charset="utf-8"> <title>MixItUp</title> <link href="style.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </link></meta></head></html>

締め切り間近 2017年1月開講クラス募集中です。

東京池袋のフェリカテクニカルアカデミーでは、只今平成29年1月18日より 開講する「Webサイト制作科」の受講生を募集しています。 600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金と…

縦書きとrubyタグの使い方

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

cssセレクタの指定方法 復習

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。 jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しま…

動画を背景に使う

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。 実例 www.joe-san.com optimo.com www.kalexiko.com poolhouse.co 作る際…

無料の動画ライブラリーサイト

動画ライブラリー 最近は無料の動画ライブラリーも増えてきたので、上手く使いましょう。mazwai.com www.openspc2.org www1.nhk.or.jp www.videezy.com orangehd.com videos.pexels.com

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

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

clickイベントとtransform

以前やったtransform(変形)ではhover時にtransformを使用し、移動、回転、拡大などを行いました。 ただ、hoverでのtransformはマウスを離すと元に戻ってしまうという問題があります。 yachin29.hatenablog.com 今回はhoverでは無く、jQueryのclickイベントを…

jQueryとCSS3を使ったアニメーション

HTML5 × CSS3 × jQueryのハイブリッドアニメーション 最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。jQueryの特徴の1…

平成29年1月18日より 「Webサイト制作科」が開講します。

東京池袋のフェリカテクニカルアカデミーでは、只今平成29年1月18日より 開講する「Webサイト制作科」の受講生を募集しています。 600時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金と…