HTML/CSS
RGBカラーは色相・明度・彩度で構成されている。RGBカラーの基本 色相･･･色の違い 明度･･･明るさ 彩度･･･色の鮮やかさ CSSでの書き方。CSSでは"#"の後にR(Red)G(Grean)B(Blue)の数値を入れてあげる。数値には16進数（0~F）を使う。0が一番濃く、Fが一番薄い…
CSSでのスタイルの指定方法です。指定の方法セレクタ{ プロパティ:値;}です。セレクタはh1などのタグやID（#）、class（.）を指定します。 "{}"（波括弧、カーリーブラケット）は宣言です。この中にプロパティと値を書きます。各プロパティの最後は必ず";"（…
CSSを用いてのHTMLをスタイリングしていきます。 CSSを書く場所CSSは一般的に外部ファイルとしてHTMLに読み込ませます。 その場合headの中に、以下のように記述します。 <link rel="stylesheet" href="style.css"> また、直接CSSをheadの中に書き込むこともできます。 <head> <meta charset="UTF-8"> <title>CSSの練習</title> <style> h1 { color: red; </style></meta></head></link>…
CSSにも慣れてきたので、CSSを使った簡単なレイアウトを書いていきます。 01 ソース <html lang="ja"> <head> <meta charset="utf-8"> <title>01</title> <style> body{ font-family: "HIragino Kaku Gothic ProN", Meiryo, sans-serif; } h1{ color: #108889; } h2{ background: #355584; color: #fff; padding: 5px 0 5px 0; </meta></head></html>…
CSSで背景画像を設定するには「background: url(#);」を使います。背景画像を全面に敷き詰める。背景画像を全面に敷き詰めるには、「background: url(#);」をそのまま使います。ソース body{ background:url(img/01.gif); } 背景画像を横や縦に並べる背景画…
HTMLの要素に「border」を指定していすることで、ボーダー（境界線）をつけることができます。 ボーダーの種類ボーダーには、solid（実線）、dashed（破線）、double（二重線）、dotted（点線）があります。他にも種類がありますが、あまり使われません。 実…
ヘッダーにあるh1はそのページの中で一番重要なものなので、特に文法に従って書くことが望ましい。 一番望ましい形は以下の通り、h1とpのセットが望ましいです。 <h1>一番重要なキーワード | 会社名</h1> <p>h1の概要、会社名などは後のほう</p> 人々が検索するときに、会社…
今まで学んだことを踏まえて、簡単なCSSレイアウトを演習します。CSSのみでスタイリングborderとbackgroundでレイアウトしました。ブラウザレビューソース <html lang="ja"> <head> <meta charset="utf-8"> <title>ページタイトル</title> <style> html, body, div, h1, h2, p{ padding:0; margin:0; line-height:1.0; } body{ </meta></head></html>…
Floatを使ったレイアウトを使うことで、横並びのページを作ることができます。 Floatを使い場合は、floatさせた要素が他のスタイルに潜り込まないように、overflow:hidden;（はみ出した要素を隠す）を設定するのが一般的です。 ２カラムレイアウト２カラムレ…
CSSを使ったレイアウトの宿題が出ていたので、さまざまなレイアウトをトレースしました。01 サイト概要風ソース <html lang="ja"> <head> <meta charset="UTF-8"> <title>Spread Experiment Web Site</title> <style> html, body, div, h1, h2, p{ margin: 0; padding: 0; line-height: 1.0; } body{ font-family: "Hiragino Ka</meta></head></html>…
HTMLでテーブル（表）を作ります。ソース <table border="1" width="300"> <caption>キャプション</caption> <tr><th>月</th><th>火</th><th>水</th></tr> <tr><td>○</td><td>×</td><td>○</td></tr> <tr><td>○</td><td>×</td><td>○</td></tr> </table> タグの説明 table テーブルの範囲 caption テーブルの題名 tr 行 th テーブルヘッダー td テーブルセル
現在勉強中のHTMLの基本 <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> </head> <body> <h1>大見出し</h1> <p>本文</p> <ul> <li>順序なしリスト</li> <li>順序なしリスト</li> <li>順序なしリスト</li> </ul> <p><img src="/img/test.jpg" alt="ここは画像に関係のあることを書く" /></p> <table> <tr><th>テーブルヘッド</th><th>テーブルヘッド</th>…</tr></table></body></html>
HTMLでの基本的な文章の構造を書きます。 HTMLではアウトライン構造が重要になります。書き方例： <h1>一番重要な見出し<h1> <p>h1に関する概要</p> <h2>次に重要な見出し</h2> <p>h2に関する概要</p> ポイント必ず見出し（h1）と段落（p）をセットにする。そのセットだけで題名と文章として</h1></h1>…
meta charsetはタイトルの前に書く。タイトルに文字が含まれているから、先に文字コードをブラウザに認識してもらう １行（row）４０字程度、１段落（paragraph）４行程度。それ以上だと字が詰まって見えて、読み飛ばしてしまう。 Webは最初に結論を持ってく…
