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

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

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

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

正しい文書構造とページ遷移

セマンティックなマークアップ セマンティック=意味をきちんと考えた(例: そのテキストは「見出し」なのか「通常のパラグラフ」なのか、見出しならばh1~h6要素のどれでマークアップすべきか) セマンティックなマークアップによって、そのページは自然と…

マークアップのルール

覚えておきたいマークアップのルール テキスト、P.035 要素の入れ子(ネスト)と親子関係 POINT テキスト、P.037 アークアップの肝は、コンテンツの内容を理解して「文書構造」を見つけること HTMLの文書構造の基本は「見出し」「段落」「箇条書き」 要素の…

Adobe Brakets

文字を入力するツール テキストエディター Adobe Brakets Bracketsは、HTML/CSS/JavaScriptで開発されている、HTML/CSS/JavaScript用の新しいオープンソースコードエディターです Webページ作成時点でDreamweaverに入ります Webに特化した機能群 高度な…

HTMLの入力

記述の練習の準備 管理フォルダーを作成 Cドライブ直下に「自分の名前を英字」フォルダーを作り管理しなさい その中に「0422」を作り、データを管理します ※このとき、フォルダー名・ファイル名に日本語を使用しないこと! ブラウザに情報を表示するためには…

復習 - HTML文書構造

チェックテスト HTML(HyperText Markup Language)P.014 CSS(Cascading Style Sheets)P.064 HTML5 DTD P.016 文字コードの指定 P.017 <meta charset="utf-8"> CSSの外部参照 P.073 <link rel="stylesheet" href="css/style.css"> 外側の下を空ける P.092 h1 { margin-bottom: 20px; } 内側を空ける P.092 p { padding: 20px;</link></meta>…

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

要素の入れ子(ネスト)と子孫関係 テキスト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>…

HTMLの概要

HTMLの役割 HTML(Hyper Text Markup Language) Webページを表示するためのマークアップ言語のひとつ マークアップとは、コンテンツの始めと終わりにタグと呼ばれるしるしを付けて、その部分になんらかの「意味付け」をすることを指します HTMLの基本構文 …

はじめてのHTML

Webデザインの勉強 テキストエディター テキスト P.006 Adobe Brackets brackets.io 確認用のブラウザー テキスト P.007 Google Chrome www.google.co.jp 拡張子の表示 テキスト P.008 HTMLに触れてみる テキスト P.009 1. 新規HTMLファイルを作成します Bra…