サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
digibot.jp
CSSnewbleでCSSのみでアコーディオンメニューを作るという面白いアイデアが紹介されていました。特に難しいこともなく簡単な記述でアコーディオンメニューっぽいものを作ることが出来ます。実際にどのような動作をするのかはCSSnewbleでのサンプルを見るとわかると思います。今回はこれをページのレイアウトに利用した全画面バージョンを作ってみました。 使用したhtmlとCSS <div id="accordion"> <div id="part1"><h1>div#accordion div#part1</h1><p>CSSのみでアコーディオンメニュー</p></div> <div id="part2"><h2>div#accordion div#part2</h2><p>CSSのみでアコーディオンメニュー</p></div> <div id="part3"><h3>div#accordio
以前書いていたエントリーなのですがバックアップを取っておらず、データの移行が難しいので少しずつ昔のデータを編集しながら再エントリーしていきたいと思います。CSSの記述にも昔のエントリーを見ると間違えている部分が多いので修正できるチャンスでもあるわけです。というわけで過去に書いたdl,dt,ddで綺横並びを再エントリー。 基本といえば基本の定義リストである「dl,dt,dd」を利用しての単純なリストを作ってみます。 <dl class="list"> <dt>名前</dt> <dd>ヤマナカヅオ</dd> <dt>性別</dt> <dd>男性</dd> <dt>年齢</dt> <dd>52歳</dd> <dt>趣味</dt> <dd>カメラとネットサーフィン以外特に・・・</dd> </dl> dl.list { border-top: 1px solid #ccc; line-height
« とりあえずのiMac使用感 | メイン | dl タグで擬似テーブルの続き » dl dt dd タグで擬似テーブル テーブルから移行の際に良くある複数行2列の表の記述にテーブルを使っていた。せっかくCSSでオールデザインするんだから、きっちりと定義リストを用いてテーブルっぽいものを書きたいものだ。標準の見栄えでも見れないこと無いけど何のためのCSSや!というわけでとりあえずテーブルに見えるようなDLタグを使用してのCSSを作ってみました。当然のごとく化石のようなブラウザは無視してます。 <div class="table"> <dl> <dt>目的</dt> <dd>CSSできちんとテーブルらしいものを作ること</dd> <dt>使用タグ</dt> <dd>DL, DT, DD</dd> <dt>確認したブラウザ</dt> <dd>IE・OPERA・ネスケ</dd>
« 検索ページのカスタマイズ | メイン | ウェブデザイナーの役割 » 恐怖のエラー678 とあることから友人の妹夫婦のインターネット接続を頼まれたことがあり、現場へと夕方頃向かった。あの恐ろしいエラー678にここで遭遇しようとはこのときは知るよしもなかった。状況を聞いてみるとインターネットに接続できない、とのこと。(ちなみにOSはXPで、回線はぷららのADSL)よくあることだがこれがなかなかOSや接続回線・環境・プロバイダなどによって難しさが大きく変わる。とりあえずネットワーク環境・モデムなどを調べてみるがとりわけ異常も無い。話を聞いてみるとつい昨日までつながっていたと言う。 どこにも異常の無いままどんどん時間だけが過ぎていく。心配げな顔で見守る夫婦とその友達。このままでは私の力量が疑われてしまう。いつもならでは「パソコンを持ち帰って調べてみます」、とさっさと帰ってしまうのだが、このと
2004年08月10日 PHPのショートタグとXML宣言 XHTMLにPHPを書く場合、行頭のXML宣言がPHPタグとみなされ、エラーが出てしまう。これはサーバー側のphp.iniファイルに記述してある、short_open_tagがOnになっているから起こる問題。<?これが<?phpでなければ開始できないようにすればよい。 回避するためには <?php echo '<?xml version="1.0"'; ?> と、phpのPrint命令でxml宣言を書き出すか、 .htaccessファイルに以下の一行を追加すれば解決。 php_flag short_open_tag off 前者の場合だと全てのファイルに書き込まなければならないので、実用性の低い回避法。 後者の場合も、今まで使用していた<? $var ?>といった記述が出来なくなるので注意が必要。どちらにせよ最新のphpはセキュリ
MySQL ABのホームページにてMYSQL4.0からSource Downroadよりmysql-4.0.13.tar.gzをゲットしましょう! http://www.mysql.com/downloads/ 解凍後、ディレクトリに移動してコンパイル&インストールをします。configure のcharset指定で sjis (Shift_JIS)を指定していますが、 EUC-JPにしたい場合は ujis にしてください。デフォルトのインストール先は/usr/localですが、prefix=にて/usr/local/mysqlを指定することもできます。 (かなりディレクトリが増えちゃうのでそれを嫌って?/usr/local/mysql などのディレクトリにするひとも多いみたいです) # tar zxvf mysql-4.0.13.tar.gz # cd mysql-4.0.13 # ./
apacheプロジェクトのダウンロードページからhttpd-2.0.46.tar.gz をダウンロードします。解凍してconfigureを設定します。 enable-shared=yesで DSO (Dynamic Shared Objects)を有効にします。DSOについては@ITを参照してください。 以下のコマンドで/usr/local/apache2/にインストールされます。ここではWebDAVの使用を考えていますので --enable-dav=yes を使用していますが必要ない人は外してください。 # tar zxvf httpd-2.0.46.tar.gz # cd httpd-2.0.46 # ./configure --enable-shared=yes --enable-dav=yes # make # make install # vi /usr/local/apache
2004年12月24日 角の丸いボックス よくあるネタですが、自分なりにCSSでの角丸ボックスを作ってみた。DIVタグを3つも使用しているので抵抗ある人は多いかも知れませんが、枠を作って「この中にはなんでも放り込める」という状態を作りたかったのでこういう形になってしまった。一応クリスマスイブということで丸各画像を含めたファイルセットをダウンロードできるようにしています。 大雑把に分けると「round-top」と「round-body」と「round-bottom」の3つ。「round-top」と「round-bottom」の間には空の「span」タグを挿入してます。 で....この「span」に高さを設定してブロック要素に変えてます。真中の「round-body」には背景色を指定して余白を左右丸角の高さ分(ここでは10px)取っています。 ★HTML<div class="round-t
ここに本文が入ります。 pタグなどのマージンが発生するタグを使用するとレイアウトが崩れてしまう場合もあります。 そんな時は .round-body p { margin: 0px; } などでPタグを制御してあげましょう。 ちなみにここで使用している画像ファイルは角丸部分を透明にしているので背景色を好きな色に変えることが出来ます。 変更する場合は面倒ですが、3つのDIVで設定している色を変更してやってください。
2013年05月01日 成長 今朝、5歳になったばかりの一人娘といっしょに、歩いて保育園まで行った。 道中、はしゃいで元気いっぱいに走り回る娘。そうしている間に転倒し、尻餅をついた。よほど痛かったのか、大きな声を張り上げ、目から大粒の涙をポロポロとこぼして泣いた。 私は娘に近づいて抱き上げ、いつものように頭を撫でながら声をかけた。 なんてことはない、いつもの光景。しかしこのとき突然、何とも言いがたい寂しさを胸中に感じた。 もしかしたら今後、このように泣きじゃくる娘をもう見る機会がなくなるのではないか、そう思ったのだ。 泣き顔は子供を象徴する表情の一つだと思う。顔を大きく歪め、一心不乱に泣く。 親として、そこに子供の成長を求める一方、いつまでもその子供らしさに触れていたい、と思う気持ちもある。 今この瞬間に存在するこの子には、もう二度と会えないんだ。 そう思うと今というこの瞬間がとても大切な
2005年07月05日 CSSよくあるミス 最近CSSで気になるミスというか注意点。 言わずもがな数字から始まるIDやClassは禁止 背景画像の位置指定で、left/center/right/bottom などと px指定、%指定などを混ぜてはいけない。IEやFirefoxではOKでもOpera,Safariなどでは乱れる。 よくある背景画像をタイトルにするテクニックでは、text-indent にて吹き飛ばすテキストがリンクの場合、text-decoration:none にしておかないと、Firefoxにてリンク下線が画面上に伸びることがある。というかなるべくなら飛ばさずに、spanで内側を囲ってdisplay:noneで消したほうがいい。使用場所によってはIEで変な表示になることも... 画像をhoverしたときにbackground-positionでずらす方法はIEでち
« ペンタブレット | メイン | 半島を出よ(上) » IEでhoverをa以外に効かせる 乏しい読解力で海外サイトを廻って見つけた久しぶりのCSSネタ。おなじみのa:hoverはIEの場合 a 属性以外には効果が無い(ZSPC:hover対応表)これを有効にするスクリプト「csshover」というスクリプトを配布している「Peterned」というサイトがある。javascriptでのhoverもいいけど一括指定でhoverが使用できる点から、こちらのほうが便利かなと...。 というわけでIEのみがターゲットということもあり、読み込みのほうもいつもの外部読込形式ではなく、IE独自の「behavior」を使う。CSS一枚に記述するだけで事足りるので楽チン。Bodyに behavior: url("xxx.htc") という形でhtcという形式のファイルを読み込ませる。詳しくはこちら(CYB
このページを最初にブックマークしてみませんか?
『WEBFACTORY :::』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く