XAMPP + PhpStorm + WordPressの設定メモ
毎回設定方法を忘れて検索するのがつらいのでメモしておきます。 C:\Develop以下で構成。XAMPPのドキュメントルートはそのまま、実際に使うのはC:\Develop\www以下にディレクトリ作る。WordPressのルートはC:\Develop\www\wpにする。MySQLのdataもXAMPPとは別ディレクトリのC:\Develop\mysqlに。WordPressのURLはwp.localhostにする。バーチャルホストの設定とか今回はC:\Develop\xamppにインストールする。 インストールが終わったらphp.iniの設定。 mbstring.language = Japanese date.timezone=Asia/Tokyoとりあえずこれだけやって、他は本番用サーバーにあわせる。 参考リンク： php.iniファイルの確認と修正 - XAMPPの使い方 Apac
:nth-*擬似クラスのおさらいメモ
:nth-*擬似クラスの引数の理解がいまいちだったのでおさらい。 構文について。 ここでのINTEGERは[0-9]+である。 nth : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* ;nは0もしくは正の整数であるので、それを元に考えると分かりやすい。 たとえば:nth-child(n+1)の場合…… 0 + 1 = 1 1 + 1 = 2 2 + 1 = 3 ...となる。 偶数番目の子を指定する場合には:nth-child(even)または:nth-child(2n)となるが、これも同様に 2 * 0 = 0 2 * 1 = 2 2 * 2 = 4 ...となる。 奇数番目:nth-child(odd), :n
円や多角形をランダムに配置する背景をSVGで作る その2
「円や多角形をランダムに配置する背景をSVGで作る」の続きです。 もうちょっと使いやすくなるように練習を兼ねてやってみました。 GPBG.js サンプル 1 GPBG.js サンプル 2 GPBG.js サンプル 3 GPBG.jsのJavaScriptファイル 前のはインラインSVGを作ってbodyの最後に入れていましたが、今回はstyle要素を作り、指定したセレクタの背景画像としてData URIにしたSVGを指定するようにしました。 一番簡単に使うと、こんな感じになります。 <script type="text/javascript" src="gpbg.js"></script> <script type="text/javascript" src="script.js"></script> </body>// script.js の中身 (function () { if (wi
要素内容に依存する幅の指定について
要素内容に依存する幅の指定についてのメモです。 これらは「CSS basic box model（草案）」に記載されており、MDNのページに分かりやすく説明されています。 本来、これらは幅だけでなく高さの指定にも使えるようなのですが、まだ実装されていませんので確認できません。 2013年4月現在、幅の指定として使えるブラウザはFirefoxとGoogle Chromeです。Safariでは動くんですかね。最新版ないから分かりません。 available or fill-available包含ブロックから該当要素のマージン、ボーダー、パディングのサイズを引いた幅。 現在、Firefoxは-moz-available、Chromeは-webkit-fill-availableで動作します。max-contentややこしい計算式があるんですが、とりあえずは該当要素が取りうる最大の幅として覚えてお
ドロップダウンメニューのアイディア
よくあるドロップダウンメニューのアイディアです。 CSS 3D Transformsに対応しているブラウザにはそれを使ったUIを、そうでないブラウザにはシンプルな切り替えを提供します。 ドロップダウンメニューのアイディア CSSのみ補足コメントつきで載せておきます。 .nav a { display: block; padding: 0 0.5em; color: #f6f6f6; line-height: 2; text-decoration: none; } /* ulのスタイルリセット */ .nav ul { margin: 0; padding: 0; list-style: none; } /* clearfix */ .nav > ul:after { display: block; clear: both; content: ""; } /* メニューを横並びに */ .n
背景として使用されるCSSグラデーションはどの範囲に描画されるか
背景として使われるCSSグラデーションが描画される範囲はどのように決定されるのか、仕様を読みながら考えてみたいと思います。 参考にしたのは2012年4月17日版の「CSS Image Values and Replaced Content Module Level 3」です。非公式の日本語訳もあります。 この記事に書いている範囲は自分で訳したので、上記の翻訳とは用語の表記などが異なっています。ご了承ください。 （調べ終わり頃に日本語訳があるのに気づいたので……） なお、ここ以降で単に「グラデーション」と書いている場合は「CSSグラデーション」のことを指します。 グラデーションが描画される範囲についてまずはグラデーションが描画される範囲はどのように決定されるのかを調べてみます。 仕様を見ると次のように書かれています。 グラデーションはグラデーションボックス（gradient box）と呼ばれ
WordPressで任意の文字列から投稿やタームのURLを取得
WordPressの「Wiki Page Links」というプラグインを改造していたのですが、そのときのメモです。 このプラグインは[[キーワード]]という書式で固定ページのタイトルに同じものがあれば自動でリンクしてくれるのですが、これの検索範囲を任意の投稿タイプにしたかったのです。 それと、違う書式で（たとえば{{キーワード}}みたいな感じ）で任意のタクソノミーからタームを検索してリンクする、というのもやりたかった。 文中からの検索や置換は元のプラグインのものを流用するとして、問題はキーワードから投稿のURLとタームのURLを探し出すところでした。 // キーワード $link_target_title = html_entity_decode('探したいキーワード', ENT_QUOTES); // リンク先URL $url = null;投稿の場合 // 公開されている投稿タイプ $
最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
WordPress のプラグイン「Types」の日本語ファイル | Unformed Building
WordPress のカスタム投稿タイプ、カスタムタクソノミー、カスタムフィールドをまとめて管理できるプラグイン「Types」の日本語ファイルを作ったので公開しておきます。 Types Plugin – WordPress Custom Post Types and Custom Fields WordPress › Types – Custom Fields and Custom Post Types Management « WordPress Plugins このプラグインは 大曲さん (@jim0912) に教えてもらいました。 試してみると結構使いやすそうだと思いました。 が、日本語ファイルはあるものの何故かすごく中途半端だったので、できる範囲を翻訳しておきました。 ダウンロードは以下からどうぞ。 Types 1.0.4 向け日本語ファイル 注意事項など 翻訳ファイルへのパスは
GoogleモバイルサイトやDisney.comのオフキャンバスっぽいメニュー
Googleのスマートフォンサイトがリニューアルされたというので見てみたら、メインメニューの表示方法が面白い感じになっていたので自分でも作ってみました。 ちなみに、先日レスポンシブウェブデザインに変更したDisney.comも、表示幅が1024px以下だと似たようなメニューの表示方法になります。 作ったものは以下。 オフキャンバスメニュー サンプルなのでHTMLは適当に。 実際にはもっと複雑になるでしょうが、動きを試すためのものなのでこんな感じで。 <div id="nav" class="globalnav"> <a href="#">Navigation</a> </div> <div id="main" class="content"> <div class="switcher"> <button id="toggleMenu">☰</button> </div> Mai
ボーダーで三角形などを作るときにはtransparentではなくrgba()で
よくCSSのボーダーを使った三角形の作り方が紹介されていますが、あれに使われている透明なボーダーのことで少し。 たとえば、こういうHTMLとCSSで三角形を作るとしましょう。よく見るタイプだと思います。 <div class="test1"></div>.test1 { width: 0; height: 0; border-width: 0 200px 200px 0; border-style: solid; border-color: transparent transparent #eee transparent; }こっちでもいいです。好みで。 .test1 { ... border-color: transparent; border-right-color: #eee; }CSS Triangle 1 見えづらいかもしれませんが、直角三角形になっていますね。 ただし、Fire
サイト制作時のメモ 2012年前半
ここ最近でサイトを作ったときに思ったことのメモです。 個人的なサイトを昨年末と今年の7月に1つずつ、それ以外でやったのが春に1つ（結局なかったことにされたけど）、今やってるのが1つ。 昨年末のは一応レスポンシブウェブデザイン、7月のと春のは普通のソリッドレイアウト、今やってるのがスマートフォンサイト。 昨年末に作ったものについてははてなダイアリーの方でも書いたし、内容は被るけど改めて。 全般「HTML5 Boilerplate」は丸ごとというより必要な部分だけ抜き出して使うと便利。 「これは要らないかなー」という部分を探すのにはコード読まないといけないので、それだけでも結構勉強になると思う。 単純なサイトなら頑張って画像作らなくてもなんとかなったりする。 （対象がいわゆるモダンブラウザの場合） Sass 3.2から使えるPlaceholder Selectorは凝ったことしなくても普通に便
円や多角形をランダムに配置する背景をSVGで作る
以前に「サークルがランダムに配置される背景をSVGで作る」というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chrome, Safari 5.1+, Opera 11.6+です。 Random Geometric Pattern Background with SVG 一応、コメントつきのも載せておきます。 (function () { /** * window がロードされたら実効 */ window.addEventListener('load', function () { geometricPattern
datalist要素
テキストボックスに入力するとき、ユーザーに入力候補を表示してあげることのできる要素です。 個人的には早く普及するといいなと思っています。 4.10.10 The datalist element — HTML5 ブラウザの対応状況Internet ExplorerIE 10から対応。datalist object (Internet Explorer)Mozilla FirefoxFirefox 4から対応。datalist - MDNGoogle ChromeChrome 20から。Changeset 114545 – WebKitこのへんかなあ。 「datalist landed in Chrome Canary - HTML5Rocks Updates」に、Canaryで使えるようになったときの告知もある。Safariまだ。たぶん次のSafari 5.2ですかね。Opera一番古いの
CSSの勉強中に困ったら
CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3
CSSで使用できる角度の単位
degdegree、度数法。 360で円を一周するお馴染みの表し方。 gradグラード。ゴン（gon）、グレード（grade）、グラディアン（gradian）とも。 1直角を100とする単位。 つまり90degの1/100が1gradになる。360degは400gradで表すことができる。 radラジアン（radian）。弧度法。 円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値だそうです。 360degは2πradで表すことができる。 degreeからの変換はdegree * π / 180で行う。 2011年9月6日版でWho is going to use this anyway?とか言われてた単位。 turn1回転を1つの単位として扱う。 1turnは360degと等しい。 まとめ1deg = 約1.1111111111grad = 約0.0174532925ra
Firefoxで使われている上下左右中央配置のスタイルシート
Firefoxで画像を開いたら、背景が暗い感じのCSSが使われるようになってました。Firefox 12からですかね？ 11 からでした。そのページでは画像が上下左右中央に配置されています。 ちょっと興味が湧いたので中身を覗いてみたら、上下左右中央配置もCSSで行っていました。 使われているCSSファイルはresource://gre/res/TopLevelImageDocument.cssにあります。 このファイルはMPL 1.1/GPL 2.0/LGPL 2.1のトリプルライセンスです。 @media not print { body { background-color: #222; margin: 0; } img { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } } @medi
:window-inactive擬似クラスとanimation-play-state
まあタイトル通りなんですが、ブラウザウィンドウが非アクティブになったらアニメーションを停止したいという話です。 今はFirefoxをメインに使っているんですが、要素をアニメーションさせたりするとChromeやSafariに比べて結構な負荷がかかるのです。 アニメーション回数を無限に指定していると、それを表示しているタブが最前面にある限り、ウィンドウがアクティブであろうとなかろうとアニメーションは続きます。 当然、起動しているのはFirefoxだけではないですから、実行中の他のアプリにも影響が出ます。 それをせめて違うウィンドウを見ているときだけでも上手いことできないかと思ったわけです。 そこで:-moz-window-inactive擬似クラスで対応することにしました。 サンプルは以下です。Firefox 10で確認できます。 アニメーションしているのを確認したらウィンドウからフォーカスを
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
CSS Filter Effects!
「CSS Filter Effects」の紹介をしてみたいと思います。 現在、このプロパティはWebkit nightlyとGoogle Chrome Canaryで使うことができます。たぶんdevとかにももうすぐ来るんじゃないでしょうか。 Filter Effects 1.0 - 5. The ‘filter’ property 2011年12月16日版を参考に書いていきたいと思います。 サンプルページは以下です。 CSS Filter Effects Sample このサンプルの画像は、通常だと次のように表示されます。 左側がjpg画像で、右側はハートの外側が透過されているpng画像です。 これにフィルタをかけていきます。 なお、スクリーンショットはWindows版Google Chrome 18.0.982.0 canaryで表示したときのものです。 このプロパティをWebkitで使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
