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

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

web制作

第6回実技テスト 全面レイアウトのレスポンシブサイト制作

以下の指示に沿ってサイトを制作すること。 スマートフォン時にはナビをハンバーガーメニューにすること。 ロゴはSVG化をすること。 タグラインにはgoogle fonts を使用すること。 スムーススクロールを導入すること。 スムーススクロール・ハンバーガーメニ…

スマートフォンサイトの作成

スマートフォン専用サイトの制作。まずは動きの少ないシンプルなレイアウトのスマートフォン専用サイトを制作します。 スマートフォン専用サイトなので、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>

.htaccessの作成

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

Googleフォームを使った自動返信機能付きフォームの作成

Googleフォームに自動返信機能を付ける 以前作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加する。 1 お問い合わせフォームの編集画面に戻り、「ツール」メニューから「スクリプトエディタ...」を選んで…

TwitterやFacebookをwebサイトに埋め込む

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

Faviconの設定

favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したも…

ワイヤーフレームをコーディング

制作したワイヤーフレームを元に実際にコーディングしてみましょう。 今回はレスポンシブは考えずPCのみの固定値でwidthを設定していきましょう。

クライアントとのヒアリング

いよいよサイト制作が始まりました。 サイト制作のワークフローでまず最初にするべき事はクライアントへのヒアリングです。 ヒアリングで1番大事なのはしっかりと意思の疎通が出来ているか、につきます。こちらの状況や目的をしっかりとクライアントに伝え…

コーディング課題

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

Webフォントの使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

サイトを作る際のワークフロー

以下はサイト制作のする際のワークフローのイチ例です。 実際の仕事ではサイトを1人ですべての作業を行う、と言うことは無く、多くの人が制作に関わります。 その際にワークフロー(日程表)が無ければ誰も動く事が出来ません。授業の段階でしっかりとワーク…

複数ページの作り方

最近ではシングルページのサイトもよく見かけますが、ほとんどのサイトは複数ページをリンクさせていくという形でこちらの方が一般的です。 複数ページでサイトを作る際に気をつけないといけないのがフォルダー構成です。以下のようにページ毎にフォルダーを…

webライティング

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