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

ハロトレWebデザインの勉強03月14日開講クラス授業補足ブログ

CSS

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

CSSレイアウト テキストP.092〜095 基本は、floatを使ったレイアウト floatプロパティを使ったレイアウト 通常ならHTMLの順序通り縦に並んでしまうコンテンツを横に並べることが可能になります floatは浮き上がっている状態 floatを使ったレイアウトは、HTML…

リストをナビゲーション - 縦

CSS

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

初心者のためのCSS記述ルール

CSS

CSSとは Cascading Style Sheets HTMLの要素をどのように修飾(表示)するかを指示する つまり、どう表示したいかというイメージに向かって値を記述していきます。 CSSのコーディング規約(Google) 「Google HTML/CSS Style Guide」を適当に和訳してみた Go…

リストをナビゲーションに - 横

CSS

リストをナビゲーションに - 横 <body> <ul class="nav"> <li><a href="#">新着情報</a></li> <li><a href="#">お知らせ</a></li> <li><a href="#">製品情報</a></li> <li><a href="#">店舗案内</a></li> <li><a href="#">会社案内</a></li> </ul> </body> CSSの記述 borderを指定した場合 《例1》 /* reset */ html, body, ul, li { margin: 0; padding: 0; line-height: …

文字の囲みと擬似クラス

CSS

文字の囲み テキストP.080 borderプロパティの値を指定する 文字と囲みとの空きは、paddingプロパティの値を指定する <body> <div id="content"> <p class="box border1">テキストの囲みを表現したい[標準]</p> <p class="box border2">テキストの囲みを表現したい[線の太さ]</p> <p class="box border3">テキストの囲みを表現したい[線のカラー]</p> <p class="box border4">テキストの囲</p></div></body>…

CSSでレイアウト - 演習

CSS

CSSでレイアウト 「CSSでレイアウト - 基本」を踏まえて設定する 最低限の記述に徹する web-design.hatenadiary.jp ボックスモデル 「CSSでレイアウト - 基本」で設定したように、ボックスモデルというより「どう見せたいか」を意識して設定します 結局のと…

CSSでレイアウト - 基本

CSS

HTMLの基本構造 理屈抜きに入力する必要があります できなければ、できるまで入力練習をしましょう パソコンに向かってできなければ、メモ書きで良いので、見本を見ないでも書けるまで練習しましょう それでも自信がない場合は、10回書いたメモを講師に毎日…

CSS演習 - 1カラム 石垣島観光ガイド

CSS

1カラムレイアウト 石垣島観光ガイド 石垣島は八重山諸島の中で一番大きな島で、沖縄で3番目に大きな島です。沖縄からは、空路で約1時間、沖縄より台湾に近く南に位置します。気候は亜熱帯気候で、1年を通じて平均気温は27度もあります。亜熱帯気候のため、…

初心者のためのCSS記述ルール

CSS

多すぎる情報に惑わされない 基本を理解することを優先する プロの方法を真似しない(プロの方法は、プロになってから!) CSSとは Cascading Style Sheets HTMLの要素をどのように修飾(表示)するかを指示する つまり、どう表示したいかというイメージに向…

マージンの相殺とCSS基礎演習

CSS

要素間の上下マージンの相殺 どちらも正の値の場合、大きいほう どちらも負の値の場合、小さいほう 一方が正の値、他方が負の値の場合、足し引きした値を設定 ボックス内にボックスがある場合のマージンの相殺 マージンの相殺は、外側のボックスにpadding又…

ボックスモデル

CSS

ボックスモデルとは 文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します 記述の順序は「外側のエリアから」が一般的です hail2u.net テキスト P.75 ボックスを構成する要素 ボックス幅は、コンテントエリア幅 + パディング + ボーダーの…

CSSの基本構造

CSS

CSSの役割 CSS Cascading Style Sheets Webページの見た目を制御する CSSは、HTMLとセットで使われる(拡張子は、.css) CSSの3つの働き 設定内容 名称 役割 どこに セレクタ スタイルを設定する場所を指定するところ どんなスタイルを プロパティ どのよう…

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

CSS

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

CSSからWebデザインを習得

CSS

CSSとは テキストP.64〜 CSS(Cascading Style Sheets)HTML文書に装飾・レイアウトをほどこすための言語 タグまたはタグに付与した名前をもとに、そこに適切な値を設定しブラウザーがその値をもとに表示できるようにする言語 勉強のステップ Webサイトを見…

CSSで装飾してみる

CSS

CSSとは Cascading Style Sheets ウェブページのスタイルを指定するための言語 1. CSSの記述場所 テキスト P.011 記述場所(head部内に記述する:embed) style要素 <html> <head> <title>HTMLの練習</title> <style> </style> </head> <body> <h1>はじめてのHTML</h1> <p>今日はじめてHTMLを書きました。</p> </body> </html> 2. 見出しの色を赤く…