練習サイト構築手順（１）

ページ構築の手順この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。文書構造のグループ化グループ化とは、div要素によるコンテンツのブロック化「コンテンツのブロック化」であるので、１行を「div要…

2013-06-29

練習サイト構築の準備

サイト構築サイトを構築する。「お問い合せ」は、メールリンクで設定 CakeShop *ホーム *商品のご案内 *店舗案内 *お問い合せおすすめケーキのイメージ新着情報 2013.06.10 スペシャルキャンペーン期間中、お休みをさせて頂いておりました、N.Y.チーズケ…

2013-06-28

Googleフォーム

Googleドキュメント→Googleドライブ Googleドライブへアップデート「ドキュメント」をクリックすると「アップデート」を促されます「詳細はこちら」をクリックすると「Googleドライブ」のページに誘導されます右上の「無料の５GB・・・・」をクリック「G…

2013-06-27

フォームの基本構造

フォームとはブラウザの操作画面で、利用者からの入力を受け付ける要素(の集合)のこと目的は、利用者からの情報収集のため action action="#"は、CGIまたはPHPが入りますが、現時点では「NULLリンク」にしておきます。お問い合せフォーム <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせ</title></meta></head></html>…

2013-06-26

Dreamweaverでformを作成

Dreamweaver 挿入ツールの使い方の注意点コードビューとデザインビューでは挿入されるタグが違う formの場合、コードビュー：シンプル、デザインビュー：アクセシビリティ付加挿入パネル（フォーム）通常はパネルを使用することはありませんが、あえて機…

2013-06-25

ひとまず、CS5.5とCS6

テキストエディターとしてのDreamweaver 高価なテキストエディター効率化のために使用するDreamweaverですが、初心者はテキストエディターとして使用します「デザインビュー」と「CSSダイアログボックス」は使いませんサイトの管理（サイトの定義） Dream…

2013-06-24

positionを使ったレイアウト

css

positionとは positionプロパティは、ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法（基準位置）のみ static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは…

2013-06-23

Web画像を捉えるには

ゲシュタルトの法則人間は近いものや似ているものをグループ化したり、閉じた図形を見出そうとする性向がある、という法則。「要素が組み合わさることで全体が体制化される」という法則。視知覚（目から得られる情報をもとに状態を把握するはたらき）に関…

2013-06-22

CSS Sprite（縦移動）

CSS Spriteとはロールオーバー時の画像置換を、ひとつの画像の一部分の面を見せながら、画像を移動させ変化したように見せる手法です。読み込まれた画像は「ひとつ」。これによりレスポンスの問題が解決できます。ボタン画像素材 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS Sprit</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="nav"> <ul> <li id="home"></li></ul></div></body></html>

2013-06-21

CSS Sprite（横移動）

CSS Spriteで設定幅200px、高さ50pxをそのままスライド複製をしているためボタンの重なる部分が２pxに見えていますが、表示される部分は、１pxの枠になります <html lang="ja"> <head> <meta charset="UTF-8"> <title>縦メニュー：CSS Sprit</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="nav"> <ul> <li id="home"><a href="#"><em>ホーム</em></a><…</li></ul></div></body></html>

2013-06-20

リストをブロックに

ナビゲーションブロックカテゴリ間を移動するためのインタラクション機能タブ（ボタン）型で横並びのデザインナビゲーションブロックの構成ナビゲーションは、各ページへのリンクをまとめたものでありリンク集のひとつである項目を列挙したものといえる…

2013-06-19

リストをナビゲーション

リストのテキストリンクテキストリンクをナビゲーションに利用する <html lang="ja"> <head> <meta charset="UTF-8"> <title>リストをナビゲーション</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="nav"> <ul> <li><a href="#">HTML+CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> </ul></div></body></html>

2013-06-18

floatを使ったレイアウト

CSSレイアウト idセレクタの前に「div」を書くのか書かないのか。迷います。過去には「div」から記述していましたが、現在では少しでもデータ量を減らす意味もあり記述しない傾向にあります（企業の記述ガイドラインで判断します） floatプロパティを使っ…

2013-06-17

CSSによるページデザイン

初学者のCSS CSSを理解しようとして、いまネット上にあるプロの解釈を読むと、頭が混乱すると思います。日本語ですら、まともに作文を書くことができるようになるまで何年もかかりました。まだ勉強を初めて１周間です原理原則、現在の傾向といろいろあるWe…

2013-06-16

擬似クラスとリセットCSS

リンクの色（擬似クラス：Pseudo-classes）要素の性質スタイルを適用させたい場合に使います主に「a要素」のリンク時のカーソルの表示状態を設定します疑似クラスには次の6種類があります。 lang 指定された言語のスタイル link 通常リンク（未アクセス）…

2013-06-15

ボックスモデル

ボックスモデルの解説の代表例ボックスを構成する要素ボックス幅は、コンテント領域幅＋パディング＋ボーダーの太さ＋マージンです。コンテント領域がボックス幅ではないので、注意が必要です。 ※コンテント：widthとheightプロパティで規定される…

2013-06-14

セレクタの種類

セレクタの種類タイプセレクタ IDセレクタ classセレクタ子孫セレクタ属性セレクタユニバーサルセレクタなどがあります。タイプセレクタ要素に対してスタイル指定する div: division em：emphasis h1 { color: #00CC00; } <h1>大見出し要素</h1> 複数セレクタ …