webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

グリッドレイアウト

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

アイコンをwebフォントで表示

以前、授業でGoogleのwebフォントを使用してみましたが、最近はテキストだけでなくアイコンもwebフォント化されていて、それを使用しているサイトもよく見かけます。 フォントなのでテキストとのベースラインが合わせやすい フォントなので拡大縮小はcssのfo…

ヒーローヘッダーを使ったサイト制作

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…

CSS復習問題

1カラムの復習 使用テキスト Herb Kitchen イタリアの家庭料理のオリジナルレシピを紹介します。 タコのカルパッチョ 画像 たこは低脂肪、低カロリーなだけでなく、コレステロールの上昇を抑える働きのあるタウリンが含まれます。 レモン果汁などさわやかな…

SVGの使い方

SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能…

第1回実技試験

今回の制作の仕様 header要素の幅960px高さは350px header画像は自身で制作し、「CAFE de FELICA」の文字を画像に入れる h1はテキストを挿入し、cssで隠す ボタンは4つを均等の幅で設置し、高さは50px コンテント要素の幅650px 高さ500px フッター要素の高さ…

2カラム演習問題

ヘッダー要素の幅960px 高さ300px コンテント要素の幅600px 高さ400px フッター要素の高さ50px 各要素の空き10px 各要素の背景色は適宜 ボタンは5つを均等の幅で設置 ボタンの高さは50px ナビゲーションボタンをホバーした際に文字色と背景色が変わるように…

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

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

複数ページの制作

日本の四季 日本の気候は温暖でおだやかで、しかも春夏秋冬という四季にめぐまれています。 春には三寒四温、三日間寒さが続くと四日間暖かい日が続き、 そうしているうちに桜が咲き、夏が来る。 そして秋になり、また冬を迎える。 このように、日本の気候は…

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

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

ボタン画像の変遷

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

クライアントワークの目標

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

positionの使い方

http://yachin29.com/photoshop/position.zip

CSSスプライト

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

ヘッダー画像の制作

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

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

今回は今までhtmlファイル内に記述していたcssをcssファイル(style.css)に記述していく方法でやります。 htmlファイルが複数になっていくと、cssファイルを別に作り、そちらに書いていくようになるので、今の内になれてしまいましょう。 また、完成したデ…

無料サーバーの取得とデータのアップロード

制作したデータをインターネット上で表示させるためには作ったデータをサーバーにアップロードする必要があります。 サーバーには無料のものと有料のものがありますが、授業では無料サーバーを使用していきます。 webサイト制作においてサーバーは必須のもの…

CSS演習問題

演習1 <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: …</meta></head></html>

font-familyの指定 2017年版

font-familyの指定 font-familyとは表示される文字フォントの指定です。 基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。 注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味し…

隠し文字の設定

ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。ここで絶対にやっては…

ナビゲーションボタンの制作

擬似クラス 擬似クラスでまず覚えるべきは以下の4つです。 link 通常リンク(未アクセス)のスタイル visited アクセス済みリンクのスタイル hover ポイント時のスタイル active アクティブ時のスタイル です。この4つの擬似クラスを指定する際には、 link …

フロートを使ったレイアウト

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

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

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

Photoshopでのマスク処理

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

adobe brackets|オープンソースの高機能テキストエディタ

adobe bracketsとは? HTMLやCSS、JavaScriptのコーディングに特化したOSS製テキストエディターとして、2011年12月から開発をスタートし、Windows版やmacOS版に限らずLinux版(Debパッケージ)をGitHub上で公開している。Adobe SystemsはBracketsを「HTML/CSS/…

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

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

CSS基礎

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

コードドリル|タイピングをしながら、プログラミングを学ぶ。

コードドリル - プログラミング言語のタイピング練習 プログラミングを反復練習する タイピングをしながら、プログラミングを学ぶ。 ユーザー登録は無料です。文字列リスト作成・ソースコードで効率よく練習ができます。 プログラミングがもっと楽しくなる …

マークアップの練習

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

定義型リストとテーブル

定義型リスト 定義型リストとは「ul」、「ol」リストと少し違い、 「dt」= 用語の指定 「dd」= dtで指定した用語の定義 「dl」= 「dt」「dd」を挟む例 <dl> <dt>レモン<dt><dd>酸っぱい黄色い果物</dd> <dt>桃<dt><dd>水分が多く柔らかい赤みをおびた果物</dd> </dl> 以下の文を定義型リストを使ってマー…

Photoshop 基礎

Photoshopの基本的な使い方 Photoshopで行う作業は大きく別けると以下の3つ 画像を作る。 画像を補正する。 画像を加工する。 ・Photoshopの初期化 目的は、無駄に消費されているメモリの記憶をリセットすること。 アイコンをダブルクリック等で起動。 この…

作業効率が劇的に上がる! ショートカットキー早見表

作業効率を上げる為にはショートカットキーを覚える事が非常に大事です。 ただ、よく使うショートカットキーは自然と覚えるものの、普段余り使わない物は忘れがちです。その都度調べていてはそれこそ時間のムダになってしまうので、こういった早見表をPCの隣…

HTMLとは?

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。 普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。 もちろ…

マークアップとは?

マークアップ とは、機械が文書の構造を認識出来るように、文書の各要素に目印を与えて行く事です。 見出しや段落などと言った紙の文書では当り前にある要素だけでなく、ハイパーリンクのアンカーなどのようなハイパーテキスト独自の要素なども、マークアッ…

道具の使い方を覚える

PCの使い方 物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。 今までのよう…

Webサイトを見る、知る、そして作る

Webサイトを見る Webの勉強を始めるうえで大事な事はまず数多くのWebサイトを見る事です。 もちろん見ているだけで作れるようにはなりませんが、画家を志している人が名画を見るように、建築家を志している人が建築物を見るように、音楽家を志している人が音…

レスポンシブ対応の高品質なHTMLのテンプレート

coliss.com

デザインの参考になるUIキットやコンポーネント

ポートフォリオ制作は、時間のかかる作業のひとつです。こういった素材を上手く使って作業の効率化を計りましょう。 素材はどれも無料ダウンロードが可能ですが、ダウンロード元はほぼ全て英語なので、注意してダウンロードするようにしましょう。 photoshop…

ポートフォリオ制作に必要な「ツカミ」

ポートフォリオを制作する際に、もちろん中身の作品の質も大事ですが、ポートフォリオ自体の見た目も非常に大事です。特に面接などではポートフォリオの中身をじっくり見る時間が無く、トップページのパッと見の印象で評価されてしまうケースも珍しくありま…

XAMPPとMAMPの文字コードとタイムゾーンの設定

PHP

授業ではXAMPP・MAMPを使用してPHPおよびWordpressの授業を進めて行きます。これらを使用する時に気をつけないといけないのが、文字コードの設定です。 XAMPP・MAMP共にドイツで開発されたソフトであるため、初期設定のままだと日本語を使用した時に文字化け…

配色の基本

webサイトはおおまかに別けるとテキスト・画像・色の3つの情報から成り立っています。 3つの中でも色はユーザーに最初に伝わる情報なので、配色次第でサイトの第一印象が決まってしまいます。 初心者にとって配色は難しい部分ですが、まずは既存のサイトやサ…

font-familyの指定|2017年2月版

font-familyの指定 font-familyとは表示される文字フォントの指定です。 基本的には表示させたいフォント(綺麗なフォント)から順に指定してきます。 注意が必要なのがwindowsで、windowsで使われる標準フォントはバージョンによって違うので、それを加味し…

複数ページの作成

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

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

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

Positionを使ったレイアウト

見本 作例 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Patisserie camellia</title> <link href="style.css" rel="stylesheet"> </head> <body> <div id="container"> <header> <h1>Patisserie camellia</h1> <ul> <li id="info"><a href="#">Information</a></li> <li id="menu"></li></ul></header></div></body></html>

ナビゲーションボタンを画像に置き換える

ナビゲーションボタンを画像に置き換え、2カラムレイアウトに組み込みましょう。index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムの練習</title> <link rel="stylesheet" href="style.css" > </head> <body> <div id="container"> <header></header> <nav> <ul> <li id="home"><a href="#">Home</a></li> <li id="food"></li></ul></nav></div></body></html>

Dreamweaverの使い方

授業では今後Dreamweaverを中心に使って行きます。 Dreamweaverは非常に高機能なテキストエディターですが、いきなりその全部の使い方を覚えようとはせずに、まず1番大事な「サイトの定義と管理について 」をしっかりと覚えましょう。 [基本操作] サイトの…

webライティング

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

ナビゲーションボタンの作成

今回はボタンを1つ1つ画像にして背景画像で指定します。hover時の画像も別に制作してみましょう。home.png home_h.png <html lang="ja"> <head> <meta charset="utf-8"> <title>ナビゲーションの作成</title> <style> html,body,ul,li { margin:0; padding:0; line-height:1.0; } a { text-decoration:none; color:#FFFFFF; } u</meta></head></html>…

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

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