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

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

CSSによるページデザイン

CSS

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

Webページのテキスト

CSS

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

リセットCSSと書体指定

CSS

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

文字の囲みと表の枠線

CSS

文字の囲み borderプロパティの値を指定する 上下左右の枠線を個別に指定する 「border」と記述することにより、上→右→下→左をショートハンドで記述したことになります プロパティー 意味 border-top 要素の上の線 border-right 要素の右の線 border-bottom …

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

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

CSSで装飾 - 演習

CSS

CSSで装飾 - 基礎演習 style要素をエンベッドして、以下の問いに答えなさい CSS01 h1要素「CSSの使い方」を記述し、赤色に表示されるよう設定しなさい CSS02 CSS01の記述を、背景色「青色」・文字色「白色」に変更しなさい CSS03 CSS02の余白を10pxに変更し…

ボックスモデル

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

CSSからWebデザインを習得

CSS

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

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