タグ

2017年12月7日のブックマーク (4件)

  • CSSセレクタ20個のおさらい

    CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの1つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6~8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル

    CSSセレクタ20個のおさらい
  • 多言語サイトの作り方とグローバルSEOの要点10(WordPress)

    サルワカの一部のWebデザイン系の記事・ツールを英語対応しました。英語版のサイト名は「SW Design Lab」としています。 SW Design Lab せっかくなので備忘録がてら多言語サイトの作り方をまとめておきたいと思います。 多言語サイトを作る前に知っておきたいこと 一部の記事のみ翻訳して公開 全ての記事をネイティブが書くような自然な英語に翻訳するのはかなり大変です。そこで、文字数が少なく、どの国の人たちにも共通して需要があるであろうWeb制作系の一部の記事のみ英語版にして公開することにしました。 どのように英語対応しているか サイト内に英語版用のカテゴリーを作り、そのカテゴリー内で英語記事を作っています。また、日語の記事とはデザインも変えています。例えば、サイドバーなんかはごっそりと非表示にしています。詳しくは後ほど。 WordPressだと簡単 サルワカはWordpress

    多言語サイトの作り方とグローバルSEOの要点10(WordPress)
  • レスポンシブデザインでスマホだけアコーディオン | 野良人(のらんど)

    CSSの装飾は省いて動作に最低限必要な部分だけ載せてあります。 デモ1 ※ブラウザ幅をアレしてご確認ください ポイント jQueryのslideToggleメソッドで開閉のアクションを行います クリックする.titleセレクタにpointer-eventsを設定して、PC表示ではクリックできないようにしておくことでスマホのみアコーディオンで開閉するようにします。 狭いブラウザ幅でクリックして閉じてからブラウザ幅を変更したら閉じっぱなしになる問題への対応 あんまり想定されない操作ではありますが… PCでブラウザ幅をブレイクポイント以下に狭める クリックでアコーディオンパネルを開→閉とする(この時jQueryによって要素のスタイル属性にdisplay:noneが追加される) ブラウザ幅をブレイクポイント以上に広げる こういう操作をすると、PC表示なのにアコーディオンパネルが閉じたまま開くことが

    レスポンシブデザインでスマホだけアコーディオン | 野良人(のらんど)
  • 2018年用、日本語のフリーフォント332種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記

    個人でも商用でも無料利用できる、日語のフリーフォント332種類を紹介します(公開時より、3+18個増えました)。 ビジネスからプライベートまで、幅広く利用できる無料フォントが満載です! 去年は260種類だったので、今年は大幅に増えています。 中には、配布先が変更されたフォント、配布終了になってしまったフォント、無料でなくなったフォント、ライセンスが変更されたフォントもいくつかあります。 最新版を公開!フォントの数が大幅に増えています。 2020年用、日語のフリーフォント 417種類のまとめ 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています(※情報はこの記事の執筆時のもの)。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。

    2018年用、日本語のフリーフォント332種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記