webサイト制作の勉強|2019年10月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

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

レスポンシブデザインとは? レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイア…

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

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

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

演習1 使用するテキスト 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス ふんわりアツアツのオムライスを、きのこたっぷりのドミグラソースでどうぞ。オムレツには新鮮な…

ボタン画像の変遷

グラデーションツールを使う前に、なぜわざわざグラデーションツールを使って色を塗るのかを理解しましょう。 グラデーション=光と影 ディスプレイという平面の世界に、立体感や質感を出すために光の当たっている部分とそうでない部分(影の部分)をグラデ…

第1回実技試験の内容

作例 今回の実技試験の概要 フォルダー名を「自分の名前_test01」として、試験終了後、講師に提出する事 画像は各自で用意し指定されたサイズにトリミングする事 headerの幅960px高さは350px。背景画像に「CAFE de FELICA」の文字を修飾し入れる cssファイル…

Photoshopによるスライスとコーディング

既存のサイトを真似してコーディングしてみるのは、非常に良い練習なので、積極的にやりましょう。ただ、練習に向いているサイトとそうでないサイトがあるので、注意が必要です。 作業手順 1. 既存のサイトのキャプチャーを撮る 2. Photoshopで開き、各画像…

Google keepを使ってお気に入りサイトをキープする

Googleの「Google Keep」は、ホワイトボードに付箋紙を貼っていくような感覚で、手軽にメモやアイディアなどを記録できるメモアプリですが、chromeに拡張機能を入れる事でさらに使い易くなります。この拡張機能を使って、お気に入りのサイトをキープしておき…

2カラム演習問題

ヘッダー要素の幅960px 高さ350px ナブ要素は幅960px高さ50px コンテント要素の幅600px 高さ400px(メインコンテンツ) フッター要素の高さ100px 各要素の空き10px 各要素の背景色は適宜 a要素をホバーした際に背景色と文字色が変わるように設定する

CSS演習問題 回答

<body> style要素 style element HTML文書内にまとめて設定します。 </body> 解答例 <html lang="ja"> <head> <meta charset="utf-8"> <title>演習問題1</title> <style> html,body,h1,h2,p { margin: 0; padding: 0; line-height: 1.0; } body { } h1 { color:#0e8d87; padding: 20px 0; } h2 { background: #355584; color: #FFF…</meta></head></html>

複数ページの制作

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

CSS演習問題

演習1 <body> style要素 style element HTML文書内にまとめて設定します。 </body> 演習2 <body> About wine Chianti Classico Riserva 1435年創業の由緒あるワイン醸造メーカーの名家マッツェイが所有するぶどう園は、いたるところにローマ時代の遺跡が残る小さな集落にあり</body>…

SEO概論

SEOとは、”Search Engine Optimization” の略であり、検索エンジン最適化を意味する言葉です。検索結果でWebサイトがより多く露出されるために行う一連の取り組みのことを指します。 オーガニック検索 オーガニック検索(自然検索 / Organic Search)とは、…

レイヤーマスクの復習

今までの授業で色々なツールを使用してきましたが、中でもレイヤーマスクは非常に便利で使用頻度の高いツールなので、使い方をしっかりと復習しましょう。 helpx.adobe.com

positionの使い方

positionとは要素の位置を動かす事の出来るプロパティで、positionを使用する事でより自由なレイアウトが作れるようになります。 さらに、「z-index」を指定する事で要素の重なり順を変える事が出来ます。 <style> .container { position:relative; } .box { positi</style>…

うちのにゃんこ

以前マークアップしたhtmlデータにcssを追加してページを完成させてしまいましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="wrap"> <h1>★<span>うちのにゃんこ</span>★</h1> <p id="lead">我が家のアイドル、にゃんこ達を紹介します!</p> <ul> <li></li></ul></div></body></html>

インターネットの仕組み

普段、何気なく利用しているインターネットですが、制作側になるのであれば基本的な仕組みを理解する必要があります。また、用語の意味も理解しておきましょう。 IPアドレス(インターネット・プロトコル・アドレス) IPアドレスとはインターネット上でデー…

CSS-spriteを使った3カラムレイアウト

CSSスプライトとは複数の画像を1つの画像にまとめる事でサイトの読み込み速度を速くする手法です。FacebookやGoogleでも使われている手法です。background-positionを使用して背景画像を動かします。 メリット ・画像の読み込みが1回で済むので、サイトの…

バナーの制作

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

2カラムレイアウトの作成

<html lang="ja"> <head> <meta charset="UTF-8"> <title>2カラムレイアウトの作成2</title> <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet"> <style> html,body,h1,ul,li{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; color: #…</link></meta></head></html>

floatを使ったレイアウト

divなどのブロックレベル要素は通常ソースで書かれた順番に上から下に縦に並びます。 しかしfloatを使う事で要素を浮かす事が出来、さらに左右どちらかの方向を指定する事で横に並べる事が出来ます。 floatを使う事でHTML内の文章構造を変える事なく自由なレ…

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

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

スキューモーフィックデザインとフラットデザイン

スキューモーフィックデザインとは? 「スキューモーフィックデザイン」は、AppleがiOSの最初の頃に提唱していた「質感や特徴など現実世界のモチーフを模倣したデザイン」のことです。 例えば、以前のiPhoneで採用されていた電卓 アプリのデザインは、リアル…

font-familyの指定 2019年版

font-familyの指定 font-familyとは表示される文字フォントの指定です。 基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。 初期設定で使われる標準フォントはPCやOSのバージョンによって違うので、確実に同じフォントで表示させた…

CSS基礎2

CSSの基礎で一番解りにくいのが、marginとpaddingの違いです。 margin marginとは要素の外側に出来る隙間の事です。 padding paddingとは要素の内側に出来る隙間です。言葉にすると一見簡単に思えますが、実際にレイアウトしてみるとシンプルなレイアウトで…

divの使い方と1カラムレイアウト

divタグ ・・ひとかたまりの範囲として定義する divタグはそれ自身は特に意味を持っていませんが、divで囲んだ範囲をひとかたまりとして、スタイルシートを適用するのに用います。 今回はh1やpをdivの中に入れ、カラムレイアウトを作っていきます。 カラムと…

ヘッダー画像の制作

header画像の作成 photoshopのフィルター機能やレイヤースタイルなどを使い、header画像を作成しましょう。 使用するテキストCafé Italia Melbourne; Café Italia, Carlton; Get Menu, Reviews, Contact, Location, Phone Number, Maps and more for Café It…

CSS基礎

CSS(Cascading Style Sheets) CSSとは、HTMLの要素をどのように修飾(表示)するかを指示する、W3Cによる仕様の一つ。HTMLによる文書構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの具体的な仕様の一つ。 h1やpなどの意味付け…

Photoshopでのマスク処理

画像のマスク処理 マスク処理とは、特定の部分のみを表示し、それ以外の部分を表示しないようにする画像処理のことをいいます。 Photoshopには、クリッピングマスクとレイヤーマスクという2つの「マスク機能」があります。この2つのマスク機能を使い分ける…

オンライン学習ツール

最近は自宅にいながら手軽にwebを学べるオンラインツールをよく目にします。動画を使ったオンラインツールもありますが、初学者の勉強で1番大事なことは手を動かす事です。1度自転車に乗れるようになれば、どう運転すれば良いかなど考えずとも体が勝手に動い…

マークアップの練習

HTMLで1番大事なのは正しい文章構造にマークアップ出来るか、です。 まずは文章をしっかりと読み、理解してからマークアップをし始めましょう。 アウトライン構造 アウトラインとは階層構造のことで、HTMLでのマークアップでは、このアウトラインを意識する…