トップページのタイル画像をCSSで画像を丸く切り抜く | ゆーそうとITブログ〜WordPress・Xserver・アイキャッチ画像作成ツール〜(旧:ゆうそうとITブログ)
CSSで画像が丸く切り抜けるということを知ってちょっと試してみたくなりました。今のトップページは正方形に画像を切り抜いていますが、CSSで丸く切り抜いてみます。 丸く切り抜くCSSの指定 CSS – 画像を丸く切り取る こちらのサイトを参考にさせていただきました。今のトップに表示している画像は200×200ピクセルの大きさなのでその大きさの丸に切り抜きます。子テーマの style.css に /* 丸く切り抜く */ .maruImage200 { width: 200px; border-radius: 200px; -webkit-border-radius: 200px; -moz-border-radius: 200px; } を追加しました。 とりあえず今のトップを置いたまま、確認したいので「[ryus_another_post_link id=3554]」の方法で確かめてみます
position:fixedで、左端を親要素基準にする
メモです。 CSSでposition:fixedを指定した要素の左端を、ブラウザ基準ではなく親要素基準にする方法を知りました。 もしかしたら常識的な事なのかもしれないのですが、つい最近はじめて知ってビックリ。まさに目からウロコでしたｗ やり方は簡単で、親要素にwidthを指定してmargin:0 autoなどで中央寄せにし、子要素はposition:fixedした上でleftを指定しない(left:autoと同じ)。これだけです。親要素からの距離は、margin-leftで指定すればよいわけです。これで、ブラウザサイズに影響されないで、ある要素の隣にぴったりと追従する(ように見える)サイドバーとかボタンが作れるわけですね。こんな単純な事に今までに気づけずにいたとは。 HTML↓ <body> <div id="parent"> <p id="child">Fixed</p> </div>
スマートフォン・タブレットの振り分けをどう考える？
デバイスの振り分けをどう考えるか、 ということについて書いてみたいと思います。 今回は、PC/タブレット/スマートフォンと振り分ける場合の参考です。 パターンは4パターン。 ちなみにiPad/Garapagosが出たてくらいまでは、画面解像度とUserEgentで判定して振り分けていたみたいなんだけど、 iPadはもはや次のモデルでは2000px以上の解像度であるし、 今後のモデルがどんどんと高解像度化されることを考えると、少しキリがない感もあるよね。 ただ、高解像度化されても画面サイズは変わらないわけだから、フォントと画像サイズは気にかけなければいけないかもしれないねえ。 1)Media Queriesで分ける もっとも一般的なやり方。IEの対応だけ気をつけないと。 2)Javascript + UserAgentで振り分けてリダイレクト先を分岐 そもそもHTML側を分けておくという考え
【CSS】iPadだけにCSSを適用する方法:</gecko>：げことじ。：日常からWEBまで：
結論から言うとjavascriptでUserAgentを参照して振り分けるしかない。 linkやcss内の@mediaでどうにかなるもんだと思ってましたが。 <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" /> どうやら↑では”iPadオンリー”は無理です。 結局UserAgentを見るしかない。 var iPad = /iPad/.test(navigator.userAgent); if(iPad){ //iPadだけに適用させたい記述 } 長くなるので無理な理由、検証、iPadだけにcssを適用させるjsは以下に。 目次 最初に調べたエントリー linkタグのmedia属性で判別する方法 landscapeモード
HTML/CSS テンプレート集まとめ - Cube Lilac
サイトのデザインを変更しようかと思ったのですが，自力でデザインを考えるのは限界があるのでフリーの HTML/CSS テンプレート集をざっと探してみました．尚，どのサイトが人気なのか分からなかったので，各種ソーシャルメディアのカウントを取得して併記してみました．海外サイトばかりなので，SBM としてははてなブックマーク以外に Delicious のカウントも取得しています． 掲載されてあるデザインはまったく見ずに，サイトの使いやすさ（と言うか「広告の少なさ」かな）だけからの感想ですが，個人的には http://www.solucija.com/ が使いやすいかなぁと言う気がしています． URL Delicious Hatena Twitter Facebook 1 http://www.oswd.org/ 24,170 951 471 1,002 2 http://www.freecsste
リストを横並びにして改行した場合のIE対応 - WEBMEMO
リストをfloat: left;で横並びにした際、長くなって2行目に改行された場合に、 Firefoxの場合 ・リスト1 ・リスト2 ・リスト3 ・リスト4 ・リスト5 ・リスト6 ・リスト7 ・リスト8 と、リストの頭で自動的に改行されるのですが、 IEの場合 ・リスト1 ・リスト2 ・リスト3 ・リスト4 ・リ スト5 ・リスト6 ・リスト7 ・リスト8 というようにリストの途中で改行されてしまいます。 また、IEで display: inline; ・リスト1 ・リスト2 ・リスト3 ・リスト4 ・リ スト5 ・リスト6 ・リスト7 ・リスト8 となってしまいます。 これは、white-space: nowrap; と記述することで解決しました！ でも、IE5.01だとうまくいきません。。。他の解決方法を調査中です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
