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

求職者支援訓練webサイト制作科1月クラス

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

positionの使い方

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

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

ナビゲーションボタンを画像に置き換え、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>

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

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

HTMLの復習

前回作った表組にCSSや他のコンテンツを追加してみましょう。 宿泊料金表 部屋タイプ ツイン シングル グレード スタンダード エグゼクティブ スイート スタンダード エグゼクティブ 平日 15,800円 20,800円 58,000円 9,800円 14,800円 休前日 19,800円 25,8…

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

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

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

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

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

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

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

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

CSS演習問題

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

CSS基礎2

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

リセットCSS

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

CSS基礎

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