Tag Archives : CSS

jQuery 3 でfadeInとfadeOutが使えない対策CSS - 2018/08/15(Wed)
ドラクエ攻略FAQ（https://www.dqfaq.com/）のデザインをBootstrapを使って更新しようとしています。せっかく新しくするのだからBootstrap4をもとに作成しているのですが、そのバージョンではjQuery3系が利用されています。そして、jQuery3ではfadeInとfadeOutが効かず、使えなくなっていることに気づきました、今更ながら。ということで、なんとか「fadeInとfadeOutが使えなくなった」問題に対処しようと思い、はじめはjavascript...
ウェブサイト作成にあたりよく使うサイトのまとめ - 2013/06/29(Sat)
LZ77 JavaScript CompressorJavaScriptの圧縮。結果として難読化される。/packer/JavaScriptの圧縮。コメント、改行、タブ・スペースの削除だけならこちら。HeartRails Capture | サムネイル画像／PDF ファイル作成サービス縦・横のサイズを1px単位で調整可能な、ウェブサイトのスクリーンショット自動作成サイト。YUI 3Yahoo!'s next-generation JavaScript and CSS library.「CSS Reset」と「CSS Fonts」は大変便利。Google Libr...
CSS list-style-imageの挙動 - 2013/06/26(Wed)
リスト(ul,li)を使用すると、ul要素で表示される「・」(IE、Fxデフォルト)を画像に変えることができます。CSSプロパティの list-style-image を使えば解決…しそうなものですが、IE6.0とFirefoxでは表示の挙動が異なります。もっと具体的には、画像の位置が異なります。...
CSS widthとheightはどこを指すか - 2013/06/26(Wed)
スタイルシート (CSS)において、width、heightはどこからどこまでを指しているのか。…ということに迷うことが多かったため、図にしてみました。...
ソースコードをハイライトする google-code-prettify の設置方法 - 2013/06/22(Sat)
この「高密度商業地域」のように、HTMLやCSS、JavaScriptのコードをブログに掲載する際、単純に<pre>タグで囲うだけでも良いのですが、ソースコードの可読性を上げたり見た目をカッコよくしたいと思うことが稀によくあると思います。世の中には同じようなことを思う方がたくさんいるわけで、いわゆるテキストエディタのようなかたちでソースコードをハイライトし、可読性を高めてくれるツールが存在します。その手のツールで...
ブラウザとの境界面に影（シャドウ）を付ける方法 - 2013/06/21(Fri)
以下の画像の通り、コンテンツとブラウザの境界面にに影（ドロップシャドウ）を付ける方法です。ちょっとしたところで、あまり目立ちはしませんが、こういうふうに影をつけるだけで、立体感がでてかなりいい感じになります。...
IEでネガティブマージンをした際にボーダー等が消えてしまうときの対処方法 - 2012/07/26(Thu)
Internet Explorerでネガティブマージン（maring-top: -10px等）を指定した際に、その部分が消えてしまう場合の対象方法の備忘録です。例えば、「bordre: 1px solid #000; margin-top:-5px」の場合は、上側のボーダーが消えてしまう場合、などです。（１）単に重なりあいの問題なら、z-indexを追加する。（２）その要素に「position:relative;」を追加する。（３）それでもダメなら、「zoom: 1」を追加してhasLayoutをtrueにする。...
iモードブラウザがJavaScript、Cookie、リファラに対応＋α - 2009/05/20(Wed)
NTTドコモが2009年夏モデルに18機種を発表しました。例によって、ソニーエリクソン携帯（SOシリーズ）は発表されなかったので、SO902から買い換えることはなさそうですが、ホームページを作る側からすると重大な変更が発表されました。iモードブラウザがJavaScript、Cookie、リファラに対応するということです（iモードブラウザの機能拡充について）。また、ページ内のテキストがコピーできるようにもなるとのこと。...
DOCTYPEとCSSの大文字・小文字 - 2008/03/12(Wed)
HTMLを書くときに、まずその先頭でDocument Typeを宣言します。 たとえば、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> などです。 ある程度違いは理解していたつもりでしたが、今回、ここではまりました。 DOCTYPE と CSSの関係です。...
IE6でhoverとmax-width - 2008/03/07(Fri)
ホームページ（ウェブサイト）を作成するとき、デザインの面でInternetExplorer6(IE6)がa要素以外でhoverに対応していないこと、max-width、min-widthに対応していないことに不便を感じることが多々あるかと思います。 hoverについては、a要素を使うべきではないところにでもa要素を使うことで何とかしのげますが、あまり良いことではありません。 max-width、min-widthについては、JavaScriptを使えば対応可能ですが、多少の...
擬似フレーム - 2006/11/19(Sun)
前回の「フレーム(frame)の使用について」で述べたように、今回は擬似フレームについて。擬似フレームとは、フレームの最もよい点である「その他のフレームに無関係にスクロール」をさせつつ、「フレーム内の個別のページの URL はブラウザに表示されない」という問題を解決するものです。使用するものは、CSSとJavascriptです。...
IEで文字が消えるバグ - 2006/09/14(Thu)
先日も書いたのですが、IE(Internet Explorer：インターネットエクスプローラ)で紅葉テンプレートを表示したとき、何故か文字が消えてしまうという減少が発生しました。原因は、IEのバグ。背景色(background)を指定したブロック要素Ａ内に、フロートした要素Ｂがあるとき、ブロック要素Ａ内の文字列が消える、というもの。→背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)。背景色を指定したブロック要...
himawari_3col_popについて(2) - 2006/07/19(Wed)
ブログの説明部分が２行になった場合の対処方法を解説します。※「himawari_3col_pop」テンプレートの紹介記事はこちら。...