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

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

Category Archives: CSS

[CSS]font-awesomeが四角になって表示されない時のチェックリスト

最近はよーく使わせてもらっておりますfont-awesome。 https://fontawesome.com/ メールアイコン、もしくは各SNSのアイコンなんぞいちいち画像で作ってた時代が懐かしい。 古くからWeb制作に携わっている方々なら「アイコンばっかりのaiファイル」とか持ってるはず。 それが今ではこういう便利なモンがあるんですからねえ。 いわゆる昔の「テーブルレイアウト」みたく、若きWeb制作者からは「は?なんスかそれ?」って自嘲気味に言われる日もきっと近い。 そんな事言われたらパワハラ気味にネスケ4.7とIE6.0縛りでサイト作らせちゃったりしそうです。 ・・・・環境用意するだけで大変やっちゅうねん。 しかし、このfont-awesome。 CSSで例えば疑似クラスの::befo……(続きを読む)

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の場合……(続きを読む)

 

« Nov 2019 December 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