Interoperability, Browser & Cross Platform Testing | Modern.IEで配布されているVMイメージを使ってWindows7+IE8の検証環境を作ったのですが、日本語環境に切り替えるのにいろいろやることがあったので、備忘録として残します。 まず、Windows Updateから、言語パックをインストールします。 Windows Update を使用して言語パックをインストールする - Microsoft Windows この際、IE10がインストール対象になっているので、対象から外す必要があります、 IE8のイメージとして配布されているのに、Windows Update するとIE10になるというのはMSらしからぬ詰めの甘さだと思います。ちょっと惜しい。 Windows Updateの自動更新は無効になっているんですけどね。 Window
AutoprefixerはCan I Use のブラウザ・サポート情報とStatCounterの全世界のブラウザ利用状況データを参照してBrowserslistの記述に当てはまるブラウザを抽出します。 対象ブラウザ一覧を簡単に確認する方法 Browserslistの記述を入力すると対象となるブラウザ一覧を表示してくれるBrowserl.ist という便利なサイトがあって、2016年9月7日現在、デフォルトの記述で対象になるブラウザは以下になります。 Mobile Browsers Chrome for Android 51 UC Browser for Android 9.9 Android Browser 4.4, 4.4.3-4.4.4 IE Mobile 11, 10 iOS Safari 9.3, 9.0-9.2 Opera Mini all Samsung Internet 4
ブラー(ぼかし)エフェクトの難点 背景画像をぼかして全体に敷いているデザインって素敵ですよね。何の画像なのかハッキリと分からなくても雰囲気が統一されますし、何より上に文字を乗せても読みやすいんです!この「ぼかす」表現を「ブラー(blur)エフェクト」といい、多くのデザインで用いられています。 ただし、このブラーエフェクトはCSSで実装しようとすると結構くせ者で、背景画像だけにブラーを適用させても中の要素までエフェクトが効いてしまうんですよね・・・。 「ぼかした画像を作ってから背面に敷けばいいんじゃないの?」と言われればそれまでですが、そこを諸々の事情でなんとかCSSで実装したいと思いまして。独自で色々と調べた結果、CSSの疑似要素をうまく使うことで解決できたので、その方法をお伝えします! なお、実装方法はCodePenで以下の例を参考にさせていただきました。ありがとうございました〜! CS
TailorはWordPressの管理画面内でレイアウトをD&Dで作成出来るWordPressプラグインです。テーマカスタマイザーで要素をドラッグし、そのまま各所を編集出来るようになっています。テーマカスタマイザーはレスポンシブなプレビューも可能ですが、本プラグインもRWDに対応しており、知識があまり無い方でもレイアウトを設計出来る、というもの。なかなかすごいですねこれ。公式プラグインディレクトリにも公開されていますので管理画面から検索、インストールも可能です。便利そうだし個人的にも日本語化しておこうかなと思っています。 Tailor ※本記事は事前に予約投稿してあります。 ※筆者は現在出張で国外にいるため連絡が取れません。
1年以上前の記事です。内容が古い可能性があります。 なんとも有名なjQueryを使用したスライドショー(スライダー)「bxSlider」ですが、 デザインがなかなか思うようにいかなくて嫌いになりそうになっていました。 が、その理由がわかったので報告したいと思います。 なお、 「bxSlider」の設置等に関しては以下のサイト等を参考にしてください。 ■ jQuery Content Slider | Responsive jQuery Slider | bxSlider □ jQueryスライドショー「bxslider」の使い方まとめ – NAVER まとめ まず、先ほど紹介したサイトからHTML部分のみ抽出してみます。 <ul class="bxslider"> <li><img src="/images/pic1.jpg" /></li> <li><img src="/images/p
メニューなどをリストで実装する時に、クリックができないデッドゾーンができてしまうことがあります。この問題を解決するline-heightとpaddingを使い分けて実装するテクニックを紹介します。 In CSS, set line-height first, padding second 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 何が問題か? 何が起きているか? 解決方法はありますか? 何が問題か? ハッカーニュースを見ていたら、Zapierブログのこの記事を見つけました。 このメニューにおける問題に気付かないわけにはいきませんでした。
WEB制作で必ずと言っていいほど登場するものの1つに「見出し」があります。 そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。 飾り付きの見出し 擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。 同じくbefore、afterを使うパターンです。transformプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。 ボーダーがある見出し キャプション付きの見出しです。シンプルなので使いやすいですが、レスポン
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く