ディザとは: 画像加工 Photo Shop ヘルプから

Web 画像でディザを制御するには
  1. 画像を開き、「ファイル」 → 「Web 用に保存」を選択
  2. 「Web 用に保存」画面で、各項目にそれぞれ設定をしていく(数値を入力したり、など)
  3. 「ディザ」テキストボックスに数値を入力する、または、ディザメニューの矢印をクリックし、表示されたスライダをドラッグして好みの仕上がりに調整する
  4. 「ディザ」のパーセント値をかえる事で、どのくらいの度合いでディザを画像に適用するか、を調整出来る
    例: 高い数値を指定すると、
    画像のカラー数が増え、細かなとこまで鮮明になる
    ただし、ファイルサイズが大きくなる
    《 結論 》 画像の色を再現するのには必要最小限のパーセント数値を入力して、圧縮したり、画質を丁度いいくらいに(最適の状態=最適化)すること!

(2013/5/18)

本家内import.css読み込みをOteage専用import.cssに変更

本家スタイルシート読込まないのの解消にトライ
対象ページ:
お手上げindex.html
リンク現状:
<link rel="stylesheet" href="http://allen.bufsiz.jp/common/import.css" type="text/css">
<link rel="stylesheet" href="common/oteage.css" type="text/css">
変更後:
<link rel="stylesheet" href="common/import.css" type="text/css">
<link rel="stylesheet" href="common/oteage.css" type="text/css">

結果: 変化無し(2011/3/11)

覚える! Z-indexの値、2(数値大)手前表示 > 1 (数値少)背面 StylesheetStyleBook P.194

サイドnavigationの子navi ulが広告下へもぐり込む状態解消にトライ

対象ページ: book/book.html他、くるくるウィジェットが目次下にあるページ

  1. 子ナビcss(base_sidenavi.css)にz-index:100指定してみる。#navigation ul ul{z-index:100;}→効果無し
  2. htmlの広告<object>タグにstyle="z-index:1;"を足してみる→効果無し
  3. <object>からz-indexを消して<embed src=">の方に書いてみる→効果無し
  4. 子ナビcssの#navigation ul ulからz-indexを消して<embed>への記載だけにしてみる→効果無し
今日の結論 - ムダな努力はしない。(2011/3/11)

Googleトラッキングコードを足したらStyleSheetが反映されなくなった

Googleトラッキングコードを<head></head>内に書き加えたら、スタイルシートが反映されずHtmlだけの表示になってしまった。
「更新」押しても表示変わらず。

ブラウザのキャッシュを空にしてみた、が、変化無し。
Html内の<link rel="stylesheet" href="〜>等の記述も変なとこなし。
原因不明。精神衛生上、原因追及を断念し放置を決断。(2011/3/7)

(2011/3/8)知らんまに勝手に直ってた。解決。ブラウザの具合を疑う。
今後は表示くずれの際はブラウザ/パソコン立ち上げ直すこと

Htmlの<img >を見えないようにするには

参考: スタイルシート上級レイアウト初版P.147「テキストを表示させないようにする」

a img {....}でheightを"0"に指定 + Imgの高さ分上パディングのをつけて画面外に出しすことで、実際には表示されないようにする。Overflow: hidden, Paddingにはボッスクモデルハック/**/必ず!!

<detailmore>内のテキストが<content>からはみ出てる。width指定用確認↓

#head {	position:relative; width: 568px; height: 180px;
	margin-left: 10px;
	background: url(baseimg/bgbanner_tgreen110px.jpg) 358px 20px no-repeat;
}
/* For hiding img ------------ */
#head {	position:relative; width: 573px; height: 180px;
	margin-left: 5px;
	background: url(baseimg/bgbanner_tgreen110px_nz.gif) 460px 20px no-repeat;
} /* end Hiding img ---- */

#logo{ position : absolute; top: 3px; left: 0px;
	width: 570px;
	height: 110px;
	margin-bottom: 30px;
	background: none; /* Original base_base ----- */
	background: url(baseimg/logo_nz.gif) 0px 0px no-repeat;
}
/* For hiding img ------------ */
#logo a img{
	 overflow: hidden;
	height : 0 !important;
	height /**/: 33px;
	padding-top: 33px;
} /* end Hiding img ---- */

#logo a imgのheightとpadding-topが、本と同じ「33px」のままになってる。要確認。(2011/3/5)

Text-shadow

2011.1月現在、Safariのみ対応。

h2 { color : black ; text-shadow : 4px 4px 3px red ;}

レイアウト

#content 直下の要素にトップマージンがあると、#headと#content間にすきまが開く。

修正例

<div id="content">
　<div class="detail">
　　<h4 style="margin-top: 0;">見出し</h4>

このページのトップへ