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

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

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

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

photoshopの描画モードを使う

描画モードを上手に使う事で、様々な合成が出来るようになります。 各描画モードの特性を覚えて目的にあった描画モードを使い、円滑に合成などの処理を行えるようになりましょう。 psgips.blog24.fc2.com 焼き印のようなロゴを作る ロゴの画像を選択し「フィ…

PHP フォームの復習

PHP

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

PHP フォームにセレクトボックスを追加する

PHP

セレクトボックスもテキストフィールドと同じように、name属性をPOST・GETで送信し、その値を受け取る、という段取りなので追加してみましょう。 <dt>お住いの地域:</dt> <dd> <select name="home"> <option value="北海道">北海道</option> <option value="東北">東北</option> <option value="関東">関東</option> <option value="中部">中部</option> <option value="近畿">近畿</option> <option value="中国・四国">中国・四…</option></select></dd>

var_dump(デバッグ用関数)の使い方

PHP

今まで、変数を出力される際には echo を用いてきました。echoは文字列として値を出力するので、全ての値が「文字列」に変換されて表示されてしまいます。しかし、中には文字列に変換せずにもとの形のままの情報を得たいこともあります。 そこでまずはどうい…

PHPでの日付や時間を取得

PHP

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

PHP 演習問題

PHP

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

SVGのアニメーション

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

PHPでの配列

PHP

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

CSS3によるアニメーション

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

Wordpressとは?

WordPressとは?WordPressとは、オープンソースのブログソフトウェアである。PHPで開発されており、データベース管理システムとしてMySQLを利用している。単なるブログではなくCMSとしてもしばしば利用されている。 WordPressのテンプレートはすべてPHPであ…

全画面レイアウトのRWDサイト

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

dlを可変にする

<html> <head> <meta charset="utf-8"> <title>dlを可変</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="0809.css"> </head> <body> <h2 id="News_click">ニュースリリース</h2> <dl id="News_text"> <dt>2016年8月5日</dt><dd>[スプリングバレーブルワリー東京(代官山)限定]「サワーバケーション」を新発売</dd></dl></body></html>

GETとPOSTの違いと使い分け

PHP

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

PHPでのif文

PHP

if文を使うことで、プログラムの結果を分岐する事が出来ます。例えば 値が〇〇以上であれば、Aルート値が〇〇以下であれば、Bルートというように、ある条件をもとにルートが分岐する事を条件分岐といいます。 if文の書き方 if (条件) { 条件が真であれば実行…

PHPによる式と演算子

PHP

PHPでは複数の変数を使用する場合、「.」で連結して出力させます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>複数の変数</title> </head> <body> </body> </html> 変数の演算 <html lang="ja"> <head> </head></html>

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

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

XAMPPの導入

PHP

PHPとは? HP: Hypertext Preprocessor(ピー・エイチ・ピー ハイパーテキスト プリプロセッサー)とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。一般…

.htaccessの作成

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

bodyの横幅一杯に表示するスライダー 「Responsive FullWide Slider」

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

グリッドレイアウトをフルードグリッドにする

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

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

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

Font Awesomeの使い方

fortawesome.github.io ※OFLライセンス(ライセンス明示すればほぼ自由に Web フォントに利用できます。) 以前、授業でGoogleのwebフォントを使用してみましたが、最近はテキストだけでなくアイコンもwebフォント化されていて、それを使用しているサイトも…

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

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

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

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

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

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

レスポンシブデザインを考えたナビゲーション

前回作ったメニュー部分をPCの時には横並びのメニューが表示されていて、スマホ時にはメニューが隠れている状態で表示されるような作りにしてみましょう。 PCサイト スマホサイト ただ、このままでは色々と問題があり、修正が必要です。どこが問題点かをしっ…

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

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

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

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

Faviconの設定

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