CSS

position レイアウト

position: abusolute; position: abusolute;が設定された要素は通常の配置として扱われるのではなく、「基準ボックス」というものを基点として自由に配置することが出来ます。 ①絶対配置したい要素にposition: absolute;を設定する #content { width: 100px;…

リキッドレイアウトの作成

作成の際に使用したCSS @charset "utf-8"; /* reset */ html,body,div,h1,h2,p,ul,li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul { list-style: none; } /* body */ body { backgroun…

box-shadow text-shadow

box-shadow 枠や画像に影を付けることが出来ます。 box-shadow: A B C D 影の色; A = 水平方向の距離 B = 垂直方向の距離 C = ぼかし距離 D = 広がり距離 text-shadow 文字にも影を付けることが出来ます。 text-shadow: E F G 影の色; E = 水平方向の距離 F …

ナビゲーション

ナビゲーションの復習 ・li要素の横並びはfloatを使う。 ・floatを使ったらoverflow:hiddenを指定する。 ナビゲーションの文字を隠す ・右にずらす white-space: nowrap; text-indent: 100%; overflow: hidden; ・左にずらす text-indent: -999em; ・そのほ…

background: url

background: url(~~) no-repeat left top; left = x軸 top = y軸 画像がどれくらい動いたかを入れる。 左上が画像の起点となるので、基本的には画像は左側に動くので「ー」になることが多い。

hover時のレイアウト崩れ

hoverの時にborder-bottomをすると liの下に線が付いてしまいレイアウトが崩れてしまいます。 liの中に線を入れるとレイアウトが崩れません その時に必要なのが、line-heightとheightです。 #nav li { height: 50px;} #nav li a { line-height: 47px;} #nav …

縦リンク+2カラム

縦リンクと2カラムの復習でした。 出来なかったとこ ・display: block; をどこに入れれば良いかわからなかった。

ルール

HTMLでのルール ・<strong>と<h1>は一緒に使ってはいけない。 すでに<h1>は強調タグなので<strong>はいらない。 ・<img src="">で直リンクは禁止。 http://~~はネットの住所扱いなので、勝手に人の住所を使ってはいけない。 16進数 普段の生活で使っているのは10進数であり、9の次に0へ戻り</strong></h1></h1></strong>…

横並びのリスト

ポイント ・liではなくてli a にborder指定をする。 ・line-height や text-alignは liに指定する。 ・ul にはレイアウト幅を入れる。 ・floatには必ずwidthを指定する。 ・display: block; で幅全体をクリック出来るようにする。

文字を隠す

3種類の文字の隠し方 HTMLには文字を入れておきたいがレイアウト的には邪魔なので消しておきたい時に、背景と文字色を同色にして見えないようにするのは検索エンジンはマイナス評価をします。 ではどうすれば良いのでしょうか。 ・visibility: hidden; レイ…

<dt>と<dd>を横並びにする

<dt>と<dd>を横並びにする 文字サイズを16px、幅を300pxとして何もいじらないと こうなります。 dt要素にfloat: left; と clear: left; の両方を指定すると ddがdtと横並びになります。 dtの下に文字が来てほしくないって場合は、margin-leftでddの文字分だ</dd></dt>…

span

webデザインの勉強 のように部分的に色や大きさなどを変えたいときには HTML <p>web<span>デザイン</span>の勉強</p> CSS p span { color: #F00; } となります。 いじりたい部分を<span></span>で囲む!

2カラム

今日は軽く触れただけなので予習みたいな感じで float:~とdisplay:inline; どちらも横並びにする際に使うことが出来ます。 何が違うの? →inlineを使うと各カラムがインライン要素となるため、marginやpaddingが使えなくなる。(整える方法はある) 優先順位…

CSS

<div id>と<div class> 復習をしているときにhtmlで<div id>の部分を<div class>に変えてやっていたらCSSに入力したことが何も反映されなくなってしまった。 どうしてかと思って調べているうちに、どうやら<div id="~~">とした場合はCSSでは#~~とするらしく、 <div class="~~">とした場合は .~~としなければならない。 CSSのreset</div></div></div></div></div></div>…

復習

土日は基本的に復習したことを書くので同じことを書くこともあります。 HTML 枠組み 成績 名前2000年2001年2002年 retail50点100点30点 見ないでも上手く作れた! HTML リンク webデザインを勉強するのです|きつね target="_blank"とするとサイトに移動する…

1カラムレイアウトの練習で学んだこと

text-indent 2枚目の画像の1行目が1文字左側にずれました。 text-indent : -1em; を使うことにより1行目を1文字分左にずらしています。 text-indent: 1em; だと右側に1文字分ずれます。 画像の横並び <p class="center"><img src="~~" alt="~~"><img src="--" alt="--"></p> とやると真ん中に画像が2つ横並びになります。

CSSの疑似クラス

疑似クラスの種類は6種類あるのだが本日学んだのは4種類 link(未訪問) visited(訪問済み) hover(カーソルがリンクに重なったとき) active(リンクに対してアクティブな瞬間) これらには記述する順番があります。link→visited→hover→activeの順番です。 この4…