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

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

Category Archives: CSS

iframe要素をアスペクト比を保持したままレスポンシブ化する方法

iframe要素といえばちょいと昔(XHTML1.1とか)では非推奨となってましたが HTML5になるとWebアプリとしての期待からか復活しよりまして(笑) そらーもうGoogleマップからYoutubeからなんでもかんでも 埋め込みコードを発行するとiframeだらけの水泳大会ですわ。 (決してヤケクソになっているわけではありません) さて、これがスマホ対応となるとそれなりに面倒くさいんですわね。 そんなもん幅100%指定してやればいいんじゃねえのか、と思いますが そーんな簡単にはいかんのですよね。 縦横の比率を保持したまま、とかになるとそれなりに頭使わんといけませんでした。 まずは iframe要素をdivで囲んでしまう どちらにもpositionプロパティを設定。 (divにはrela……(続きを読む)

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

たまーに約款とかをサイトに載せてって時に原稿をもらうと (1)ほにゃらら~~~~ (2)なんちゃら~~~~ みたいなやつに遭遇する時があります。 list-styeのプロパティにはイロハまであるというのにこのカッコ付というのがない。 こういうのを用意しといてくれても良さそうなもんなんだけども・・ しかし、beforeとafter使ってなんとか出来るのではないかと模索。 まずはhtml部分。 そして、CSSはこれで。 これで簡単に実現できます。 この中で見慣れないのがcounter-incrementというプロパティですが、 カウンタ名を定義すると繰り返しで出てくる場合にその数値を一つずつ進めてくれます。 カウンタ名の後に半角スペースを入れて整数値を入れるとその数だけカウンタが進みます。 今回……(続きを読む)

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

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

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

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

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

Facebookのプラグインである「Like Box」はWebサイトとFacebookページを 両方運用している所にとってはかなり使う頻度の高いものですけど Facebookから発行されたコードをそのまま貼り付けると、 横幅が固定されてしまうので、レスポンシブサイトにはちょいと不格好。 なので、横幅を100%にすればいいやんとCSSに下記を加えればOKです。 普通、レスポンシブ対応サイトに貼り付けようとしているのならば Like Boxのコード発行の際にはHTML5を選んでいるだろうという前提なので 上記のCSSはiframeやXFBMLでコード発行した場合には使えません。 ちなみにXFBMLの場合はこうすればOK。 えーい、じゃあiframeの場合も書いておきましょう。 iframeの場合……(続きを読む)

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

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

 
1 / 41234

« Jul 2018 August 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 29 30 31