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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

positionによるレイアウト

CSS

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

CSS Spriteでナビゲーション設定

CSS

ナビゲーションの役割 ユーザーが目指すページに進めるよう適切に案内すること HTML5では、主要なナビゲーションには nav要素を使用する ナビゲーションの基本形 li要素の横並びは、floatプロパティで配置する インライン要素は、displayプロパティでブロッ…

横ナビゲーション

CSS

リストをナビゲーションに(横) 番号なし箇条書きを利用する <html> <head> <meta charset="utf-8"> <title>横ナビゲーション</title> <style> html, body, ul, li, a { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } a { t</meta></head></html>…

縦ナビゲーション

CSS

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

擬似クラス

CSS

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

リセットCSSと書体指定

CSS

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

CSSでレイアウト - 演習

CSS

ボックスレイアウト実践 - 基礎演習 style要素をエンベッドして、以下の問いに答えなさい CSS01 h1要素「CSSの使い方」を記述し、赤色に表示されるよう設定しなさい CSS02 CSS01の記述を、背景色「青色」・文字色「白色」に変更しなさい CSS03 CSS02の余白を…

CSSでレイアウト - 基本

CSS

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

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

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

ボックスモデル

CSS

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

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. 見出しの色を赤く…