1. HOME
  2.  > -
  3.  > スポンサーサイト

スポンサーサイト

  • 2016.11.05 Saturday
  • -
  • Permalink
    • -
    • -
    • by スポンサードリンク

一定期間更新がないため広告を表示しています

  1. HOME
  2.  > XHTML/CSS
  3.  > Webデザインとブログを書くのが好き

Webデザインとブログを書くのが好き

  • 2009.04.19 Sunday
  • 03:42
  • XHTML/CSS
  • Permalink
    • comments(2)
    • trackbacks(0)
    • by ポンポン

最初、私ポンポンは、携帯サイトでホームページを作って遊んでいました。そこで少しずつHTMLを覚え始めたんですが、段落と改行のタグを一番に覚えて、もちろんCSSなんてものは当時知らなかったので、文字の色を変えたり、大きさを変更するのは、fontタグを使っていました。しばらくしてBlogデビューしたわけですが、そのとき初めてCSSに触れました。

  1. HOME
  2.  > XHTML/CSS
  3.  > いずれ試してみたいCSS

いずれ試してみたいCSS

  • 2009.04.18 Saturday
  • 12:23
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

これは驚きです。ボーダーを使って三角を書いているんです。不思議ですね。コメント&トラックバックに使えそうなCSSです。

そのほかにもブログで使えそうで便利なCSSを探してみました。

  1. HOME
  2.  > XHTML/CSS
  3.  > IE8でPianoテンプレートが一部崩れます

IE8でPianoテンプレートが一部崩れます

  • 2009.04.18 Saturday
  • 03:56
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン
IE8バグ

このスクリーンショット画像は、公式テンプレートのPianoをIE8でとったものです。
サイドバーの位置が下にずれています。position:relative;が怪しそうですが、解決しません。

マイクロソフトさん頼みますから新たなバグを増やさないでください。

  1. HOME
  2.  > XHTML/CSS
  3.  > img要素をCSSでロールオーバー

img要素をCSSでロールオーバー

  • 2009.04.10 Friday
  • 10:02
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

XHTMLでimg要素で画像を表示した場合CSSのbackgroundプロパティを使ってロールオーバーさせるのは、無理っぽいなと諦めていたんですが、CSSで実現するスマートなロールオーバー[to-R]を読ませて頂き、JUGEMのパワーリードの部分でimg要素をCSSでロールオーバーにチャレンジしてみました。

img要素を使って画像を表示させるメリットは、代替テキストが使える点があるのと、CSSでテキストを非表示させるプロパティを使わないでいいのがメリットです。CSSの背景に画像を用意する必要があるので、どこでも使うのは少し無理があるのがデメリットですが、メニューリスト等決まった場所で使うには、アクセシビリティの観点からもこの方法のメリットがありそうです。

  1. HOME
  2.  > XHTML/CSS
  3.  > JUGEMをXHTML1.0 Transitionalで99点になりました

JUGEMをXHTML1.0 Transitionalで99点になりました

  • 2009.02.15 Sunday
  • 21:48
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

少しずつですがテンプレートを改造し、ほしいBlog Partsもなるべく付けずに我慢し、やっとトップページで99点を取得しました。 変更箇所は数え切れないほどで検索しては、修正の繰り返しで気の遠くなる作業でしたが、良かった、嬉しいです。 しかし合格したのは、トップページのみです。

個別の記事まで、チェックするのはもっと骨が折れてしまいます。

この本が参考になります。


  1. HOME
  2.  > XHTML/CSS
  3.  > 見栄えを数ピクセル単位でこだわる

見栄えを数ピクセル単位でこだわる

  • 2009.02.15 Sunday
  • 03:13
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

初期設定のブログテンプレートのまま記事を書いていると文字と画像の並び方や高さ等の気になる部分が幾つも出てきます。

画像をフロートで回り込み指定したときの画像とテキストの上辺が揃わなかったり、YouTube等のFLASHを埋め込むときに下部に余白が付いたりと、ほんの数ピクセル以内のことですが、キッチリデザインしたい人にとっては、気になるところです。

これらのズレはCSSでmargin:0;padding:0;を使いリセットするだけでは解消できません。
このブログにも使っているCSSを紹介します。

  1. HOME
  2.  > XHTML/CSS
  3.  > CSSを一部変更しました。

CSSを一部変更しました。

  • 2009.02.12 Thursday
  • 05:30
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

変更はIE7のページズームを使ったときにレイアウトが崩れる可能性に対しての対策と、
動画埋め込みも際に使うobject&embedで埋め込んだ際、下部に余白みたいなのができるのを削除する対策と、
テキストエリア内で文字サイズが変更できないブラウザへの対策です。

  1. HOME
  2.  > XHTML/CSS
  3.  > YouTubeを埋め込みの際、使用変更で表示されるタイトルと評価を消す

YouTubeを埋め込みの際、使用変更で表示されるタイトルと評価を消す

  • 2009.02.12 Thursday
  • 02:04
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

最近お気付きの方も多いと思いますが、TouTube動画埋め込みタグを使ってBlogに埋め込む際に、タイトルと評価の星印が動画の上に白い文字が付いています。

YouTubeの上の文字を何とかして消したい。YouTubeの上の文字を消す方法を発見したんで紹介します。

標準の埋め込みタグ(タイトルつき)

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/BhpsMCkRUjI&hl=ja&fs=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/BhpsMCkRUjI&hl=ja&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344">
</embed>
</object>

機械翻訳っぽいページしか見つからなかったんですが何とかそれっぽくして試してみたところ上手くいきました。>>YouTube動画のタイトルやエンベデッド評価:どのように表示を避けるために

  1. HOME
  2.  > XHTML/CSS
  3.  > CSSの基本的なことが学べるサイト集

CSSの基本的なことが学べるサイト集

  • 2008.12.31 Wednesday
  • 15:28
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(0)
    • by ポンポン

CSSの基本的なことは自分は、書籍やWebのホームページ作成支援サイトやBlogカスタマイズを教えてくれているサイトやBlogを読んで覚えました。
まだまだ知らないこともたくさんあると思いますが、基本的なテキストに関するプロパティとかは覚えたつもりです。あともっと覚えなければいけないのは、BOX組のpositionレイアウトです。対応しない古いブラウザ向けのhackだとかまるで覚えていません。さっさと古いブラウザを使っている人達は、新しいブラウザにバージョンアップしなさいといいたいですが、誰が何を使おうと勝手ですから基本的には、何もいえませんからね。

新しいブラウザが出たら出たで大変なんですが、古いブラウザへの対策のほうが難しいです。
少しの狂いは目をつぶってあきらめることにしています。

このBlogでこだわっている所があるんですが気付いてもらっていたらうれしいんですがいかがでしょう。
それは、文字サイズです。サイズだけでなく、文字に関しては、こだわりみたいなのがあります。Webでは紙と違ってディスプレー上の文字を、特に長時間、長文を読み続けると疲れやすいです。ですから目に優しい色やサイズ、行間などには気を使わなければなりません。

こまめな改行とかもそうですね。小さい文字がびっしりでとても読む気がしないサイトやBlogも時にあります。それでも文字サイズがブラウザで変更できればいいんですが、IE6以下ではピクセルで文字サイズ指定すると固定になりブラウザで文字サイズが変えれません。困ったもんです。

  1. HOME
  2.  > XHTML/CSS
  3.  > テストHTML

テストHTML

  • 2008.04.18 Friday
  • 14:08
  • XHTML/CSS
  • Permalink
    • comments(0)
    • trackbacks(3)
    • by ポンポン

このエントリーはBlogを書くとき(X)HTMLを使う方の為に書いています。

Blog内で使う(X)HTMLを1つのエントリーで確認出来たらいいと思いこのエントリーを書くことにしました。

JUGEMテーマ:コンピュータ
Access Ranking
ブログパーツ
Search this site.
Calendar
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< December 2017 >>
Categories
Selected entries
Recent comment
Recent trackback
Profile
Recent
Recent
現場のプロから学ぶXHTML+CSS
現場のプロから学ぶXHTML+CSS (JUGEMレビュー »)
益子 貴寛,堀内 敬子,小林 信次,千貫 りこ,伊藤 学,山田 あかね,西畑 一馬
Links
Software
カラメル
Sponsored Links
Mobile
qrcode
Others
Powered
  • みんなのブログポータル JUGEM

pageup