2016-05-01から1ヶ月間の記事一覧
HTML5で使う属性 《HTML5のグローバル属性一覧》 id属性 ID名を定義 class属性 クラス名を定義 style属性 直接CSSを適用 title属性 タイトルなどの補足情報を定義 accesskey属性 ショートカットキーを割り当て tabindex属性 タブキーでフォーカスするかとそ…
カテゴリー ７つのカテゴリーの関係は以下の図のようになります フローコンテンツの中には、一部のめたデータコンテンツ以外のほとんどの要素が含まれています カテゴリーは大きく分けて、heading-content、sectioning-content、それ以外のまとまりの３つ 要…
新しい要素・属性 要素（element）・属性（attribute） 文書構造を明確にするための要素 section要素 header要素 nav要素 など テキストの意味を明確にするための要素・属性 time要素 mark要素 など 動画と音楽のための要素・属性 video要素 audio要素 など …
HTML5の基本的な文法 HTML5の文法は、基本的にHTML4.01と同じです DTD(Document Type Definition)：文書型定義 DTDはスキーマ言語の一種です HTML5ではDTDの指定が不要 今後はHTMLのバージョンがなくなり１つになるため 2016年9月時点では、以下のいずれか…
HTML5の特徴と代表的な機能 HTML4.01で定義されているHTMLの仕様を継承 誰でも簡単に情報が配信できる仕組み ブラウザのみで色々な処理が行えるWebシステムを開発できる仕組み マークアップに関する機能 構造化要素 HTML5では、これまでのHTML以上に文書構造…
HTML5 HTML5 は、WHATWG および W3C が HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 広義のHTML5 いままでより高度な機能をもつWebページ 特定のOSやブラウザに依存しない CSS3やECMAScript5を含む 狭義のHTML5 HTML4.0に続く5番目のHTML…
横に並べるレイアウト floatを使ったレイアウト 優先順位の高いコンテンツ内容から並べる リセットなし コンテンツは、左揃え ２つのコンテンツの間の空きが20pxになるよう幅を指定 wrapperの使い方 ラッピングして浮動状態を安定させる <html lang="ja"> <head> <meta charset="UTF-8"> <title>ラッピングして</title></meta></head></html>…
段組とは 「段組」とは、テキストや画像を複数の段落に分けてレイアウトすること 日本語の場合、横に文字を文字を組んだ場合、適切な文字数は「40文字」と言われています 「40文字」を超えると視線を意図的にずらさないと読み続けることができない基準の文字…
CSSでレイアウト 「CSSでレイアウト - 基本」を踏まえて設定する 最低限の記述に徹する web-design.hatenadiary.jp ボックスモデル 「CSSでレイアウト - 基本」で設定したように、ボックスモデルというより「どう見せたいか」を意識して設定します 結局のと…
HTMLの基本構造 理屈抜きに入力する必要があります できなければ、できるまで入力練習をしましょう パソコンに向かってできなければ、メモ書きで良いので、見本を見ないでも書けるまで練習しましょう それでも自信がない場合は、10回書いたメモを講師に毎日…
ナビゲーション マウスクリックにより、次の情報に遷移可能であることを認知させる仕組み 文字以外の領域面ををクリック可能にするためには「display: block」が必須 縦ナビゲーション 文字が並ぶだけの場合、「li」に文字サイズとリスト間の空きを指定する …
文字の囲み テキストP.080 borderプロパティの値を指定する 文字と囲みとの空きは、paddingプロパティの値を指定する <body> <div id="box1"> <p class="border1">テキストの囲みを表現したい［標準］</p> <p class="border2">テキストの囲みを表現したい［線の太さ］</p> <p class="border3">テキストの囲みを表現したい［線のカラー］</p> <p class="border4">テキストの囲</p></div></body>…
多すぎる情報に惑わされない 基本を理解することを優先する プロの方法を真似しない（プロの方法は、プロになってから！） CSSとは Cascading Style Sheets HTMLの要素をどのように修飾（表示）するかを指示する つまり、どう表示したいかというイメージに向…
表組み テキストP.48〜49 table 要素 caption 要素 tr要素：table row（１行） td 要素：table description th要素：table header <body> <h1>Web年表</h1> <table border="1"> <caption>1999年以前</caption> <tr> <th>西暦</th><th>出来事</th> </tr> <tr> <td>1989年</td><td>WWWの誕生</td> </tr> <tr> <td>1993年</td><td>Mosaic 登場</td> </tr> <tr> <td>1995年<…</td></tr></table></body>
要素間の上下マージンの相殺 どちらも正の値の場合、大きいほう どちらも負の値の場合、小さいほう 一方が正の値、他方が負の値の場合、足し引きした値を設定 ボックス内にボックスがある場合のマージンの相殺 マージンの相殺は、外側のボックスにpadding又…
ボックスモデルとは 文書内のすべての要素は、ボックスと呼ばれる四角形の領域を生成します 記述の順序は「外側のエリアから」が一般的です hail2u.net テキスト P.75 ボックスを構成する要素 ボックス幅は、コンテントエリア幅 ＋ パディング ＋ ボーダーの…
CSSの役割 CSS Cascading Style Sheets Webページの見た目を制御する CSSは、HTMLとセットで使われる（拡張子は、.css） CSSの３つの働き 設定内容 名称 役割 どこに セレクタ スタイルを設定する場所を指定するところ どんなスタイルを プロパティ どのよう…
要素の入れ子（ネスト）と子孫関係 テキストP.035 HTML文書全体が、html要素を最上位（ルート）の先祖要素とする入れ子によるツリー構造になっています このとき注意が必要なのは「div要素」は、レイアウト指定のためのグループに利用するだけでツリー構造に…
箇条書き <ul> <ol> <dl> テキストP.30〜32 必然性のある箇条書きを利用する ul（unordered list）順序が置き換わっても意味が伝わる並列な内容に使う。 行頭マークは「黒丸」 <ul> <li>私が好きな真っ赤なりんご</li> <li>あなたが好きなのはバナナ</li> </ul> ol（ordered list）順序が置き換わっ</dl></ol></ul>…
head要素の中に何を書くか？ head部 UA（user agent）が表示するための必要な条件とページの目的、そして外部との関連づけを記述する あくまでもブラウザが理解するための部分 不可視（非表示） 現在のインターネットの利用の仕方は、ほぼ「検索」から始まり…
W3C HTML Validator Service 必ず、文法チェックをすること validator.w3.org Free Online HTML Validator - FreeFormatter.com www.freeformatter.com 例A グループ化する前までの記述 <html lang="ja"> <head> <meta charset="utf-8"> <title>卵料理カフェ Cockeyolly</title> </head> <body> <h1>卵料理カフェ Cockeyolly</h1> <ul> <li></li></ul></body></html>
マークアップ演習 正しい文章構造で記述しなさい HTML5 Outliner 例A 卵料理カフェ Cockeyolly Home ニュース メニュー 今月のおすすめ オリジナル雑貨 マップ メール 今月のおすすめ きのこのオムライス きのこのオムライスふんわりアツアツのオムライスを…
ページ構築の手順 この「グループ化」をするときに、「id名」「class名」を使い分けて、グループの意味を作っていきます。 文書構造のグループ化 グループ化とは、div要素によるコンテンツのブロック化 「コンテンツのブロック化」であるので、１行を「div要…
Web画像 インターネット上で使える画像の種類は JPEG (Joint Photograph Experts Group) GIF (Graphics Interchange Format) PNG (Portable Network Graphics) です。 Web画像は最終的には、四角いビットマップデータ（GIF・JPEG・PNG形式）として書き出しま…
うちのにやんこ テキストP.020〜 素材 実習（テキスト） ★うちのにゃんこ★ 我が家のアイドル、にゃんこ達を紹介します！ 我が家のにゃんこ紹介 飼い主紹介 猫写真募集 我が家のにゃんこ紹介 ●すばる（白キジトラ・オス） 目と耳が大きくてすばらしくイケメン…
新規ドキュメント作成 Bracketsで管理フォルダーを選択 新規ドキュメント作成 ファイル名を「index.html」として保存 基本構造を入力する DOCTYPE宣言を入力 html要素を入力 head要素とbody要素を入力 meta要素を入力 title要素を入力 ブラウザでプレビュー…
Web用に保存 必要な大きさに書き出します。 アートボード CS3までの「トリムエリア」が、「アートボード」になりました。 アートボード用の長方形を描く アートボードに変換する ※オブジェクトのスペースのまま書き出す場合はアートボードに変換する必要はあ…
新規ドキュメント 横幅800pxピクセルのナビゲーションボタンを作成するので、幅960pxを設定 ピクセルプレビュー ピクセルプレビューにチェック 長方形を描画 CS6・CCの場合 線の位置を内側にする（書き出しが、800pxからずれない） 区切り線を追加 ダイレク…
