96's blog

WEBサイト制作科 6ヶ月コース

CSS

CSS13(ロールオーバー)

CSS

ブログ・Webデザイン初心者の勉強「ロールオーバー」 jQueryを使わなくても、CSS3でロールオーバーで画像を拡大・透明化できる。 HTML5でインライン・ブロックレベルの概念がなくなったので、divをaタグで囲むことができる。 サイト HTML <htmllang="ja"> <head> <metacharset="utf-8"> <title>ロールオーバー</title> <linkrel="stylesheet"href="style.css"></linkrel="stylesheet"href="style.css"></metacharset="utf-8"></head></htmllang="ja">…

CSS12(CSS3Generator)

CSS

web上でボタンや背景の材料がつくれる。

CSS11(ナビゲーション部分などでの文字の非表示方法)

CSS

visibility:hidden;や-999emなどを使わない方法。 display:block; /*表示領域をブロックにして、*/ white-space:nowrap; /*改行はさせないで、*/ text-indent:100% ; /*文字の長さ分右にずらして、*/ overflow:hidden; /*ずれてはみ出た部分は表示しない。*/

CSS10(CSSシグネチャー)

CSS

複数ページのCSSを1つのCSSファイルで管理する場合、それぞれのページのbodyに個別のid名を振ることでstyleを分けることができる。

CSS09(復習)

CSS

<htmllang="ja"> <head> <metacharset="utf-8"> <linkrel="stylesheet"href="css/style1.css"media="all"> <title>確認テストCSS01</title> </head> <body> <divid="container"> <divid="header"> <p>ここにheaderが入る</p> <divid="nav"> <ul> <liid="home"><ahref="#"><span>ホーム</span></a></li> <liid="food"></liid="food">

CSS08(positionの使い方、form)

CSS

positionの使いどころ sidebarとは別に、headerやfooterにテキストリンクを複数並べるときに使われる。 今回は、headerの右端にテキストリンクを置く。 position指定するためにdiv id="headerInner"を設定。その中にテキストリンクをulで設定。 headerを基準…

CSS07(positionを使ったレイアウト)

CSS

positionが使われる場面 自由に位置指定できるので、ワンポイント的に使う。 実際のサイトでは、重要な項目に対して要チェックマークを重ねて使うなど。 紙媒体的な使い方。 CSSの記述 リセットのために記述するtext-algn:center;は、IE6対策。IE6では、#con…

復習(4)リストCSS06 ナビゲーション(ボックス横・Sprite)

CSS

ナビゲーション(ボックス横並び) リストを横に並べるには、float:left;を使う。 レイアウト構造に例えると、リスト全体を包むulがwrapperの役目で、その中に入っているliに対してcontentのようにfloat:leftを使って横に並べる。 よって、ulに対してはoverf…

CSS05 背景画像、ナビゲーション(ブロック)、ナビゲーション(CSS Sprite)

CSS

背景画像 background-repeat: repeat;画像を繰り返し並べて表示。ブラウザの初期設定。 background-repeat: repeat-x;横方向に繰り返し表示。 background-repeat: repeat-y;縦方向に繰り返し表示。 background-repeat: no-repeat;繰り返さずに1枚だけ表示。…

CSS04

CSS

CSSレイアウトについて追記メモ リセットCSS htmlもリセットしているケースもあるが、しなくてもいい。 paddingを指定する時は、widthの値がpaddingの分を引いているか注意。 widthを指定しない状態では、その要素が取れる最大の幅で表示される。 float要素…

CSS03

CSS

リセットCSS ブラウザは自動的に各要素の周囲に空きを入れて表示するので、思いどおりに表示させるためには、最初に各要素の周囲の空きをすべてなしにする設定をしたあとで(リセットCSS)、各要素へ位置の指定をする。 従来は、全ての要素の空きをリセット…

CSS02

CSS

フォントの指定(2013年7月現在) bodyで指定するフォントを先生が検証。 以下の3フォントをこの順番で記述すればどの環境にも対応できる。 "Hiragino kaku Gothic ProN" Meiryo sans-serif ブログ「Web初心者の勉強法」の「font-family/font-sizeとline-he…

CSS01

CSS

絶対パス・相対パス 絶対パス webサーバーを経由してファイルを見つけにいく。 相対パス 今あるフォルダからファイルを見つけにいく。 下の階層へは名前を指示。例./img/01.jpg(./は今あるフォルダ。省略して「img/01.jpg」も可) 上の階層へは名前は不要。…