Category Archives: HTML

[CSS]画像を敷いてテキストを任意の位置に表示させる

564bed646e82e4fa3756c6184c9dede12-300x197

キャンペーンサイトなどに有用 こちらも忘れがちなので、メモ。 デザインがやたらに凝っていたりする際にはざくっと背景に画像を敷いてテキスト要素は position:relative; や position:absolute; で好きな所に表示させるのが楽。 手抜きに見えるが、ソースもスッキリ奇麗になるのでいいと思う。 ソース CSS #main .dn {di … 続きを読む


画像を敷いてテキストを任意の位置に表示させる

[CSS] ブロック要素の横幅を要素の内容に沿わせる

2483f0064bddab8d410f96fadd9ee5ea-300x53

テキストの周りにborderを指定する際に有用 毎度忘れてしまうので、メモ。 <p>や<div>といったブロック要素のデフォルトでは横幅が100%になってしまうので display:inline; を指定して中の要素に応じて伸縮するようにする。 ソース 右図の様なスタイル例 HTML <p id="c_note01&q … 続きを読む


ブロック要素の横幅を要素の内容に沿わせる

セルにうっすらと白い枠があるテーブル

使い道 セルにうっすらと白い枠があるテーブル おおざっぱなので余計な属性も入ってます。 サンプル CSSがバッティングしてちょっと変になってますが・・・ お好みの条件を選んでください。 ジャンル、ブランドを選んでください ジャンル 選択してください Stylish Elegance Princess Lady Luxury Glamorous Sweet M … 続きを読む セルにうっすらと白い枠があるテーブル

[JS] jQueryを使用して画像のロールーバー(オンマウスでの画像切り替え)

jQueryを使用して画像のロールーバー(オンマウスでの画像切り替え)をします。 IE各バージョンにも対応しているので安心して使えます。 ※jQuery は http://scriptsrc.net/ からコピーすると便利です。 JSのソース ファイル名は任意で構いませんが、仮に「img_link_filter.js”」とします。 jQuery. … 続きを読む [JS] jQueryを使用して画像のロールーバー(オンマウスでの画像切り替え)

[GoogleMap] 住所から直接地図画像を表示する

staticmap

使い道 GoogleMapAPIをこねくり回す程でもなく、座標を入力も手間かけず、APIキーも不要。そんなものぐさ仕様。 また、画像なので軽い、おまけにマウスホイールでページをスクロールすると、 GoogleMapでいきなり拡大に切り替わるのも防げる。そんなメリット。 大雑把にしか出ない場合があるのはご愛嬌。 表示例 東京都現代美術館:〒135-0022 東 … 続きを読む [GoogleMap] 住所から直接地図画像を表示する

ファイルのアップロード

説明 ファイルを日付時分にリネームしてアップロードします。 一番最後のドットだけをファイルタイプの判断材料にすることでファイル名にドットが幾つもある場合でも正確な判断をします。 inputエリアの「クリア」ボタンはおまけ。 アップしたファイルを一括削除するスクリプトもあります。 ソース 入力 <!DOCTYPE HTML PUBLIC "-/ … 続きを読む ファイルのアップロード