サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
hajimetedesign.blog77.fc2.com
前回の記事、「新旧のIEで確認できるフリーソフト」では、時代の波に乗り損ねているおっさん達に IE Tester をご紹介いたしました。 その後どうですか? 私と同じように、忙しい時に限って IE Tester が落ちまくり、「悔しいです!!」と叫び、変な顔になってしまっているおっさんはいませんか? 今回はそんなおっさんの為、嫌、そんな気持ちの悪いおっさんが近くに居て困っている方の為に、IE6 のスタンドアローン版をご紹介しておきます。 ※Vista では動かないようです。 Windows XP をお使いで、インストールは自己責任とお考えの方は続きをどうぞ♪ それでは早速 IE6 のスタンドアローン版をダウンロードしに行きましょう。 ★IE6スタンドアローン版のダウンロードはこちらから★ 海外サイトなので、念のためスクリーンショットを貼って解説しておきます。 上記したテキストリンクをクリッ
CSS で div 要素の高さ(height)を 100% にしてブラウザ・ウィンドウの高さ一杯(ページ一杯)に背景色(background-color)やボーダー(border)を適用させるための Tips。 ページ内のコンテンツが少なく、でも背景やボーダー(枠線)はページの一番下まで表示させたい時がありますよね。 デザインにもよると思いますが、必要なモノが足りていないのは寸足らずのパンツのように格好良いモノではありません。 ビジネスマン(営業マン)のスーツが七分丈では、まとまる商談もこじれてしまう可能性だってあります。 七分丈ならまだしも、膝小僧丸出しの、わんぱくそうなビジネスマンに大きな仕事を任せられるでしょうか? そのビジネスマンが一見わんぱくそうに見えて、実は仕事は滅茶苦茶出来る方だったとしても、ホットパンツでは出世も遅れるはずです。 外見より中身が重要なのは、人もWebページも
今日は定義リスト(dl タグ)内の dt と dd タグを CSS で横に並べる方法です。 いつも dt と dd を CSS で並べようとした時に『さてさて・・・はて?』となり、CSS の専門書から同じページを開いているような気がしたのでメモ。 定義リストの要素 dt と dd を CSS で横に並べる方法は幾つかあるのですが、私が最も使用している方法を記述しておきます。 dt { float : left; width : 10em; } dd { margin-left : 10em; } まず dt を float させつつ width を指定。上のサンプルソースの様に em で指定するとユーザーにテキストサイズを変更されても追従します。 ちなみに 10em は font-size が 12px なら 120px となります。つまり font-size で指定されている大きさを 1
当ブログで配布中のテンプレート「h007-3middle」をカスタマイズ中の方から以下のご質問を頂きました。 右サイドバーは問題なくテーブルリンクになってますが、左サイドバーは通常のリンク(文字にポイントして指マークが出るリンク)になってしまいます。 上記のご質問の不具合は Windows の IE6 で確認でき、発生条件はテンプレートの記事部分の拡張カスタマイズと併せ、サイドバーの背景色、フォントサイズ、記事のタイトル部分の装飾などなど、多岐に及んでいますので、必ずしもテンプレートをカスタマイズした時に IE6 で発生するとは断言できません。今回、原因の追究を数日間試みていたのですが、残念ながらはっきりとした答えは見つかりませんでした。 しかし、原因(おそらく IE6 のバグ)は分りませんでしたが、解決策は発見できましたので、上記のご質問と似たような症状が発生した際は以下の解決方法をお試
前回のエントリではCSSハックの一覧表を掲載しました。しかし CSS ハックを使うと一抹の不安が残る方も多いのではないでしょうか? 今回はそんな方達に CSS ハックとサヨナラしてもらう為の方法をご紹介します。 また、一抹の不安など何も無し!ハックとは親友だ!なんてトム・ソーヤみたいな方も、更にハックと仲良くなれるチャンスです。これからはハックとハイタッチの毎日です。 ・・・と、かなり大風呂敷をひろげてしまいましたが、私もこれから実践しようと思っている方法のご紹介です。 それでは CSS ハックが IE の為に存在している。なんて考えている方におすすめの方法の紹介です。 その方法とは HTML の head 内に特殊なコメントタグ(条件付きコメント)を使用し、IE にのみスタイルを適用させる方法です。外部スタイルシートを読込ませることも可能ですし、JavaScript を特定のブラウザにの
今日はページ内のリンクをスムーズにスクロールさせる JavaScript のご紹介です。 多くの Web ページの下の方に「ページのトップに戻る」なんてリンクがあります。通常はクリックするとページの先頭に「ドン!」と一瞬にして戻りますが、今回の JavaScript を使用することで「シュルルルルル~♪」とページの先頭に戻ると言うアクションに視覚効果を与えられます。 ユーザビリティの向上にも繋がりますし、簡単に導入できるので試してみてはいかがでしょうか? それでは早速どのような代物か JavaScript のサンプルページで実際の動きをご確認ください。 いかがでしたでしょうか? この Smooth scrolling を導入してみよう!と言う方は続きをどうぞ。 それでは Smooth scrolling を手に入れましょう。海外サイトなので念のためキャプチャを使いつつ手順を説明します。 ま
CSS でタグクラウド作りました。 既に FC2ブログにはユーザータグを簡単にタグクラウドに変身させるプラグインがあったのですが、ソースを表示させた時に JavaScript が HTML 内にガーーーっと書かれているのが、なんとなく気になったので CSS だけで作れないかな?なんて思いから生まれたタグクラウドです。 CSS だけで作ったので機能はシンプル(お粗末)ですが、HTML には最低限しかソースを増やさずにタグクラウドを設置できますよ。 つまり SEO 的に多少メリットがある・・・のかな? FC2ブログを使用中の方、もし宜しかったら「タグクラウドの簡単な CSS での作り方」でシンプルなタグクラウド作ってみませんか? ※ブログの記事数(タグの使用回数)が多い方は、この先を読む前に何が書かれていても怒らないと約束できる方だけどうぞ。 それではタグクラウドの作り方です。 まずは FC2
皆さんは CSS の position プロパティを使いこなせていますか? 私はお恥ずかしながら relative (相対指定)はたまにレイアウトの微調整で使用することはあっても、今回のテーマである absolute (絶対指定)を使いこなせずにいました。理由もしっかりあり、ブラウザのウィンドウの左上から指定することにメリットを感じていなかったからなんですが・・・ しかし、今回の記事は position プロパティの特に absolute を使いこなすための基礎知識です。 「えぇぇ!!そんなことも知らなかったの!?」と思われてしまうような内容かも知れませんが、知らなかったと言うか知ろうとしなかったと言うか・・・・包み隠さず言うならまったく知りませんでした。 XHTML と CSS の書籍を久しぶりに読み返し、目から鱗と言えるような基礎知識でした。上の文章を読み『俺も absolute 使っ
上の図を見て「ピン」とか「!」マークとかでた方は続きをお読みください。 今このページをご覧頂いている方は Mac の OSX で 10pt (10px)以上で奇麗に使える日本語のビットマップフォントが必要とされる場面に遭遇したことのある方ではないでしょうか? 私はかれこれ2年程前でしょうか、仕事でバナー制作をしている時に上記した場面に遭遇し、なんとか OS9 の頃のように大きくしても奇麗に Osaka フォント(font)を使えないものかと試行錯誤した一人です。OS9 からフォントを抜き出し OSX に入れてみたり「OSX Osaka 汚い」なんて検索ワードでネット上をぐるぐると触覚の抜けたアリのように回りました。 しかし、結局は解決できずに昨日までのらりくらりと過ごして参りました。 デザインカンプをコーダーの方に渡す時も「アンチエイリアスを切った部分がテキストで、アンチエイリアスの利いて
先日、当ブログで制作したテンプレートをご使用中の方から不具合報告を受け、その方とのコメントのやりとりから有益な情報を頂きました。 既にご存知の方も多いと思いますが、XHTML の文章型宣言である XML 宣言をソースの一番上の先頭に記述すると、IE6 では後方互換モードになってしまうバグがあります。FC2ブログのソースで言うと下のようなソースです。 <?xml version="1.0" encoding="EUC-JP"?> 私のように知らなかった方のために説明させて頂くと、後方互換モードとは、IE6 より古いバージョンの IE での CSS の解釈(後方互換モード)となり、W3C の標準仕様に従って表示するモード(標準準拠モード)とは違う CSS の解釈をします。 したがって、他のモダンブラウザと IE6 に表示のズレが発生します。 ボックスモデルの解釈の違い img 要素の padd
人様のブログをウロウロしている最中、写真・画像のサムネイルをクリックした後、ブラウザのウィンドウが暗くなり格好良く大きい写真・画像が登場するのを見かけたことはありませんか? 今回はその格好良く写真・画像を見せつける JavaScript(ジャバスクリプト)をFC2ブログで使用する方法のご紹介です。 なるべく多くの方が使用できるように、できるかぎり細かく説明いたしますので、かなりの長文になると思います。ゆっくりしていってください( ^-^)_旦~ まずは JavaScript のサンプルページをご覧下さい。 いかがでしたでしょうか? 格好良く写真・画像が表示された方は続きを読むからお進みください。 もしもサンプルページで、写真・画像をクリックしても何も起こらなかった方は、ブラウザの JavaScript の設定をご確認ください。確認のしかたはブラウザやバージョンで異なりますので、「 Java
CSS のハックが少しずつ貯まって来たので一覧表を作ってみました。 CSS ハックとは何か簡単に説明すると、それぞれの WEB ブラウザのバグなどを利用し、特定の WEB ブラウザに特定のプロパティ(設定)を適用させたり、逆に適用させないようにし、CSS 内に併記した複数のスタイルのプロパティ(設定)を、それぞれの WEB ブラウザに振り分ける技術のことです。 これからは私が使用した CSS ハックや詳細などはこのエントリで随時まとめていこうと思います。 〔追記:2007年12月4日〕 〔追記:2008年1月12日〕 〔追記:2009年7月23日〕 下のソースの赤い部分がそれぞれの CSS ハックの部分です。 スターハック WinIE4 ~ IE6 と MacIE4 ~ IE5 にだけ適用させられるスターハック。 * html p { /* for WinIE4 ~ IE6 and Mac
検索窓やテキスト入力フォームなどの input 要素に使えるデザインの小技です。簡単な JavaScript で実装できるので皆さんも挑戦してみてはいかがでしょうか? まずは下のサンプルをご覧ください。 カーソルを上の「サンプル検索窓」と表示されたテキストボックスに合わせクリックしてみてください。 どうでしょう? 検索窓にテキスト(文字)を入力可能な状態にすると「サンプル検索窓」と表示されていたテキストが消え、背景色が薄いグレイから白に変わったのが分かりましたか?また、選択状態を解除(他の部分をクリックで解除できます)で初期状態に戻ります。 なかなか地味な小技ですが、本当のお洒落とは地味なところで差がつくと誰かがどこかで言っていたような気がします・・・。 それはともかく、お洒落とは関係なく使い道によってはユーザビリティ(使いやすさ)も多少アップするのでは?なんて考えから、今回ご紹介させて頂
CSS で横のセンタリング(中央揃え)は margin : auto や text-align : center などで事足りると思うのですが、縦のセンタリング(中央揃え)は何を使えば良いかご存知ですか? 私はつい先日まで知らなかったのですが line-height プロパティで縦のセンタリングが可能です。方法はとても簡単で、ボックスの高さと line-height の値を同じにするだけで縦のセンタリングが行われます。下のソースを参考にしてください。 div.hajime { width : 400px; height : 50px;/*ボックスの高さ*/ line-height : 50px;/*縦のセンタリングの為に指定*/ } 簡単な上、Macのモダンブラウザ、Winのモダンブラウザで縦のセンタリングが適用されます。 個人的には何故か素通りしていた部分だったのですが、少し調べたらあっ
Windows のブラウザ IE(インターネットエクスプローラー)の CSS 解釈のバグで、ul タグの子要素 li タグに改行が出来てしまい謎の隙間が発生するバグがあるようです。 発生条件としては、li タグに display 属性で block を指定すると、隙間が出来てしまうようです。 解決策としては、li タグに width を指定することで回避可能です。 FC2ブログのブログテンプレートを使用中で、プラグインのメニュー内など(最近の記事、最近のコメント、カテゴリー、etc...)で、妙に行間が空いているぞ!と思った方はお試しあれ! と言うか、覚え書きです。 ちなみに、はじめてのテンプレート制作時に偶然発見したバグだったのですが、私が制作した1つ目のデザインでは li タグに block を指定しているのですが、行間に異常は見られなかったので、li タグに対して width 属性は
覚え書きです。 CSS でブロック要素に float を指定した際 margin の auto が効かなくなる(左右のセンター揃えが効かなくなる)ので px などでキッチリと指定します。 しかし、IE6 のバグで float を指定した際の margin が2倍になってしまうバグがあります。 なので、IE6 用の有名な CSS ハック(*html)を使用して以下のように回避します。 *html div#hajime { /*IE6用のハック*/ width : 450px; float : left; margin : 10px 5px; /*通常指定の1/2で指定*/ } div#hajime { /*その他のブラウザ用*/ width : 450px; float : left; margin : 10px 10px; } ●結論 IE6 はフロート食べると太るから margin は半
Mac の純正ブラウザ Safari に、CSS で font-family を指定する際は注意が必要。 Mac の Mozilla 系のブラウザ(Firefox など)は font-family : 'ヒラギノ丸ゴ Pro W4'; と指定すれば表示されるのですが、Safari は知らんぷり。そこで、フォント名を英語で指定してみると font-family : 'Hiragino Maru Gothic Pro'; 反応してくれる♪ 以下、Safari 用のフォント指定。 【ヒラギノ角ゴ Pro W3】 font-family : 'Hiragino Kaku Gothic Pro'; 【ヒラギノ角ゴ Std W8】 font-family : 'Hiragino Kaku Gothic Std'; 【ヒラギノ丸ゴ Pro W4】 font-family : 'Hiragino Maru
このページを最初にブックマークしてみませんか?
『はじめてのブログデザイン』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く