「なんとなく」を解消。z-indexを掘り下げてみた。 | バシャログ。
こんにちは。mackyです。 春なので、足元をスニーカーに変えて駅までダッシュしてみたら、ブーツでのダッシュより2分ほど早く駅に着けるようになりました。が、その分5分ほど長く寝てしまうようになったせいか、結局ギリギリです。そして汗だくです。夏にむけて、このダイエット法でいこうかと思います。 さて今日は、なにげにあやふやに理解していると痛い目にあう、z-indexについてまとめてみました。 スタックコンテキストとスタックレベル まず、重なりを自由に操るためには、スタックコンテキストとスタックレベルを理解しておく必要があります。 z-indexの意味やpositionとの併用のしかたをどれだけ知っていても、ここを理解していなければあまり意味がありません。 しかし、私は何度か説明を読みましたが、最初はほぼ意味不明。 とりあえず説明してみます。 スタックコンテキストとは ざっくり言うと、同じスタッ
width:auto;とwidth:100%;の違い＋中央寄せについて。 | バシャログ。
どうも。mackyです。 花粉症とは無縁の私は、早くお花見シーズンにならないかなー…なんて、今はそれだけを楽しみに生きています。のみたい！食べたい！食べたい！ さて今日は、その大切さ＆重要さに近すぎて気づかない、みたいな存在の「width」についてちょっと書こうと思います。 これからレスポンシブどんどん勉強していきたいという方は是非。 width:100%とwidth:autoの違い 例えばPC版のコーディングから行うとして、widthをpx指定したときなどはブレイクポイントを設けてSP版用に幅を上書きする。この流れはよくあります。共に、親要素の幅に合わせるとういう意味では同じですが、paddingやborderを指定する場合にちょっと違ってきます。 width:auto;の場合 Media Queriesをつかってwidthを上書きする場合はこちらが便利です。 上の図を使って説明すると.
nth-childやlast-childをIE8でどうしても使いたいときの代替手段。 | バシャログ。
ご無沙汰してます。mackyです。 最近、目覚めると14:00で、やってしまった…。今日はどんな言い訳をしようか…。と朝から真剣に考える「夢」をよく見ます。 「落し物を届けたのは先週使ったしな～！」と毎回言うのですが、なかなか言い訳の嘘くささもリアルで面白いです。 さて今日は、タイトルにもありますようにIE8で、nth-childやlast-childと同等の指定ができる方法について書こうと思います。 そもそも、こんなことが必要にならないようにコーディングを行うよ。と言われればそれまでなのですが、 自分の未熟さはわかっている。くそ！悔しい！でもてっとり早く何とかしたいの。という仲間たち、つづきを読んでやってください。 HTML <h3>寝坊したときの言い訳リスト</h3> <ul> <li>朝から腹痛</li> <li>道に人が倒れていた</li> <li>愛犬が逝く</li> <li>（
CSS で「吹き出し」をつくってみる | バシャログ。
こんにちは。mackyです！ 最近、何かと吹き出しを目にすることが多かったので自分でもサンプルを作成してみることにしました。 よかったら読んでみてください。 では、早速。 HTML HTMLはこの一行。 <div class="baloon">お久しぶりです。まっきーです。ここに好きなテキストをいれてね。</div> CSS：スタンダードな角丸長方形 使える環境であれば使いたい :before 。CSSもシンプルにできてしまいます。 .baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolu
displayプロパティを使ってレスポンシブウェブデザインのtableレイアウトを変化させてみる | バシャログ。
こんにちは。まだ何一つ夏を感じていないmackyです。 今日は、RWDでdisplayプロパティを使ってtableレイアウトのデザインを変化させる方法をまとめてみました。 RWDでテーブルレイアウトを定義リスト風に変化させてみよう tableタグのdisplayの値はデフォルトではtable、thとtdタグはtable-cellとなっていますが、この値をblockやlist-itemなど他の値に変えてみます。 (1) (2) (1)の状態から(2)の状態へデザインを変化させます。 メディアクエリ―を使ってブレイクポイント（480px）を設定し、その中に上書きするCSSを書いていきます。 今回はこんな感じです。 HTML <table border="1" cellpadding="5" cellspacing="0"> <tr> <th>項目A</th> <td>この文章はダミーです。</
【ツール】CSSのフォントサイズの相対指定に活躍！「PXtoEM.com」 | バシャログ。
こんにちは Latin です。いや～、ワールドカップのブラジル×ドイツ戦、凄い試合でしたね！（見てないけど） 決勝は欧州勢になりそうな予感。 さて今回は、フォントサイズの相対指定時に便利なツール「PXtoEM.com」をご紹介します。 フォントサイズの一覧や任意のサイズを出力してくれるツール「PXtoEM.com」 このツールの特長は大きく3つあります。 基準サイズからの相対サイズを一覧で表示 任意のサイズの相対サイズを出力 「px」と「em」の相互変換が可能 といった感じ。 例えば、ベースのフォントサイズが「14px」で、「20px」を指定したかった場合に、「1.429em だね！」って感じで一々、計算しなくて済むので便利です。 サイトのフォントサイズに「rem」を採用している場合にも同じで、ルートのフォントサイズを基準値とし、「em」の倍率をそのまま「rem」として使ってあげればOKで
職人技！CSSだけでつくったアイコンまとめサイト（コピペで使える） | バシャログ。
こんにちは。 今更ながら、朝スムージー始めました。mackyです。どうせすりつぶされて少なくなるんだろうと思い、目分量でいろいろ突っ込んでみた結果、 5人前くらいできてしまいました。…野菜ってすごい。 さて今日は、気分転換もかねてcssだけでつくったアイコンがいろいろ紹介されているサイトを集めてみました。 One div - The single element HTML/CSS icon database One div - The single element HTML/CSS icon database アイコンの数はそこまで多くないですが、必要最低限の情報がシンプルに整理されているUIで使いやすいなと思います。 使いたいアイコンのソースコードをzipファイルでダウンロードできるのもうれしいです。 また、表示可能なブラウザをマウスオーバーで表示してくれるのも特徴。 CSS3 Mono
スマートフォンサイトのサムネイル付メニューのつくりかた。 | バシャログ。
先日、大涌谷（別名：地獄谷）行き、極寒と硫黄の中、渾身の力で手に入れた黒たまごを食べて寿命を７年延ばしてきました。こんにちは、mackyです。おかげさまで、なんだか妙にハイテンションな日々が続いています。 さて、そんな今日は、ブログ記事などにもよく使われているサムネイル付きメニューを、前回ご紹介した、スマホサイトの矢印付きメニューをCSSのみで実装する。と合わせて使うパターンでご紹介しようと思います。 アイコン付メニューをつくってみよう。 まずはHTMLを用意します。 HTML <ul> <li><a href="#"><img src="images/thumbs.png"><strong>【JavaScript】minami</strong>JavaScriptで書くデザインパターンが気になっているので、手始めに一番よく見ているであろうモジュール・パターンについていろいろ調べてみました
スマホサイトの矢印付きメニューをCSSのみで実装する。 | バシャログ。
こんにちは もうすぐ待ちにまったGWですね。今年は、多い人で11連休とかあるんじゃないでしょうか。そんなことしたら…もう、社会復帰できる自信がないmackyです。 さて、 そんな今日は、スマホサイトのメニューの定番デザインである、 矢印付きメニューをcssのみで実装してみようと思います。 CSSのみで実装する定番の矢印つきメニュー こんな感じです。 まずはHTMLを用意します。 HTML <ul> <li><a href="#">シーブレイン七不思議</a></li> <li><a href="#">シーブレインあるある</a></li> <li><a href="#">シーブレイン3つの掟</a></li> <li><a href="#">minamiが行く横浜うまいもの日記</a></li> </ul> css * { margin: 0; padding: 0; } a { disp
2012 年バシャログ。人気エントリーまとめ [デザイナー・コーダー編] | バシャログ。
年末ですね。お正月に向けて冬眠の準備を始めた seki です。 昨日に続きまして、バシャログ。1 年の人気記事まとめをお送りいたします。 振り返ってみると、今年の流行がまるわかり！復習もかねてフムフムと読み返してみて下さい。 バシャログ。2012 年人気エントリーまとめ [デザイナー・コーダー編] 様々なイケてるUIを参考にできるサイト Google HTML/CSS Style Guide の推奨ガイドラインまとめ web高速化のためのコーダー向け圧縮ツール・サービスまとめ 【CSS】実はこんなに便利！cssのセレクタ指定方法をちょっとだけ掘り起こしてみた Illustrator の時間短縮！ウェブやチラシで使うアクセスマップの作り方 【WordPress】お問い合わせ内容も管理画面で管理できてトレビア～ンなフォームプラグインinquiry form creator フォームを改めて考え
![2012 年バシャログ。人気エントリーまとめ [デザイナー・コーダー編] | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/53143fc321ea2d6c3b8d026b6dd8433bd6a625f6/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_webdesign.png)
パートナー | WEBサイト制作 株式会社シーブレイン
Web サイト制作に必要な全工程の理解と知識 Web サイト制作に必要な全工程をワンストップサービスで提供可能。 一部の工程のみの対応でも、前後の工程に考慮した対応をします。 数百を超える Web サイト制作経験により培われた高いスキル。 効率的な制作手法による高い処理能力。 既存リソースの活用によるコストパフォーマンス オープンソースのソフトウェアやライブラリ、フレームワークなど、既存のリソースを積極的に活用することで顧客要望を実現します。 フル開発のほか、MovableTypeやWordPressなどブログシステムのカスタマイズでの対応も可能です。 データベースと連動した更新しやすい動的コンテンツや動画との連携など、ワンランク上のFLASHコンテンツを制作します。 ユーザの視点に立ち、使いやすいインターフェースデザインを設計します。 Web標準に準拠したクオリティの高いXHTML＋CS
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
HTML をシンプルに保ちつつ、ブロック要素の段組みを実現する方法 パート2 | バシャログ。
「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン
[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。
使える CSS テクニックの第 4 回は「CSS で実現するプルダウンメニュー」です。 確認ブラウザは IE7、Firefox2、Opera9、Safari3.1 です。 CSS のみでは IE6 対応が不可能ですが、IE の独自機能（DHTML）を併用することで IE6 でもプルダウンメニューを実現しています。 まずは、以下のサンプルをご覧ください。 シーブレイン コーポレート WEBサイト制作 マニュアル制作 ローカライズ 検索エンジン Yahoo! Japan Google Goo excite Biglobe 週刊少年漫画 少年ジャンプ 少年マガジン 少年サンデー このサンプルの HTML は以下のようになっています。 <ul id="pulldown-menu"> <li><a href="#">シーブレイン</a> <ul> <li><a href="http://c-brai
![[使える CSS テクニック] CSSで実現するプルダウンメニュー | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
[使える CSS テクニック] CSSで色々なカラムレイアウト（段組）を実現する | バシャログ。
第 2 回目は「色々なカラムレイアウト（段組）を実現する」です。 WEBサイトには色々なカラムレイアウトが使われています。 その中でも今回は最近よく使われている、レイアウトパターンをいくつかご紹介します。 2カラム固定レイアウト 2カラム固定レイアウトは、企業サイトなどでよく使われるレイアウトパターンです。 サンプルページ 2カラム固定レイアウトの解説 XHTMLの構造は以下のように設定します。 CSSは以下のように設定します（重要な箇所だけ抜粋）。またご紹介するレイアウトすべてで第1回記事のデフォルトリセットも使用しています。 /* ========================================================= ■wrapper ========================================================= */ d
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVG画像のHTMLでの使い方 | バシャログ。
cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。
【CSS】img画像の縦横比は元のまま、表示させたいボックスサイズの大きい方に合わせて縮小して表示させる。ついでに上下左右中央寄せで。 | バシャログ。
【書籍紹介】レスポンシブEメールデザイン マルチデバイス時代の魅せるメルマガの作り方 (WEB PROFESSIONAL) | バシャログ。