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

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

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

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

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時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金と…

jQuery演習問題

どこまでjQueryで命令して、どこからCSSで指定するか、絶対的な決まりがあるわけではないですが、今の段階では色々なパターンを覚える事が大事です。 【問01】300pxの色違いの2の正方形を、それぞれ「表示1」ボタン、「表示2」ボタンを押したらブラウザー…

縦書きと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時間を超える講座を無料で受講出来、プロになるために必要なスキルを身につける事が出来ます。また、職業訓練受講給付金と…

各OSベンダーのデザインガイドライン

各OSベンダーのデザインガイドラインを知る webサイトを「ユーザーが使う製品」として考えるならば、その製品に伴うデザインやカラースキームは個人の思いつきや突然のヒラメキで作るものでは無く、ある種のガイドラインに沿った物であるべき、という考え方…

webライティングの練習

ー宿題ー 以下の内容を読み、メールで提出 インターネットについてなるべく 200 文字に近い文字数で記述して下さい。(200 文字を越えてはいけません) *キーワードは必ず文章内で使用して下さい。 *書き出し例文を参考にして文章を書いてください。書き出…

コーディング課題

下の見本を参考にコーディングしてみましょう。 細かいマージン・パディングの値は適宜。 使用する画像 http://yachin29.webcrow.jp/pasta-yajima/pasta-img.zip 使用するテキスト(※alt内のテキストは適宜) パスタとワインの店 atella concept pasta drink…

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

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

フルスクリーンレイアウト その1

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。 自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れて…

グリッドレイアウト

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

サイト制作のワークフロー

webサイト制作におけるワークフローの一例 ヒアリング クライアントとのヒアリングの時点で、方向性やサイトの目的、そしてサイトに盛り込むコンテンツなどを明確にします。また、その事をクライアントとしっかりと共有する事が大事です。その為にはしっかり…

ブロックレベル要素とインライン要素

HTMLには色々な要素(h1とかp)がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。 この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じて…

1カラムレイアウトの演習

使用するテキスト ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー Net Smartよりスマートなインターネットライフを。Conceptすべてのインターネットユーザーに快適でよりスマートさを。ネットスマートはデジタルのチカラを持って、皆様とそ…

CSSスプライト

CSSスプライトとは複数の画像を1つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。 メリット 画像の読み込みが1回で済むので、サイトの読み込み速度が速くなる デメリット サイズやデザインの更…