ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

Category Archives: CSS

[CSS]ol,liの番号リストにカッコを付ける方法

たまーに約款とかをサイトに載せてって時に原稿をもらうと (1)ほにゃらら~~~~ (2)なんちゃら~~~~ みたいなやつに遭遇する時があります。 list-styeのプロパティにはイロハまであるというのにこのカッコ付というのがない。 こういうのを用意しといてくれても良さそうなもんなんだけども・・ しかし、beforeとafter使ってなんとか出来るのではないかと模索。 まずはhtml部分。 <ol class="parentheses"> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ol> そして、CSSはこれで。 ol.par……(続きを読む)

日本語Webフォント「Noto Sans Japanese」を使ってみた

Webフォントという物はだいぶ前から聞いてたのですが 所詮、英語圏の物だろ・・・・としか思ってませんでした。 実際、Wordpressの海外テーマなんぞはここ最近の物では管理画面から Webフォントの一覧を簡単に適用できる物がほとんどでしたし、 なんせ26文字×2で事足りるわけですから、そりゃあサイズも軽い。 しかし、Googleが提供している「Google Web Fonts」に いつの間にか日本語フォントである「Noto Sans Japanese」が 追加されているのを知りました。 これが一体どんなもんなのか知りたかったので早速適用。 手っ取り早いのはスタイルシートファイルに@importで読み込んであげる事です。 @import url(http://fonts.googleapis……(続きを読む)

z-indexをいじりまくってたらリンクがクリック出来なくなった

普段あんまり使う事のないz-indexなのですが、 もらったデザインを適用させるために使わなければならない事態となりました。 そして、それは見事にうまくいって一安心だったのだけども レスポンシブサイトでスマホ表示した際に、右上にトグルスイッチを設置して それをタップすればメニューバーがスライドして出てくるという仕掛けを実装した際 スライドしたメニューバーが配置したコンテンツの下をくぐってしまうという事態に。 こいつあ困ったぜ、とz-indexの値を色々いじって、 くぐってしまうボックスの親要素に負の値を与えてこの現象は回避。 これで一安心でい、と思ってたら次はその負の値を与えたボックス内に設置してる テキストリンクがクリック出来なくなるという もう次から次へとなんだコノヤロウという状態に。 ……(続きを読む)

CSSのみでFacebookのLike Boxをレスポンシブ対応にする方法

Facebookのプラグインである「Like Box」はWebサイトとFacebookページを 両方運用している所にとってはかなり使う頻度の高いものですけど Facebookから発行されたコードをそのまま貼り付けると、 横幅が固定されてしまうので、レスポンシブサイトにはちょいと不格好。 なので、横幅を100%にすればいいやんとCSSに下記を加えればOKです。 .fb-like-box, .fb-like-box span, .fb-like-box iframe[style]{ width: 100%!important; } 普通、レスポンシブ対応サイトに貼り付けようとしているのならば Like Boxのコード発行の際にはHTML5を選んでいるだろうという前提なので 上記のCSSはifra……(続きを読む)

めくるめくCSS3のアニメーションの世界

WindowsXPとIE6のサポートが終わりを告げ、我々の様な制作者も あの悪夢のような日々から解放されるのか、という想いが少し流れる昨今。 もはやあの日々も思い返せば、それなりにいい想い出なのかも知れない。 「こうして俺のIE制作は終わりを告げた。思えばデバッグばかりしてた気がするなあ」と ときメモのエンディングの様にさらりと語れる日が来たのかも知れない。 【IE6】サポート終了、お世話になったバグを振り返ってみる http://c-brains.jp/blog/wsg/14/04/11-115200.php しかしそれは幻想。つかの間の平和。 常に新技術の足を引っ張るのはInternet Explorerその人なのだ。 まず、CSS3の対応状況はこちら。 http://fmbip.com……(続きを読む)

ひな形再考その2 - フォント周りをどうするのか

制作時のひな形の再考をしようという試みは未だに終わりが見えず 最近のトレンドを追うのが必死で検証すら出来ておりませんが 色々となるほど、と思った事をここにとりあえずまとめてみる。 自分が過去、作った物と今の機材の違いといえばやっぱりメイリオフォント。 Windows8.1にフォントが追加された、という記事を書いてから 「あ、そういえば」と気づいて色々と調べてみたらこのサイトを見つけました。 CSSのfont-family指定はこれで決まり!(2013春) http://d.hatena.ne.jp/n-yuji/20130225/p1 ちょいこの前までWindows XP環境だったせいか、 この辺の事をあんまり考えてなかったのですけども (メイリオは後からインストールはしていましたが) 20……(続きを読む)

 
1 / 41234

« Jan 2017 February 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28