Webサイト制作科 忘筌

求職者支援訓練 Webサイト制作科 10月11日開講クラス補足メモ

CSS

positionによるレイアウト

CSS

positionとは テキストP.146〜154 positionプロパティはボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、botto…

カンプからコーディング

カンプからコーディング HTML Outliner 「Untitled Section」は、navタグ

企業系サイト:トップページ

2カラムページ設計 bodyの背景画像を設定する場合 headerの背景画像を設定する場合 定義 全体は、.conatiner幅「980px」 ヘッダー情報とフッター情報の見栄えは、ブラウザ幅全体を利用する 横幅「140px」ピクセルのナビゲーションボタンを7個作成 高さは「50…

positionを使ったレイアウト- 実践

positionを使ったレイアウト 以下のサイトを作成しなさい logo.png(透過PNG 幅200px) <html lang="ja"> <head> <meta charset="utf-8"> <title>ドリンク | ペンギンカフェ</title> <link rel="stylesheet" href="../css/cafe.css"> </head> <body id="drink"> <div class="container"> <header class="header"> <h1></h1></header></div></body></html>

positionによるレイアウト

positionとは テキストP.146〜154 positionプロパティはボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する positionプロパティで指定するのは、配置方法(基準位置)のみ static 特に配置方法を指定しません。この値のときには、top、botto…

CSS Spritesの設定 - 背景画像の記述

HTMLの記述 <html lang="ja"> <head> <meta charset="utf-8"> <title>Penguin Cafe</title> <link rel="stylesheet" href="css/cafe.css"> </head> <body> <div class="container"> <header class="header"> <h1>ペンギン・カフェ</h1> <p>落ち着いた雰囲気の、おいしいコーヒーを楽しめるお店です。</p> </header> <p class="keyvisual"></p></div></body></html>

相対パスと絶対パス

相対パスと絶対パス 「パス」とは、「ファイルの場所」を示すための大切な仕組みです 相対パス relative path 今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを指定します 相対パスを記述 同じ階層内にあるファイル →ファイル名 で記述 同…

うちのにゃんこ - CSSの記述

CSS

HTMLの確認 必要に応じてクラス名を追加する <html lang="ja"> <head> <meta charset="utf-8"> <title>うちのにゃんこ</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header class="header"> <h1><span class="star">★</span>うちのにゃんこ<span class="star">★</span></h1> </header></div></body></html>

ナビゲションを含めて2カラムレイアウト - 基礎演習

ナビゲションを含めて2カラムレイアウト 「header」「footer」の横幅「100%」・高さ「100px」 間に「div」を、横幅「960px」 「div」内に「nav」「main」「aside」挿入 「main」は、左寄せ、高さ「300px」、横幅は適宜 「aside」は、右寄せ、高さ「300px」…

floatを使った回り込み

floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…

CSSでレイアウト - 基本

HTMLの基本構造 《Emmet入力》 ! 「tab」キーで展開 <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> コンテンツ内容の入力 h1は、ページテーマの最優先見出し pは、テーマの内容 練習としては、「自分の好きな〇〇」を入力すること 「自分の好きな食べ物」「自分の好きな音楽」「自分の好…

ページ構築の手順

CSSによるページ構築の手順 入力内容のチェック 入力内容(文法)チェックは、必須です W3C Markup Validation Service(HTMLのチェック) W3C CSS Validation Service(CSSのチェック) 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブ…

Adobe Brackets 入力時の使い方

Adobe Bracketsの入力時の使い方 プロジェクトのルート化 「Getting Started」をクリック 管理したいフォルダーを選択(例:「myName」自分の名前をつけたフォルダー) クイックエディット クイックエディットは主に4種類あります ショートカットは全て「Ctr…

floatを使ったレイアウト基礎

floatとは テキストP.104 浮く(浮動状態) floatは要素を横に並べたり、文字を回り込ませたいときに指定するプロパティ プロパティの指定 プロパティの指定 挙動 float: left; 指定した要素を左に浮き上がらせて寄せて、次の要素を左方向にあとに続いている…

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

CSS演習 テキストと授業内容の確認 幅 高さ margin padding 背景色 背景画像 文字色 文字サイズ line-height CSSで1カラムレイアウト 「CSSでレイアウト - 基本」を踏まえて設定する 最低限の記述に徹する 例題テキスト 宮沢賢治作品 いてふの実 そらのてっ…

縦ナビゲーション

ナビゲーション マウスクリックにより、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する …

CSS ★演習

演習 CSSの記述は、内部参照(embed)で記述 問題 CSS1 #1B888D #355584 <body> <h1>style要素</h1> <h2>style element</h2> <p>HTML文書内にまとめて設定します。</p> </body> 問題 CSS2 幅の指定は不要 #91BC86 #BC908F #F5F5DB <body> <h1>About wine</h1> <h2>Chianti Classico Riserva</h2> <p>1435年創業の由緒あるワイン</p></body>…

文字指定

CSS

情報を伝える文字 文書構造で伝える 文字情報の価値の優先順位をブラウザに伝えるHTML 閲覧者に情報の内容をわかりやすく伝えるためのCSS CSSを指定しない場合は、ブラウザの初期値(CSS)が適用されます★HTMLの検証:The W3C Markup Validation Service CSS…

ボックスモデルとリセットCSS

CSS

ボックスモデル テキストP.75 HTMLタグでマークアップされた要素は1つの箱とみなされます ブロックレベル要素(幅指定をしない場合、ブラウザー幅で表示される) 記述するプロパティの順序は、空間からコンテンツ内容への順が一般的 パディング(padding) …

スタイルの継承

CSS

スタイルの継承(inheritance) CSSには親要素から子要素へとスタイルが継承される仕組みがあります この仕組のおかげで、同じ指定を繰り返さなくても効率よく指定ができます <html lang="ja"> <head> <meta charset="utf-8"> <title>スタイルの継承</title> <style> body { color: red; } </style> </head> <body> <h1>bodyの子要素である見出し要素は、</h1></body></html>…

CSSとは

CSS

CSSとは Cascading Style Sheets 構造化された文書をどのように表現するのかを指定するための言語 文字の色、文字の大きさ、余白などのレイアウトの指定 CSSのコーディング規約(Google) 「Google HTML/CSS Style Guide」を適当に和訳してみた Google HTML/…

要素の入れ子(ネスト)と子孫関係

CSS

要素の入れ子(ネスト)と子孫関係 テキストP.035 HTML文書全体が、html要素を最上位(ルート)の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造に…