Web うぇっ部でタグ「CSS」が付けられているもの

WEBサイトに表示させるサイトマップの作成するwordpressプラグインの紹介です。

 

サンプル sitemapgene-150x150.jpg

dagondesignのサイトから「sitemap-generator.zip」をダウンロードしてきて、解凍。
wp-content/pluginsフォルダに解凍したフォルダ「sitemap-generator」をアップロードしたらOK。
wordpressの管理画面→プラグイン画面で有効化する。
設定画面に行って「DDSitemapGen」をクリックlanguageでjapaneseに設定して下のほうのUpdate optionsをクリックして更新すれば日本語になります。

あとは、生成されたサイトマップをページなり投稿に表示させればOK。

<!-- ddsitemapgen -->
と書けばサイトマップが表示されます。

生成されたサイトマップ全体が.ddsg-wrapperというクラスで囲まれているので、
.ddsg-wrapper絡みでCSSを書けば見栄えの変更も簡単にできます。
filter: alpha(opacity=35);
-moz-opacity:0.35;
opacity:0.35;

IE向けに
filter:alpha(opacity=透明度);
100・・・100%(不透明)  0・・・0%(透明)  35・・・35%

Firefox向けに
-moz-opacity:.透明度;
1・・・100%(不透明)  0・・・100%(透明)  0.35・・・35%

safari・opera
opacity:透明度;
1・・・100%(不透明)  0・・・100%(透明)  0.35・・・35%
 

ちょっとしたロールオーバー効果にも使えて便利です。


例:
a:hover img {
  filter: alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}

今回は手短ですいません・・・

Internet Explorer には、特定IEバージョンだけにスタイルシートを適用する方法として、コンディショナルコメントと呼ばれる機能が用意されている。

CSSハックとは・・・ちゃんとweb標準に準拠してコーディングしているのに表示が乱れるWeb標準への準拠度が比較的低いブラウザ(特にIEが酷い)でもきちんと表示されるように主にブラウザのバグを利用してCSSの対処を実現すること。。。
だがしかし、バグを利用しているのであまり使わないほうがいい!ということでコンディショナルコメントを使ったりします。

皆さまこんにちは。急に寒くなってきたと思ったら昨日今日暑いですね。風邪などひかないように早寝早起きを!(出来たらいいな>_<)

今回は、簡潔ですいません。新着情報の日付とタイトルなどを定義リストdt,ddで書いた場合に通常ブラウザのデフォルトでは、改行・インデントされるが、横並びにさせる方法です。

 

 

センター寄せページが短い時にFirefoxで微妙に動く

センター寄せページを作る時に、長いページになればスクロールバーが右に現れる事をご存知ですか?

ではページが短い時はどうでしょう?

IEはスクロールバーがでない時でも、スクロールバーもどきが表示されまが、Firefoxでは完全にスクロールバーが表示されません!したがってページが短い時に若干その分ずれて表示されます。

これはIEとFirefoxとの使用の違いで出る現象なので問題ありませんっと言うのは簡単なんですが、一応対策方法があるので紹介します。

お問い合わせなどのフォームを入力する時、「名前」は全角、「電話番号」は半角・・・などと入力する項目ごとに入力モードを変更するのは面倒ですよね。

というわけで、今回は「フォームの入力モードを自動で変える」ちょっとしたcssのtipsを紹介します。

 

 

こんにちはmacを買おうか本気で検討中の渡辺です。今回は、javascriptを使った小ネタです。

 

mac OS X風のdocメニューをwebサイトに実装する方法をご紹介します。

 


1枚ものナビ

最近のデザインはALLCSSでのデザインが増えてきました。今日はナビゲーションを1枚で作成する方法を載せます。最近はこのやり方がお気に入りです画像をこまごま切らなくて済むし、配置もCSSなのでサイズだけ合せておけば絶対ズレる事はありません

まず、width、heightを測り、photoshopやillustratorで作成しましょう

bar.gif

CSSではul、liを使って配置します。liとliのaにはdisplay:blockで幅を縛っておくことを忘れずに★

こんな感じになります。↓

        <ul>
            <li id="a"><a href="A.html"><em>A</em></a></li>
            <li id="b"><a href="B.html"><em>B</em></a></li>
            <li id="c"><a href="C.html"><em>C</em></a></li>
            <li id="d"><a href="D.html"><em>D</em></a></li>
            <li id="e"><a href="E.html"><em>E</em></a></li>
         </ul>

ここでのポイントは、liに設定されたidです。画像を切っていないので、リンクする際画像の位置を指定してあげないといけません。

まずはグレーのナビの部分です。ここは通常の表示です。今回のリンクボタンがwidth:150px、height:25pxとした場合、(この設定はliとliのaにしておいてくださいね)画像の位置の基準は左上になので、最初の画像Aはbackground-position で0px 0pxとなります。右にいく度に横の位置指定を125pxずつ増やして最後は500pxになります。縦の位置は変わらないので0pxで大丈夫です。

次はli a:hoverです。マウスをのせた時の切り替わりです。今回は下の青いナビに切り替わります。縦の位置が変わるので、グレーのナビを追い越した25pxの設定になります。横の位置はhoverする前と一緒ですね。

私は今回、liとliのaにno-repeatを設定するのを忘れてしまいました。座標の位置が合っていれば特に問題はないですが、CSSの認識が変わってくるのでちゃんと設定しておきましょう。

それではこの辺でバイバイ