プラグインなどを使わずに簡単にモーダルウィンドウを設定する方法を探していたところ、バッチリのjsソースを見つけました。 ウィンドウの高さの取得や、オーバーレイのフェードイン・フェードアウトなどを、すべてCSSで作るよりも、jQueryで指定したほうがオールドブラウザでも開けますし、何と言っても簡単です。 モーダルウィンドウのコンテンツもHTMLソースなので、画像も動画も貼れるし、モーダルウィンドウ内からのリンクも可能です。 こちらが jsソースをゲットさせていただいたサイト「jQuery.lab」さんです。 jQueryでモーダルウィンドウを作る方法 | jQuery.lab ソースコードに初心者でもわかる丁寧なコメントを付けてくださっていてとっても親切。 ありがとうございます！ jsは、こちら↑から完全コピペさせていただいて、デモページを作りました。 デモのHTMLの構成と、CSSの必須

いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,

clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、 ::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。 しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、 今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。 ※2019年現在は全ブラウザ対応しています。 挿入出来るモノ 大きく分けると３つです。 テキスト プロパティの値 画像 content:”テキスト” 半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。 日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。 例：タイトルの前に★マークを

少し前に、「スタッフだけで作ったカードローンのサイトが完成間近」という記事を書きましたが、どんな感じでスタッフを育てサイトを作ったのかを簡単にまとめておきます。 スタッフだけで作ったというか、正確に言うとスタッフが全ての記事を書いたサイトですね。デザインやアフィリエイトは私が担当し、スタッフには記事を書くことに集中してもらいました。 情報配信サイトの場合、アフィリエイトの知識がなくても問題はないと思っています。特に商品とは関係のないジャンルの記事を書く場合は、商品知識も必要ありません。見た人にとって有益な情報が載っている記事になることを意識して書いてもらっています。 このサイトを作る上で、ライター未経験者どころかパソコン初心者にパソコン操作やWordPressの使い方、記事の書き方を同時に教えるというハードな方法を取りました。 ゼロからのスタッフの育成手順 パソコン初心者を雇うことが多いの

カスタマージャーニーマップを使う3つのメリット顧客体験の分析にカスタマージャーニーマップを使うメリットとして、次の3つが挙げられます。 視野が広がるWeb担当者が考える施策は、PCやモバイルなどの媒体に視線が向きがちです。しかし、顧客の行動文脈から施策を考えるようにすると、もっと広い視野で施策を検討できるようになります。PCやモバイルだけにとどまらないリアルとの連携や、普段はあまり思いつかないような施策の立案が可能になります。 複雑なデータが直感的に把握できる顧客の体験は、「目的」「行動」「タッチポイント」「思考・感情」など、さまざまな要素の集合として構成されています。これらのすべてを把握することは非常に困難ですが、カスタマージャーニーマップを活用することで全体を見渡せるシンプルな形に整理できます。 施策立案が考えやすくなるカスタマージャーニーマップは、顧客の体験の中でも特に「行動と媒体」

しかし全ての参照元を調べることはできません。例えば、メールマガジン、メーリングリスト、バナー広告などは「ノーリファラー」（参照元が不明）にカウントされることが多いです。 カスタムキャンペーン機能を使うと、そういう特定の参照元を明確に出来るだけではなく、キャンペーン名をつけたり、グループ化して分析することも可能になります カスタムキャンペーンの有効な使い方 上で挙げた例も含めて、カスタムキャンペーンは次のような計測に役立ちます。 メール、メルマガ、メーリングリストからのアクセス バナーなど広告からのアクセス（クリック率などを検証するため） ツイッター、Facebook、@LINEなどSNSでの、投稿単位の効果測定 関連サイトなどからの、特定リンクからのアクセス iPhone、Androidなどのアプリからのアクセス 店頭広告やチラシやDMなどオフライン掲載物からのアクセス（QRコード含む）

はじめに 前回のこれからはじめるGulp：bundler, rbenv, nodebrewでGulp環境を作ってみる #1でGulp自体を動かすことができたので今回はgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作ってみます。 gulp-sassについて gulp-sassはSassのGulpプラグインです。gulp-sassはnode-sassを使っています。代わりにgulp-ruby-sassを使うことRuby版のSassを使うことができます。 ディレクトリとサンプルSCSS 先に必要なディレクトリとサンプル用のSCSSファイルを作っておきます。 src, destディレクトリを作る ソースとなるSCSSファイルはsrcディレクトリに、コンパイル後のCSSはprod(dist)ディレクトリとします。これは一例なのでディレクトリ名は好みに合わせて作ってください

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) 去年の11月辺りから、メインマシンがWinからMacに変わりました。 Winちゃんもサブマシンとして頑張ってくれています。主に検証に使用していますが、、、 メインマシンの交代を機にgulpを導入したので、方法やら所感やらをちょこちょことまとめていきます。 今回は、簡単なタスクを登録して動かすところまで。 その２で、ファイルの監視や同期処理などを覗いていきたいと思います。 もくじ タスクランナーってなに？ Gruntとgulp 必要なものを準備する タスクを書いて、実行しよう まとめ タスクランナーってなに？ メインマシンがOSごと変わったので、自分の開発環境を整理・再整備する際に （´-）.｡oO（いっちょ最近流行りのタスクランナーでも入れてみようかね…） と思い立った次第です。 大学時代のトラウマから黒い画面はあまり好きではない

BrowserSyncって何？ テキストエディターでHTML,CSS,JavaScriptのコードを編集して、結果を確認するのにWebブラウザーにフォーカスを移してF5で更新して…… というWeb開発のワークフローを簡素化するプログラムです。 BrowserSyncはファイルの変更を監視して、変更を即座にブラウザーに反映させることができます。 しかもCSSファイルの編集はページの再読み込みをすることなく反映されます。 複数ブラウザーを立ち上げていてもOK！モバイルブラウザーも自動で同期します！ テキストエディター上での作業に集中することができるので、作業効率が劇的に向上します。これを使わない理由はありません！！ インストール方法 Node.jsをインストール BrowserSyncはNode.jsで動くので、まずNode.jsをインストールします。 Node.jsのサイトからインストーラー

minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任

前回は、クリックで開閉するスライドメニューを作成しましたが、今回はメイングラフィックスペースをグラフィカルにするスライダーを作成します。 ページ上部のメイングラフィックスペースに複数の情報を表示させるようにするスライドショーを作成する。今回は、メインの画像が中央に、その両側には前後のグラフィック画像に黒い半透明の画像が被さった状態で表示されるスライダーを作成します。 前後の画像が両側に表示されるため、ウィンドウサイズが変わっても横幅いっぱいに画像が表示され、よりグラフィカルなイメージを与えることができます。 今回作成したサンプル 【サンプル】ブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成する http://www.html5-memo.com/sample/jq-books/08 スライドショーのHTML ヘッダーエリアの上にスライドショーを設置するが、レイアウトによ

毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は時間で画像が切り替わるスライドショーを作りました。動作は一番シンプルで、クリックの処理は入っていません。TOPページでイメージ画だけ切替表示したい時に便利ですね。 合言葉は「jQuery　こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ ▼サンプルでは、3枚のスライドがフェードのアニメーションで切り替わります。 別ウィンドウで開く Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は slide.js とします）を読み込みます。 <head> <script src="common/js/jquery.js" type="text/javascript"></

こんにちは、くーへいです。 先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。 今回はみんな大好き、アニメーションです！ jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。 グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。 IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。 CSS3におけるトランジション（transition）とアニメーション（animation）の違い パッと見では分かりにくいのですが、違いは以下の通りです。 トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能 トラ

Movabletypeでのカテゴリ並び替えですが、有名なプラグインは以下です。 カテゴリーとフォルダを並べ替えるプラグイン（MT4以降用） - The blog of H.Fujimoto MovableTypeのカテゴリーソートに使える数字置換プラグイン - pmLabo 上記のプラグインはこれまでよくを使用していましたが、Perl版プラグインのためにダイナミックパブリッシングでは使えなかったりと制約があったりするので、最近は専ら以下のように並び替えしています。 カテゴリ並び替えの手順 管理画面よりカテゴリを追加する。 その際、並べたい順番の連番を < > で囲みます。 すべてのカテゴリを上記のように登録します。 すべてのカテゴリ登録後、画面では、先ほど入力した < > は表示されていません。 MTのソース 通常のカテゴリ一覧の記述は以下です。 <ul> <MTCategories sh

ある文字列が半角のみでできていること、 つまり全角文字が含まれていないこと、 を確認したいことがたまにある。 そのやり方としていろんな人がいろんなことを書いていて 正規表現を使うものが多いと思うんだけど、 こんなんでもいいんじゃないかな。 if (strlen($str) === mb_strlen($str)) { return true; } else { return false; } シングルバイト扱いでの長さとマルチバイト扱いでの長さが同じなら半角。 これに文字エンコーディングの指定や半角カナ、制御文字の扱いを含めたら こんな感じでしょうか。 半角カナを許可するなら $include_kana を true に。デフォルト値は false. 改行やタブなども許可するなら $include_controls を true に。デフォルト値は false. 入力文字列 $str の文