【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。
対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 「:(hoge)-child」は並び順→要素、「:(hoge)-type」は要素→並び順 ポイントはここ。 :(hoge)-child系と:(hoge)-type系では、並び順と要素の判定順が逆になります。 :(hoge)-child系はまず並び順を見て、次にそれが要素と一致するかを見ます。 :(hoge)-type系は指定の要素だけにしぼって、その上で並び順を見ます。 最後のdt、1つ目のddにスタイルがあたらなくて困った場合、 dt:last-child {
パス画像をFontに変換！「icoMoon」を使ってみた。 | バシャログ。
1月が終わってしまいましたね～！春が待ち遠しい、seki です。 今回は、今まで画像として書き出して使っていたピクトグラムなどのパス画像を、フォント形式で吐き出してくれるサービス「icoMoon」のご紹介です。一度自分で作ってみたくてウズウズしてました。詳細は以下より。 作り方について 参考サイト→http://webamb.com/web_service/773.html はい！こちらの記事にとても分りやすく紹介されています！ とりあえずその通りにやってみましょうか。 1. Fireworksでまずは元となるアイコンを作る パスツールを使ってサクサク。よくメニュー周りなどで使えそうなものを作ってみました。 無心で作りすぎたせいであまり統一性がありませんが、参考までに。 塗りは黒ベタで。もし描くのが難しいという方は、フリー配布されているアイコンから持ってきても良いかと。 もちろんイラレで作
グレーカラーが美しいWEBサイト20選！ | バシャログ。
だんだん暑くなってきて朝の駅までダッシュがしんどくなってきました seki です。 どんなサイトを作りたいですか？の質問に対し、「アップルみたいな…」と言った返答をよく耳にするようになった近年。今回は少しテーマを変えて、グレー系サイトを作る時に、色見や色の組み合わせの参考にしたいWebサイトをいくつか集めてみたのでザックリとご紹介します。 綺麗なグレー系 淡いものから濃いものまで。写真や、さし色がとても生えるタイプ。 少し青･緑がかったグレー 少々青みの強いものも含まれますが濁った青・緑～グレーベースのもの。こちらはシンプルさに、少し高級感がプラスされるイメージでしょうか。白との相性抜群。 少し黄・茶がかったもの こちらも黄・茶の強いものも多いですが、黒・灰色との組み合わせが美しい。やさしい色合い。 －－－－－－－－－－－－－－－－－－ いかがでしょう。 見比べてみても、それぞれ、微妙に濃
CSS 基準文字サイズ（px）ごとの相対フォントサイズまとめ | バシャログ。
こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。１１月１日（日）～１１月４日（水）まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ～に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何％だっけ？ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px
[使えるCSSテクニックVol.2] 第 9 回 CSS だけで実現する画像ボタンのロールオーバー | バシャログ。
第 9 回目は「 CSS だけで実現する画像ボタンのロールオーバー」です。 javascriptを使用せずに、ロールオーバー効果をCSSのみでやってみましょう。 以下のボタン画像にマウスをのせてみてください。 サンプル1. 位置をずらす XHTML <p class="sample1"><a href="#"> <img src="hogehoge" alt="ボタン" width="200" height="50" /></a></p> .sample1 a:hover { position: relative; top: 1px; left: 1px; } positionプロパティを使って位置をずらします。 サンプル2. 透過させる XHTML <p class="sample2"><a href="#"> <img src="hogehoge" alt="ボタン" width="2
Mac OS X のブラウザたち | バシャログ。
Macのブラウザといえば、それはもうSafariです。 SafariStandやPicLensといったプラグインも充実し、とても使いやすいブラウザになりました。 ですが、Safari以外のブラウザもそれぞれに独自の機能があって、使い方によってはSafariより便利かも？ 今回はそんなMacのブラウザたちをご紹介します。 シイラ http://shiira.jp/ 最新バージョン v2.2 Web Kitもの 主な機能としては「ページホルダ」「Tab Expose」「ページ遷移エフェクト」「リンクをまとめて開く」など。 体感的にはSafariよりレンダリングが早い？気がします。 わざわざインポート作業をしなくても、Safariのブックマークをそのまま利用できる点も便利です。 サイドバーにまとめられたサブウインドウもとても使いやすく、気が効いています。 Camino http://camino
[使えるCSSテクニックVol.2] CSS を使った見栄えの良いツリーナビゲーション | バシャログ。
第 6 回 は「見栄えの良いツリーナビゲーション」です。 今回は CSS と言うよりも jquery の plugin「Treeview」を使ったツリーナビゲーションをご紹介したいと思います。 実装するとこのような感じになります。 ホーム 会社案内 会社概要 コンセプト 沿革 社長挨拶 交通アクセス 採用 中途採用 中途採用情報 エントリー 新卒者採用 新卒者採用情報 エントリー 先輩の声 プライバシーポリシー お問い合わせ 設置方法 上のサンプルの設定を例に説明します。 まずサイトから「Treeview」をダウンロードします。 解凍してフォルダを置く（解凍したフォルダ名を js に変更） <head>～</head>内に <link rel="stylesheet" href="js/jquery.treeview.css" /> <script type="text/javascrip
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート3 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」「HTML をシンプルに保ったままブロック要素を段組みする方法 パート2」の応用テクニックのご紹介です。 前回までは画像の横並びの解説でしたが、今回は段組みさせるブロック要素（サンプルの場合は div 要素）の内容が画像のみとは限らない場合です。 ボックスと余白の幅の値は以下です。 HTML ソースはこちら。シンプルなソースになっています。 <div id="content"> <div class="section"> <div class="box"> <h2>会社案内</h2> <p>株式会社シーブレインのご紹介</p> <!-- /.box --></div> <div class="box"> <h2>採用情報</h2> <p>プログラマ中途採用募集中！ まずはお問い合わせください。</p> <!-- /.box -
私が使っているおすすめアドオン Firefox3 対応 | バシャログ。
今回は私が使っているおすすめアドオン(Firefox3対応)をご紹介します。 仕事で使う Web Developer [日本語版] Web 制作に欠かせないアドオン。日本語対応版もあります。 ColorZilla ブラウザ上で使っている色を調べる時に便利。 MeasureIt WEB ページ制作中に「ここ何ピクセルだっけ？」という時に便利なアドオン。 ページ閲覧に便利 All-in-One Gestures マウスジェスチャ機能を追加するアドオン。 進む、戻る、タブの複製、画像の拡大など、多くの追加機能をマウスジェスチャに割り当てることができます。 Speed Dial Operaのスピードダイヤルを模したアドオン。いつもチェックしているページを登録しておくと便利。 Tab Scope タブにマウスを乗せるとサムネイルが表示され、リアルタイムにプレビューすることが可能です。 Cooliri
黄金比を簡単に計算してくれる FLA測定 | バシャログ。
黄金比の計算を自分でやるのは手間がかかって大変ですよね。 今回は値を入力するだけで、簡単に黄金比率を計算してくれる優れもの「FLA 測定ツール」をご紹介します。 使い方は、thismanslife の「phiculator」メニューをクリックし、右サイドバーにある「Try it online」をクリックして起動させます。 簡単操作説明 起動すると以下のような画面になります。 調べたい値を入力 小数点を省いて計算してくれる 小数点まで計算してくれる 結果が表示されます。 他にもある黄金比計算ツール こちらは両方表示してくれます。 Golden Ratio Calculator Webデザイン黄金比計算ツール ダウンロードして使いたい方はこちら。 「黄金比」を計算する専用電卓「金卓」v1.00 （フリーソフト） AdobeAIR上で動作するWEBアプリケーション 黄金比・白銀比計算ツール「ZA
[使える CSS テクニック] CSSだけで実現するPhotoアルバム | バシャログ。
集中連載「使える CSS テクニック」も第 9 回になりました。 今回は CSS だけで画像ギャラリーを作ります。 画像の挙動は、（IE6 でも同様の表示ができるように）a タグの擬似クラスだけで設定しています。 サンプル XHTML <div id="album"> <ul> <li><a id="photo01" href="#slide"><em><img src="css_album/img/photo01.jpg" /></em><span>日本大通り駅</span></a></li> <li><a id="photo02" href="#slide"><em><img src="css_album/img/photo02.jpg" /></em><span>指路教会</span></a></li> <li><a id="photo03" href="#slide"><em><i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リンゴひとくち食べたFirefox | バシャログ。