CSS

2/1 CSSでポップアップ画像を表示

CSS

CSSのみでポップアップ画像を表示 サムネールはfloat: left; サムネールはposition: relative; ポップアップ画像はposition: absolute; サムネールの上にサムネールの左上原点「1×1px」に設定したポップアップ画像を、positionで配置する。(画面では見え…

12/6 リキッドレイアウト

CSS

Webページの表示領域の幅がある程度変更されても従来のレイアウトを維持できるようにする手法のこと。 幅をパーセンテージ(%)で指定するので、ウィンドウ幅に合わせて自動的に幅が調整される。 2カラムリキッド #wrapperはposition: relative;(相対位置…

11/28 サンプルレイアウト

CSS

<dl>~</dl>を横に一列に並べる dtにmargin-rightで並びましたが、いいんでしょうか?? <html lang="ja"> <head> <meta charset="UTF-8"> <title>無題ドキュメント</title> <style type="text/css"> <!-- body { sont-size: 0.8em; line-height: 1.8; } dt { float: left; margin-right: 20px; } --> </style> </head> <body> <h3>新着情報</h3> <dl> <dt>2011 11/20…</dt></dl></body></html>

11/19 MY PHOTO ALBUM レイアウト

CSS

MY PHOTO ALBUM 課題サイト 大分構造を理解できるようになってきたと思うが、先生のものと比べると無駄なタグがあったりするので、もう少し整理しなければ・・・・・HTML/home <html lang="ja"> <head> <meta charset="UTF-8" /> <title>MY PHOTO ALBUM</title> <link href="css/base.css" rel="stylesheet" type="text/css" madia="screen,print"> </head> <body> </body></html>

11/14 ANTICA レイアウト

CSS

ANTICA <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta charset="utf-8" /> <title>ANTICA</title> </meta></head></html>

11/1 「Wants Cake」 IE6対策 &再アップ

CSS

CSS IE6対策 拡大しないようにリセットに下記指定する。 { margin: 0; padding: 0; zoom: 1; /*IE6対策*/ } センターにするためにbodyに下記指定する。 body { text-align: center; /*IE6対策*/ } 文字もセンターになってしまうので、containerに下記指定す…

10/25 formとtable

CSS

formのHTML表記 <form>〜</form>がひとつのフォームとなる。送信形式、送信先等の指定 <form method="post" action="maito:xxx@xxx.net" enctype="text/plain" id="myform"/> method="post" データの送信形式を指定する。 一般的には、CGI等のプログラムへ送信することになる。 POST(フォームのデータを本文として送信。一度に大量のデータ</form>…

10/24 Dreamweaver/positionでレイアウト

CSS

position positionはボックスの表示位置を決める配置方法を指定する。 static(静的)スタティック スタイルを何も指定しないときの配置方法。 垂直方向に順に配置されて行く。 relative(相対的)リラティブ ブラウザの左上を基点として、left, topの数値を…

10/14 Photoshopで縦ボタンを作る

CSS

サイズ 横200px 縦50px*5 シェイプツールの長方形ツールで数値指定して長方形を作る。 文字、グラデーション等を決めたものを、グループ化して複製する。 キーボード矢印で1px移動、shift&矢印で10px移動。 再度自宅で作ったけど、やはり切り抜きの段階で…

10/13 Illustratorでボタンを作る

CSS

サイズ 横800px 縦60px Illustratorの線分は両側に太るので、線を使う場合は必ず線分をアウトラインにする。 長方形を作るときは線の位置を指定の内側にする。 日本語は、「カーニング:オプティカル」で自動文字詰めをする。詰める部分は拗促音。拗音=節が…

10/11 背景画像の設定&Photoshop

CSS

背景画像 必要な設定 ●background-color(背景色)●background-image(画像の配置) background-image: url(画像の住所)=images/画像名●background-repeat(画像の繰り返し) background-repeat: repeat; /* 画像の繰り返し */ background-repeat: no-repeat…

10/8 ☀ ナビゲーションブロック練習

CSS

Pattern-02バランス見ながら作るので1時間ほどかかる。特に横並びがいろいろ迷う。 やはりborderと#nav ulにoverflow: auto;を指定するとMacのfirefoxでは駄目だけど無視です。

10/7 ☀ ナビゲーションブロック復習

CSS

<li>と<li a>の関係 <li a>は<li>の上に透明の枠が乗っているイメージ。 <li>には、幅、高さ、背景色を設定し、その他の設定は<li a>で行う。 <li a:link〜hover>は<li>のpaddingの部分はもってこないので、 必ず<li a>でpaddingを設定す…

10/5 ☀ ナビゲーションブロック

CSS

ナビゲーションブロック 各ページへのリンクをまとめたものでリンク集のひとつである。 サイドバーでよく使う。 項目を箇条書きで列挙している。 縦並びメニュー <ul> <li><a href="#">HTML+CSS</a></li> <li><a href="#">JavaScript</a></li> <li><a href="#">PHP</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">ActionScript</a></li> </ul> #navに指定 font-size、font-weight、横幅…

10/4 ☼ CSS ナビゲーションと擬似クラス

CSS

昨日のおさらい ボックス内にボックスがある場合、マージン値の大きいボックスのマージンが採用される。 wrapperにmargin-bottomを指定すると、fotterのclear:bothはいらない。「clear: both」も「wrapper { overflow: auto margin-bzottom:」も役割は同じ。…

10/3 ☀ テストまとめ

CSS

テスト 以下のレイアウトを作成しなさい。 * XHTML1.0 Strict * CSSエンベッド * 文字も入れる * 色・サイズ自由 body background-colorは白の場合でも#FFFFFFで必ず指定する。#header 上下左右全てにmargin10px指定する。widthは780px。#fotter clear: bo…

10/1 ☀ 1カラムレイアウト

CSS

練習1 XHTML <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>

9/29 ☼ Illustratorカニを描く/CSS基礎続き

CSS

HTMLとXHTMLの記述上の違い XHTML バージョンアップごとに複雑多様化するHTMLを、XML(メタ言語。メタ言語は言語を作る言語であって文書やデータを記述する言語ではない。)に基づいて書き直した実装の1つで、HTMLの後継仕様となる。 記述の内容に自由度のあっ…

9/27 ☀ Illustratorペンツール/CSS

CSS

Illustratorいろいろ キーオブジェクト 「複数ののオブジェクトを選択したあとで、固定したいオブジェクトをクリックしてキーオブジェクトとする」大変便利でございまする。 大昔独学で勉強したようなしなかったような・・・ 先生の講義はいろいろと見直す事…

9/28 ☼ CSS/Illustratorペンツール

CSS

CSS基礎 【セレクタの種類】 IDセレクタ:1ページ内で同じ名前を1回しか使用できない classセレクタ:1ページ内で同じ名前を何度も使用できる 名前の付け方は非常に重要! 【CSSによるページデザインの流れ】 文章構造を考える。 意味づけ(マークアップ)する…

9/26 ☂ 定義型リスト、表組、Illustratorなど

CSS

定義型リスト <dl>Definition List(定義リスト)の略 <dl>〜</dl> の間に<dt>で定義する用語、<dd>で用語の説明をする。 <dl> <dt>リンゴ</dt> <dd>赤くて丸いバラ科の果物</dd> <dt>ミカン</dt> <dd>黄色くて皮の薄い果物</dd> <dt>メロン</dt> <dd>黄緑色で表面に溝があるウリ科の果物</dd> </dl> リンゴ 赤くて丸いバラ科の果物 ミカン 黄色く</dd></dt></dl>…