2014-08-30から1日間の記事一覧
CSSでのフォントの指定には、そのフォントを表示する環境が少ない順から指定していきますフォントの指定Mac→Windows→両方共通のように書いていきます。フォント名にスペースが含まれるものはダブルクウォーツで囲います。ゴシック体通常であれば、これらを指…
HTMLにもCSSにも慣れてきたので、1カラムレイアウトの演習をしました。演習結果（ブラウザプレビュー） ポイント ヘッダーの画像の上にテキスト（h1）を表示するために、imgタグではなくCSSでdiv#headerにbackgroundで背景画像を設定。 画像上のテキストの位…
角丸長方形ツールでドラッグ中にカーソルの右を押すと、丸くなります。逆に左を押すと丸みがなくなります。上と下で角丸の大きさを微調整できます。
作り方 楕円形ツールで、ひとつ楕円を作ります。 それを下に三つコピーします。コピーするときは選択ツールダブルクリックで、楕円の縦の直径分移動します。 もうひとつコピーを作り、二つの楕円と接線が合うように楕円を左側へ移動させる。 三つの楕円と接…
長方形ツールをつかってロゴを描いてみます。 ITを描いてみる ポイント 描画で醜い場合は表示をアウトラインのみにすると編集しやすくなる。（Ctrl+Y） 長方形の太さは大体みんな同じなので、ひとつ長方形を作ったらそれをコピーして利用します。90度回転さ…
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>…
Floatを使ったレイアウトを使うことで、横並びのページを作ることができます。 Floatを使い場合は、floatさせた要素が他のスタイルに潜り込まないように、overflow:hidden;（はみ出した要素を隠す）を設定するのが一般的です。 ２カラムレイアウト２カラムレ…
今まで学んだことを踏まえて、簡単な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>…
ヘッダーにあるh1はそのページの中で一番重要なものなので、特に文法に従って書くことが望ましい。 一番望ましい形は以下の通り、h1とpのセットが望ましいです。 <h1>一番重要なキーワード | 会社名</h1> <p>h1の概要、会社名などは後のほう</p> 人々が検索するときに、会社…
HTMLの要素に「border」を指定していすることで、ボーダー（境界線）をつけることができます。 ボーダーの種類ボーダーには、solid（実線）、dashed（破線）、double（二重線）、dotted（点線）があります。他にも種類がありますが、あまり使われません。 実…
CSSで背景画像を設定するには「background: url(#);」を使います。背景画像を全面に敷き詰める。背景画像を全面に敷き詰めるには、「background: url(#);」をそのまま使います。ソース body{ background:url(img/01.gif); } 背景画像を横や縦に並べる背景画…
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を用いての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>…
かにをトレースしながら、複雑な図形を描いてみます。ポイント 同じような図形は移動ツールとShift+Alt+ドラッグでコピーする。 線対称の図形は、リフレクトツールでコピーする。 拡大縮小ツールで縮小する場合基準点を変えることで、より直感的に縮小できる…
CSSでのスタイルの指定方法です。指定の方法セレクタ{ プロパティ:値;}です。セレクタはh1などのタグやID（#）、class（.）を指定します。 "{}"（波括弧、カーリーブラケット）は宣言です。この中にプロパティと値を書きます。各プロパティの最後は必ず";"（…
背景に画像など指定するとき、画像のパターンが斜めになるようにすること。何故なのかは覚えていませんが、ゲシュタルトの崩壊が関係するようで、空間が広がって見えるのだそうです。 後々、理由がわかったら追記使用と思います。
RGBカラーは色相・明度・彩度で構成されている。RGBカラーの基本 色相･･･色の違い 明度･･･明るさ 彩度･･･色の鮮やかさ CSSでの書き方。CSSでは"#"の後にR(Red)G(Grean)B(Blue)の数値を入れてあげる。数値には16進数（0~F）を使う。0が一番濃く、Fが一番薄い…
UTF-8は１文字３バイトあるが、世界中のあらゆる言語を表示できる。 人間の瞬間記憶の限界は平均して７個。なので、グローバルナビゲーションなどは７項目を基準に、二つ減らしたり増やしたりすると見やすい。日本人は５とか７が好き。 検索エンジンはh4まで…
