例えばWordPressのプラグインなんかを作っていて、CSSで変数を使いたいなんて時があります。 読み込みをPHPファイルにする。 まずはCSSファイルの拡張子を.phpにして、CSSを読み込ませていた部分をPHPのファイルに変更します。 HTMLならこんな感じ。 <link rel="stylesheet" type="text/css" href="sample.php" /> WordPressのwp_enqueue_styleでCSSファイルを読み込ませている場合も拡張子を変えるだけです。 <?php wp_enqueue_style( 'sample-css', PLUGIN_URL . '/css/sample.php' ); このままでは、text/htmlとかで読み込まれてしまうためCSSとして動作しません。 PHP化したCSSをCSSとして読み込んでもらう PHP化した
よくスマホメニューでつかわれている横からにゅるっと出てくるドロワーメニューのつくりかたです。コピペするだけでもつかえますが、解説をみたいかたは、コードの下に書いてありますのでご覧ください。 まずはデモ。 デモ <button type="button" class="btn_menu">開閉ボタン</button> <nav> <ul> <li><a href="/">メニュー1</a></li> <li><a href="/">メニュー2</a></li> <li><a href="/">メニュー3</a></li> <li><a href="/">メニュー4</a></li> <li><a href="/">メニュー5</a></li> </ul> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.
読み込み速度を高速化することは、戦略上非常に重要なことです。 ユーザーエクスペリエンス(UX)の面からも、SEO上の観点からも、読み込みの遅いサイトより速いサイトのほうが有利です。 UXの観点では、Google Researchのブログ記事より、サイトの読み込み速度が速ければ速いほど、ユーザーは快適に感じ、サイト内の滞在時間まで長くなることが分かっています。 さらにKissmetricsによれば、読み込みに3秒以上かかってしまうと、40％の人が読み込みを諦めて離脱してしまうことが分かっています。 SEOに関して言えば、Googleが検索結果を決めるのに使っている200以上もの要素の中の一つに明らかにページ読み込み速度を使っていることが明らかになっています。 もちろん、GoogleだけでなくBingもページの読み込み速度を重視しています。 ferretでは、これまでSVGを使った画像の最適化
フラットなデザインが流行している影響もあり、Web制作において随所でアイコンを利用する機会が増えています。そのようなサイトでは同一のアイコンを、サイズやカラー違いで配置する事も少なくなく、アイコンを画... 制作時はSassでCSSを設計するが、公開（納品）後の運用環境ではSassが導入されていないケースがあるかと思います。そのような時はSassをexpandedのスタイルで出力する事で、ある程度可読性の... 現在RCでリリースの近いSass3.3ですが、新機能でBEMを取り入れた命名がしやすくなるようなので、正式リリースに備えて紹介&メモします。BEMとは？Block、Element、Modifi... 前回、CreateJSに簡単に触れましたがCanvasでちょっとしたビジュアルを作成する機会があった為、早速CreateJSを導入しました。先に結論から書くと、ノンライブラリ（Canv
HTML の要素を装飾するのに、CSS を組み合わせて指定したい。 Blog.okuryu : CSS で複数のクラスを指定する方法 によると、 class 属性値をスペースで区切って指定すると複数のクラスの CSS が適用される。 例えば、テーブルの「枠や背景色」を装飾したいとする。CSS で 「枠の太さ」 「セルの背景色」 を、別々の class で指定する。 テーブルの枠の指定の方法は、「HTML のテーブルで、一部の枠だけ太くする」を参照した。 <html> <head> <title>複数の CSS を class で指定</title> <style type='text/css'> <!-- table { border-collapse: collapse; } table, td { border: solid 1px; } .sunday{ background-col
下記イメージのように、親要素に合わせて写真の一覧を作りたい場合などあると思います。 これを解決する方法はいろいろあるとは思いますが、ここではcssのみで実装する方法を説明します。 説明 上記イメージを実装しようと思うと下記のようなコードになります。 html <div class="photolist"> <ul> <li>photo</li> <li>photo</li> <li>photo</li> <li>photo</li> </ul> </div> css .photolist{ width: 490px; } .photolist ul{ margin: 0 -10px 0 0; overflow: hidden; zoom: 1; } .photolist ul li{ float: left; margin: 0 10px 10px 0; width: 115px;
今回はネガティブマージンの便利な使い方について紹介します。 ※ネガティブマージンとは、CSSで、マイナス値が与えられたmarginプロパティのことを言います。 例1）3カラムのボックスを均等に並べる HTML <div id="container"> <div id="container-inner"> <div> カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1カラム1 </div> <div> カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム2カラム
SEOにも強いマウスオーバーでボタン画像切り替えのまとめ by ateliee · 公開済み 2013年8月1日 · 更新済み 2017年7月11日 ホームページをつくる上で欠かせないボタンやバナー。 ただの画像をおくだけでもいいのですが、今回はそんな当たり前のように使用するボタンを実装する様々なやり方をご紹介いたします。 まずは基本！マウスオーバーで画像切り替え ボタンにマウスを乗せると画像を切り替える方法です。 CSSスプライト もっともメジャーなやり方は、リンクをblock化し背景に画像を設定。 :hover擬似クラスで背景画像を移動してあげることでマウスオーバーアクションを作ります。 HTML <a href=”#” class=”btn”></a> CSS .btn{ width:111px; height:40px; display:block; background:url(
CSSレイアウトでfloatを使用した際、通常は親要素内にfloatする要素があり、floatに続く要素にclearを指定し回り込みを解除します。（これが基本です。）clearfixとはclearプロパティを使わずにfloatを解除する手段です。 例えば親要素内でデザイン上どうしてもfloatを解除する為のボックスを設けたくない場合などに利用します。 一部のブラウザで親要素内でfloatを解除しなかった場合に起こる現象として、親要素内に指定した背景画像が表示されない、或いは親要素の下まで表示されないなどがあります。 以下にサンプル解説します。 サンプルソースと通常指定 <div id="mainbox"> <!-- 親要素 --> <div id="box-a"> *** </div> <!-- float --> <div id="box-b"> *** </div> <!-- floa
HTMLコーディングの初級というと、どの程度のスキルを差すのでしょうか。弊社では、以下のようなことがひとまずできていると、だいたい初級レベルを越え始めた段階かな、という気がしています。 ターゲットブラウザで大きな崩れがない。 リンク漏れや原稿違いなどのヒューマンエラーの頻度が極めて低い。 バリデーター・チェックでエラーが出ない。 逆に、これだけのことができて、なぜまだ初級レベルなのでしょうか。それは、現場では、これだけでは不十分だからです。ブラウザでひとまず正常に表示されるだけでなく、改修に素早く対応できる柔軟性、協業や運用後の更新を楽にするルールの一貫性や簡潔さ、HTMLの概念をきちんと踏まえた正しい構造設計なども、求められてくるからです。 そこでここでは、脱・初級者を目指す方のために、弊社内で行っているHTMLコーディングの、いわゆるエラーということ以外のチェックポイントを、まとめてみ
Lightbox 2.0とは？ Lightbox 2.0はAjaxを利用して画像を表示するライブラリです。画像は単独の表示だけでなく、複数画像をグループ化してスライドとして表示させることもできます。 Lightbox 2.0の大きな特長としてスクリプト(プログラム)を記述しなくてよいという点があります。つまり、全くプログラムが分からない人手も気軽に使う事ができます。Lightbox 2.0ではHTMLの<a>タグのrel属性にlightboxの文字を記述するだけでできてしまうという手軽さです。また、JavaScriptのコードが実行できるブログであればLightbox 2.0を利用することができます。 Lightbox 2.0は作者であるLokesh Dhakar氏のサイトからダウンロードすることができます(*1)。 「Lightbox2のダウンロードサイト」 「Lightbox v2.0
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く