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

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

CSS

横ナビゲーション

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>…

floatを解除する手法

CSS

floatを解除する手法 floatを解除する手法のclearfix と 次世代のレイアウト(外部リンク) 2013年6月20日 kojika17.com

floatを使った回り込み

CSS

floatを使った回り込み 「回り込み」という言葉は、インラインレベル要素のfloatに適用されます 例えば、p要素内の先頭の文字と同じ扱いの画像に「float」を設定すると、それに続く p要素内の文字が float している画像の後ろに続いて並ぼうとします。それを…

横ナビゲーション

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

HTMLでリストの記述 箇条書きで表現する <body> <div id="container"> <h1>リストの装飾</h1> <ol> <li>枠線をつける</li> <li>縦の項目を線で区切る</li> <li>ボックスに影をつける</li> <li>文字に影をつける</li> <li>リストの行頭マークを消す/変更する</li> <li>角を丸くする</li> </ol> </div> </body> @Charset="UTF-8"; /* reset ---------------------------------- *…

文字の囲みと表の枠線

CSS

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

書体指定とリセットCSS

CSS

適切なフォントファミリー 日本語の書体指定で表現したい 日本語の場合、フォントメーカーの制約から自由な選択は出来ません 2017年2月現在の設定方法 iOSにはProNしか入っていません(初期設定は、W3) ヒラギノ角ゴの英数字が読みにくいという考え方もあり…

CSSでレイアウト - 演習

CSS

ボックスレイアウト実践 - 基礎演習 style要素をエンベッドして、以下の問いに答えなさい CSS01 h1要素「CSSの使い方」を記述し、赤色に表示されるよう設定しなさい CSS02 CSS01の記述を、背景色「青色」・文字色「白色」に変更しなさい CSS03 CSS02の余白を…

ボックスモデル

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