今日はドリームウェーバーを使って新規作成とCSSの設定講習しました
画像は前に作ってあったホームページのものを使用しました
メニューは画像のボタンではなく文字で回りや背景に色を入れてボタン風にします
参考ページ
プーディーハウス
このボタン風の設定が意外と面倒です
UL LIを使用しますが
画面の中央にしたい場合はULの幅を指定する方法やいろいろな設定方法があります
今回はULの幅を設定する方法にしました
それぞれのLIの幅を設定して余白等の合計を計算してULの幅を指定します
エキスプローラーのver6とver7以降やオペラで若干の誤差があります
今回はエキスプローラーのver6で見れるようにしました
なかなか頭のいい人ですぐに理解していました
今度の金曜までに１ページ作成してくるそうです
たのしみ～～～～～～!!
新しくホームページの注文が入りました
画像の変更は終わって現在ホームページの型枠作りです
メニュー項目が
少ないのでどうしようか考え中です
左にメニューを置けばいいのか？中央に置けばいいのか悩み中です
犬の画像を小さく中央に15個並べるのに
ulとliを使おうとしていますが
ulをページの中央に持ってくるのが難しい
ただ、単に中央に揃えて下に並べるのは簡単ですが
liをfloatを使って横並びにしてそれを中央に揃えるのは難しい
ul liの中央揃えのCSS
今回は一般的な方法を記述します
html
<div id="menu">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
</ul>
</div>
CSS
<style type="text/css">
<!--
.#menu {
position: relative;
}
#menu ul {
list-style-type: none;
position: relative;
left: 50%;
display: inline;
float: left;
}
#menu li {
display: inline;
float: left;
margin-right: 5px;
margin-left: 5px;
position: relative;
left: -50%;
}
-->
</style>
サンプル
※
ここで必要なこと
ul
ポジション(位置）を相対的に指定すること
位置を50％で指定すること
li
ポジション(位置）を相対的に指定すること
位置を-50％で指定すること
ulをページの中央から初めてliをページの左端に設定することで
相殺して中央揃えになるという不思議なcssの設定です
他にもulの幅を指定して中央に揃える方法もあります
これだけではなく他にもいろいろと方法があるので
試してみてはどうでしょうか？
※備考
リストのスタイルはなし
liのマージンを5ピクセルとってます
[フリーソフト] ブログ村キーワード
[年賀状] ブログ村キーワード
lightbox2.04ダウンロード先
lightbox2.04を使ったページ
年賀状一覧ページ
今回は拡大表示をしてから次の画像に移動できるようにしています
設定内容
ダウンロードしてきたlightbox2.04を解凍して
JSフォルダーとCSSフォルダーを表示したいページのフォルダーに置きます
<head>～</head>
の中に以下を追加します
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js?load=effects">
</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/builder.js"></script>
<script type="text/javascript" src="js/scriptaculous.js">
</script>
<link rel="stylesheet" type="text/css" href="css/lightbox.css">
画像の設定は
設定1
<a href="jpeg_big/c003.jpg" rel="lightbox" title="カラー
003"><img src="jpeg_small/c003.jpg" alt="年賀状デザイン2010" /></a>
設定2
<a href="jpeg_big/c003.jpg" rel="lightbox[年賀状]"
title="カラー003">
<img src="jpeg_small/c003.jpg" alt="年賀状デザイン2010" /></a>
設定1、2共通説明
rel=”lightbox”をつける事によって拡大表示してくれます
設定1、2の違い
lightbox[年賀状]にすることによって『年賀状』というグループにできます
グループにすると拡大表示した時に画像にマウスを持って行くと
『NEXT(次に)』と『PREV(戻る)』が表示されそれぞれの画像に移動する
ことが出来ます
今回はすべての画像を『年賀状』のグループにしました
備考
title=”カラー003はつけてもつけなくてもいいですが
つけた方がいいと思います
知り合いの会社のスキャナーのセットアップに行きました
パソコン等の設定は1時間3000円です
セットできたら頂きます
なぜならパソコンの設定は本職（プロ）ではないからです
まぁくんの店ではお金を1円でももらう事＝プロの仕事としています
今回の内容は
ノートパソコンにepsonスキャナーを設定する作業です
スキャナーを設置するのはUSBを繋げばすぐに使えるのですが他の外部機器を接続していると繋がらない事がたまにあります
セットするノートパソコン内容
os vista USB2ヶ所
外部モニター
外部キーボード(USB)(USBハブ付き(２ヶ所)
光学マウス（USB）
スキャナーepson
※USBのハブを使用しないと全部設置できません
今回の作業は1時間しか時間がなく
不具合の究明しかできませんでした
作業工程
まず、デバイスマネジャーをチェック
今まで繋いだりはずしたりしたUSBハブのドライバーがぎっしり!!
本体からUSBの機器を抜き
USBのドライバーをすべて削除
エプソンのスキャナーを接続
正常に動作
マウスを接続
正常に動作
外部キーボードを接続
動作せず
外部キーボードが原因
原因内容の把握
デバイスの競合 外部キーボードとスキャナー
デバイスの競合 外部キーボードに接続されているUSBハブとスキャナー
ノートパソコンの電源供給量（これはクライアントからの話による推測)
今回は時間が無かったのでスキャナーを使う場合はキーボードをはずして使用してもらう事に
その他作業
スキャナーの取り込み方の説明（epsonソフトとフォトショップ）
社員の方にCSSのアドバイス
前回設置したdellのバックアップの確認
結局1時間半の作業になりました
金額4500円
次回、スキャナーの設置に行く予定
ただ、キーボードの接続を変えると正常に動作するかもしれないので簡単な作業になる予定です
※思っていてもうまく行かないのがパソコンとCSSです
お好み焼きDining komugi様(四條畷)
メニューに変更がありましたので変更しました
新たに焼酎の価格を載せました
IE6以外では正常に見れます
なぜかIE６では焼酎のメニューが正常に見えません
テーブルタグを使えば簡単なんですけどね
今はCSSの勉強の為CSSのみでがんばります
原因不明
floatを使用して＜ul＞タグを４カラムにしようとしています
＜li＞のタグで4カラムにして、＜br＞タグで改行という手もありますが
まだ、挑戦していません
いろいろやり方はあると思いますがすっきりしたソースを目指す為＜br＞のタグでの改行は最終手段にしたいと思います
＜div＞でfloat left right で２カラムに分けて
その中は＜ul＞でfloat left rightにしてみましたが駄目でした
IE６嫌い!!
リサイクルはんこ
PCページのみで近日中にモバイル(携帯）ページも作成します
ページには今まで買取したはんこを漢字と振り仮名とサイズで表にまとめてます
売れてすぐに更新できるかわかりませんががんばっていきます!!
まぁくんの店ではいらなくなったはんこを買取しています
買取価格は1本30円 販売価格は1本100円です
書類を持ってきてはんこを押すだけなら50円です
はんこの供養も承ります
今回はCSSとテーブルタグを使って3カラム構成で作成しました
<li>
の中にテーブルタグを入れました
まとまった感じに出来上がってます
お好み焼きDining komugi様(四條畷)
メニューに変更がありましたので変更しました
新たに焼酎の価格を載せました
IE6以外では正常に見れます
なぜかIE６では焼酎のメニューが正常に見えません
テーブルタグを使えば簡単なんですけどね
今はCSSの勉強の為CSSのみでがんばります
原因不明
floatを使用して＜ul＞タグを４カラムにしようとしています
＜li＞のタグで4カラムにして、＜br＞タグで改行という手もありますが
まだ、挑戦していません
いろいろやり方はあると思いますがすっきりしたソースを目指す為＜br＞のタグでの改行は最終手段にしたいと思います
＜div＞でfloat left right で２カラムに分けて
その中は＜ul＞でfloat left rightにしてみましたが駄目でした
IE６嫌い!!
朝からCSSを使ってホームページ作成しました
ベースは先に作った四條畷美容院SHINE様です
背景画像を無くしてメニューの飾り枠を変更しラインを入れて見ました
ラインは後で変更する予定です
四條畷 お好み焼き&Dining komugi
お昼からCSSを使って
四條畷 美容院shine様のホームページ
を作成しました
今回はお洒落な感じを目的に作成です
月々500円でこんな感じのホームページを作成していこうと思います
飾り枠と背景を作成しました
自分的にはいい感じの物が出来たと思います
やっぱりネックはfloatとマージンです
これだけは試行錯誤しないとなかなか理解できないです
ページ数は2枚
トップページと印刷用のクーポンのページです
メニュー等の価格が変更になれば随時変更していく予定です
罫線を作成しましたが今回は使用していません
次は四條畷 お好み焼き＆Dining komugi様のホームページを作成します
若干違う雰囲気にして今度は罫線を使おうと思います
内容
3カラムを使ったホームページにしようと思っています
お洒落に作成したくいろいろ考えて悩んでます
お洒落に作るのは難しい
お洒落って!!って感じです
あまり凝った物を作成するとホームページ作成を500円でできないって言うのが本音です
まずは
左、真ん中、右でブロックを作成し左ブロックfloat:left 真ん中ブロックfloat:left 右ブロックfloat:right
でホームページを作成しましたが残念な事に真ん中のマージンが合わない
マージンを取ると右が下に落ちてしまう
左ブロックfloat:left 真ん中ブロックfloat:left 右ブロックfloat:leftでもあまり変わらず
仕方なく
まず二つのブロックに分けて左のブロックをまた二つのブロックに分ける方法にしようと考えています
まだ、作成していません
やっている最中に新たな収穫
当然と言えば当然だが
ホームページ内のリンクでidを付けた所に簡単に飛べます
リンクの設定
地図に行かせたいなら
＜div id=”map”＞を作成
＜a href=#map target=”_self”＞地 図＜/a＞
これでページ内移動ができます
他のページからのリンクも
ページhtml#mapで目的ページに移動してそのページの地図に移動することができます
背景をに枠をつけるホームページを作成しました
今回は額縁風の枠です
3段で上枠・真ん中・下でそれぞれの画像を入れました
上はノーリピート真ん中はｙ軸にリピート下はノーリピート
でも上の画像だけが1ピクセル程ずれているような気がします
ソースを見たけど不自然なところや間違いは無かったです
う～～～ん
こうなるとわからないことだらけになってしまう
ほんと難しい
５００円ホームページ作成ももうすぐ１年が経ちます
おかげさまでお問い合わせも多くありがたい限りです
今回１周年企画としてサンプルページの変更ともっとお客様にホームページを持ってもらう為に３ヶ月間のサービス期間を実施しようと思っています
３ヶ月経ってやっぱりホームページが要らない方はキャンセルできるシステムです
これでもっと簡単にお金をかけずにホームページが持てる様になるのではないかと考えています
CSSの使い方も昨年よりはスキルアップしたと思います
ホームページサンプルが出来次第アップして情報を載せます