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

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

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

グリッドレイアウト

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

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

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

複数ページの作り方

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

Positionを使ったレイアウト

見本 素材のダウンロード先 http://yachin29.com/photoshop/position.zip 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">…</li></ul></header></div></body></html>

Positionレイアウト

練習素材 <html lang="ja"><head><meta charset="utf-8"><title>positionとfloatを使ったレイアウト</title><style>html,body,h1,p { margin:0; padding:0;}img { vertical-align:bottom;}body { background:#979797;}header { width:800px; height:120px; margin:100px auto 0; background:#FFFFFF; position:relative;}h…</meta></head></html>

コーディング課題

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

グリッドレイアウト

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

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

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

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

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

CSSスプライト

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

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

今回はボタンを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>…

隠し文字

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

floatと2カラムレイアウト

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

リセットCSSの概念

各ブラウザ(IE、FireFox、Chrome、safariなど)は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。 元々持っているブラウザー…

CSS基礎

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

マークアップの復習

では実際にマークアップをしてみましょう。 新規ファイルを作る ファイルを新規作成する場合は、[ファイル]メニュー →[新規作成]を選択します。 ファイルの保存 まず中身を記述する前に必ずファイルの保存をしましょう。ファイルを保存する場合は、[フ…

font-familyの指定 2016年

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

カンプをコーディング

illustratorで作ったカンプを実際にコーディングしてみましょう。 要素や文字の大きさや色、マージンなどの値もカンプのデータをベースに作っていきます。しかし、全てカンプと完全に同じに作っていくのは非常に難しいので、コーディング段階での微調整は必…

floatの復習

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

Positionレイアウト

練習素材

カラムレイアウト

1カラムレイアウト 2カラムレイアウト 2カラムレイアウトの場合、floatを使い、div要素を横に並べます。 ここで一番大事なのはHTMLの文章構造を変える事無く、CSSでレイアウトしていく事です。 floatを使う事でHTML内の文章構造を変える事なく比較的自由なレ…

カラムレイアウト

1カラムレイアウト 2カラムレイアウト 2カラムレイアウトの場合、floatを使い、div要素を横に並べます。 ここで一番大事なのはHTMLの文章構造を変える事無く、CSSでレイアウトしていく事です。 floatを使う事でHTML内の文章構造を変える事なく比較的自由なレ…

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

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

Floatの演習

ソースコード <html lang="ja"> <head> <meta charset="utf-8"> <title>私の好きな本3冊</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <h1>私の好きな本3冊</h1> <div class="box"> <h2>新平家物語</h2> <p class="ph"><img src="img/01b.jpg" height="300" alt="#"></p> </div></div></body></html>

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

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

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

ナビゲーションボタンを作る際のポイント マウスクリック(ホバー)により、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 高さは、「line-height」か「padding」で指定する、 …

リセットCSS

各ブラウザ(IE、FireFox、Chrome、safariなど)は、要素毎にデフォルトでスタイルを独自にもっており、ブラウザーによって表示が異なる場合があります。それらをリセットするスタイルシートを一般的に「リセットCSS」と呼びます。 元々持っているブラウザー…

HTMLの復習

行は row 列は col 宿泊料金表 部屋タイプ ツイン シングル グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ 平日 15,800円 20,800円 58,000円 9,800円 14,800円 休前日 19,800円 25,800円 12,800円 17,800円共通室内設備Wi-Fi …

文字色と背景色

www.colordic.orgnipponcolors.com 既存のサイトがどういう色を使っているか、見てみるのも非常に勉強になります。 www.coprosystem.co.jp 既存のサイトの色を取るスポイトツールです。非常に便利なのでFirefoxに入れましょう。 addons.mozilla.org 補色 こ…

第1回実技課題 追試 解答例

各要素のサイズが指定通りになっているか必ず確認する 文章構造とレイアウトを混同しない marginとpaddingの違いをしっかりと理解する ソースコード <html lang="ja"> <head> <meta charset="utf-8"> <title>2カラムの課題</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <div id="header">#header</div> <ul class="nav"> </ul></div></body></html>

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

2カラムレイアウトはwebサイトの基本レイアウトです。Floatの特性をしっかりと理解し、必ず作成出来るようになりましょう。 サイズ・色ともに適宜 各要素の隙間は10px 背景画像はPhotoshopを使い、自身で作成 cssはエンベットせずに必ずcssファイルに記述 cs…

複数ページの制作

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

Positionレイアウト その2

index.html <html lang="ja"> <head> <meta charset="utf-8"> <title>Positionでのレイアウト</title> <link href="css/style2.css" rel="stylesheet"> </head> <body> <div id="container"> <div id="header"> <h1>四季の花</h1> <ul id="nav"> <li id="sp"><a href="#">spring</a></li> <li id="su"><a href="#">sum…</a></li></ul></div></div></body></html>