はてなブックマーク

公開日：2014年8月29日 最終更新日：2014年8月31日 アイコンフォント作成サイト「IcoMoon App」では、自分で作成したカスタムアイコンをフォントファイルにすることができます。自作アイコンをフォントファイルにしてWebページに表示するまでの具体的な手順について解説します。 IcoMoon App には数千種類のアイコンが登録されており、ユーザーが選択したアイコンをフォントファイルにしてダウンロードできます。 このサイトの具体的な利用方法は、以下の記事にも説明していますので参照してください。 「アイコンフォントの具体的な使い方 - IcoMoon App」 この記事では、自作アイコンをフォントファイルにする方法を解説していきます。 【コンテンツ】 アイコンのSVGファイルを用意する SVGファイルを読み込む アイコンを選択する フォントファイルをダウンロードする ダウンロード

公開日：2014年9月22日 メニューが開閉するアコーディオンメニューはスマートフォンサイトでよく見かけます。プラグインもたくさんありますが、それらを使わないでもシンプルなコードで実装できますので、基本的な作成方法を解説します。 作成するメニューは以下になります。横幅はスクリーンサイズに応じて変化します。 カテゴリをクリックするとその下に隠れているメニューが開きますが、そのとき右側のアイコンも切り替ります。 今回は各カテゴリを複数同時に開くことができるメニューと、１つのカテゴリを開くと他のカテゴリは閉じるメニューの２種類作成してみます。 またメニューに表示するアイコンは、CSSで作成したものとアイコンフォントで作成したものを２つ示します。 スマホでもPCでも動作するデモページを用意しましたのでご覧ください。 ＞＞ 複数のカテゴリがオープン可能なメニューの DEMO ページへ ＞＞ １つのカ

公開日：2014年8月24日 jQuery UIでは、アイコン付きのボタンやメニューを作成することができます。jQuery UIをインクルードしていれば、付属しているアイコンはHTML要素にクラス指定することで、単独でも使用できます。 アイコン付きボタンなどの作成方法は他の記事にゆずることとして、ここではアイコンだけを取り出して利用する方法を解説します。 【コンテンツ】 利用できるアイコンの一覧 jQuery UIをダウンロードする jsファイルとcssファイルをインクルードする アイコンを表示するためのコード アイコンの色を指定して表示する 【記事執筆時の環境】 jQuery UI 1.11.1 jQuery本体 1.10.2 利用できるアイコンの一覧 jQuery UIに付属し利用できるアイコンは以下になります。 アイコンのサイズは16x16ピクセルで、１枚の画像にまとめられているため

公開日：2014年9月15日 スマートフォン用にサイトを用意した場合、ユーザーからのアクセスをPCサイトとスマートフォンサイトに振り分けるにはユーザーエージェントで判別します。.htaccess、PHP、JavaScript それぞれでユーザーエージェントを判別し振り分ける方法を解説します。 Webサイトの振り分け方法としては、ユーザーエージェントの他にスクリーンサイズで振り分ける方法もあります。こちらはレスポンシブWebデザインでよく用いられます。 また WordPress などの CMS を使っているサイトなら、プラグインを使ってテーマごと切り替える方法もあります。 PC用とスマートフォン用にサイトを別々に用意した場合は、ブラウザから送られてくるユーザーエージェントの文字列を、何らかのコードを組んで判別し振り分けるのが一般的です。 【コンテンツ】 モバイル端末のユーザーエージェントの見

公開日：2014年9月17日 クッキーを保存して利用するにはPHPを使う方法が一般的ですが、JavaScript でも扱えます。JavaScript でのクッキーの取り扱いを簡単にする jQueryプラグイン「jquery.cookie」の使い方を解説します。 クッキーの利用方法はさまざまですが、この記事ではPCサイトとスマートフォンサイトの閲覧履歴を保存し、前回閲覧していたサイトのモードでWebページを表示する利用例を示します。 スマートフォンユーザーでもPCサイトを閲覧したい人には、便利な機能になるでしょう。 【記事執筆時の環境】 jquery.cookie 1.4.1 jQuery本体 1.11.1 【コンテンツ】 jquery.cookie のダウンロード jquery.cookie の基本的な使い方 PCサイト/スマホサイト切り替えでの利用例（サンプルコード付） jquery.c

公開日：2014年9月26日 最終更新日：2015年1月6日 スクリーンサイズが小さいスマートフォン画面で表組みする際は、はみ出した部分を横にスクロール可能なレスポンシブテーブルという手法を使います。JavaScriptで作った専用のライブラリもありますが、CSS設定だけで簡単に実装する方法を解説します。 作成するテーブルは右図になります。 横幅はスクリーンサイズに応じて変化しますが、640pxをブレイクポイントとして行と列が反対になります。 640pxより小さいスクリーンでは横にスクロール可能なレスポンシブテーブルとなります。 スマホでもPCでも動作するデモページを用意しましたのでご覧ください。 ＞＞ レスポンシブテーブル DEMO ページへ 【コンテンツ】 HTMLコードを作成する CSSコードを作成する HTMLコードを作成する テーブル部分の HTMLコードは以下になります。 注意

公開日：2014年9月10日 最終更新日：2019年4月6日 CSS3で追加された線形グラデーション「linear-gradient」と円形グラデーション「radial-gradient」を使用すれば、さまざまなパターンを表現することが可能です。 これに background-sizeプロパティを組み合わせれば、CSSだけで背景画像を作成することができます。 これまで背景にパターン画像を適用するには、タイル状に並べて使う小さな画像を用意しましたが、CSS3をサポートするブラウザが増えてきている現在では、ほとんどのパターンがCSSだけで作成可能になっています。 CSSで作られたパターン画像のコードを配布しているサイトもありますが、この記事では自分でパターンを作成する基本を解説いたします。 【コンテンツ】 仕様策定の動向とブラウザの対応状況 radial-gradient の書式 linear

公開日：2014年6月13日 最終更新日：2018年6月29日 Chrome デベロッパーツールのElementsパネルでは、WebページのHTML/CSSを検証することができます。Web制作者が最もよく使うデベロッパーツールの機能です。ブラウザでの表示がおかしい時は、とにかくこの機能を使ってデバッグするのが問題解決の早道となります。 Elementsパネルでは具体的に以下のことが可能です。 ページに表示している要素に対応するHTMLとCSSを検索する。 HTMLを編集してページ内容を変更する。 CSSを編集してページスタイルを変更する。 DOM elementにブレークポイントを設定してデバッグする。 要素に設定されたイベントを確認する。 【コンテンツ】 Elementsパネル外観 ナビゲーション部 DOMツリーの操作 要素を検索する 要素のHTML/CSSを確認する HTMLを編集する

公開日：2014年6月24日 最終更新日：2014年7月13日 Chrome デベロッパーツールでは、強力なJavaScriptデバッグ機能をもっています。 ブレークポイント設定やステップ実行で、効率的にバグの原因を見つけることができます。 【コンテンツ】 パネル外観 ブレークポイントを設定する サイドバーにある各ペインの説明 【記事執筆時の環境】 Windows 7 Professional 32bit SP1 Google Chrome 35 パネル外観 JavaScriptのデバッグは、Sourcesパネルで行います。 右サイドバーには一番上に実行を制御するボタンがあり、その下にデバッグ情報がいくつかのペインに分かれて表示しています。 各制御ボタンの説明は以下になります。 ：Pause script execution(F8) 実行を停止します。 ：Resume script exe

公開日：2014年8月28日 最終更新日：2019年3月25日 アイコンフォントを利用する上で便利なサイト「IcoMoon App」でフォントファイルを作成し、ダウンロードしたフォントファイルからWebページにアイコンを表示するまでの具体的な手順について解説します。 IcoMoon App には数千種類のアイコンが登録されており、ユーザーが選択したアイコンだけでフォントファイルを作成してくれます。フォントファイルには自分で作成したカスタムアイコンも含めることができます。 またアイコンは、Webページ上で回転/反転/拡大/縮小など編集してからフォントファイルにすることもできます。 EPS/PDF/PNG/SVG形式でのファイル提供も行っており、Illustratorなど画像編集ソフトでアイコンを編集することができます。 なお、アイコンには無償版と有償版がありますが、無償版でも十分な数が登録さ

公開日：2014年6月12日 最終更新日：2014年7月13日 Chrome デベロッパーツール(Chrome Developer Tools)は、Google Chromeに組み込まれたWeb開発者向けのツールです。WebページやWebアプリの制作・デバッグ、サイト運用に活用できます。この記事ではデベロッパーツールを使う際の基本的な事項を説明します。 記事作成にあたっては下記ページを参考にしています。 https://developer.chrome.com/devtools/index 【コンテンツ】 主な機能 起動方法 デベロッパーツールウィンドウ デベロッパーツールの表示位置 各種設定 【記事執筆時の環境】 Windows 7 Professional 32bit SP1 Google Chrome 35 主な機能 デベロッパーツールでは以下のようなことができます。 ▼ Webペー

公開日：2014年3月18日 最終更新日：2014年7月13日 Webサイトを運用するには、データベースも定期的にバックアップしなければなりません。 MySQLを自動でバックアップしてくれるツール「phpMyBackupPro」をサーバーへ設置する方法を解説します。 WordPressではMySQLデータベースを自動でバックアップしてくれるプラグインがありますが、CMSを利用しない一般サイトのデータベースは他の方法を取らざるを得ません。 phpMyBackupProは、簡単な設定でMySQLデータベースを自動バックアップしてくれるツールです。 バックアップするSQLファイルは、 1.サーバー内の任意のディレクトリに保存 2.他サーバーへFTP転送 3.メールの添付ファイルとして送信 と３つの方法をとることが可能です。 バックアップスクリプトをサーバーのcronに登録すると、定期的な自動バッ

公開日：2014年3月2日 最終更新日：2014年7月13日 Chromeに標準搭載されているデベロッパーツールには、モバイルをエミュレートする機能が豊富に備わっています。デバイス、ユーザーエージェント、画面解像度の指定ができるだけでなく、タッチスクリーンのエミュレートも可能です。 デスクトップPC上で、モバイルのシミュレートやエミュレートができるツールはたくさんありますが、Chromeのモバイルエミュレーション機能は本当に便利です。 スマートフォンサイト制作のデバッグでは大いに役立ち、私はもっぱらこの機能を使ってデバッグしています。 【コンテンツ】 エミュレーション機能を有効にする デバイスをエミュレートする 画面解像度を指定しエミュレートする ユーザーエージェントを指定しエミュレートする タッチスクリーンを有効にする 【記事執筆時の環境】 Windows 7 Professional

公開日：2014年6月20日 最終更新日：2014年7月13日 Chrome デベロッパーツールのSourcesパネルでは、Webページで使用しているCSSやJavaScriptファイルを編集し、表示に反映させることができます。またJavaScriptのデバッグもこのパネルで行うことができます。 Sourcesパネルでは具体的に以下のことが可能です。 ページで読み込んでいるファイル(css/js/php/htmlなど)を検索する。 ファイル中の文字列を検索する。 CSSやJavaScriptファイルを編集して表示に反映させる。 編集したファイルをローカルに保存する。 ローカルに保存したファイルを反映させる。 JavaScriptコードのデバッグをする。 【コンテンツ】 Sourcesパネル外観 ファイルの検索と表示 文字の検索と置換 コードの編集と保存 コードの整形 JavaScriptの

公開日：2014年4月28日 最終更新日：2016年5月1日 WordPressで制作したサイトを、本番サーバーへ移行する手順を解説します。 ローカルの開発環境としてXAMPPを前提としていますが、開発用に別サーバーを立てている場合も同様の手順で移行可能です。 移行するデータとしては、Webサイトファイルとデータベースファイルがあります。 どちらも移行前に若干の修正が必要になります。 【コンテンツ】 移行元のMySQLデータベースをエクスポートする エクスポートしたSQLファイルを修正する 移行先でSQLファイルをインポートする 移行先でデータベースユーザのアクセス権を設定する wp-config.phpの修正 .htascessの修正 Webサイトファイルを移行先へアップロードする WordPress管理画面にログインして各種設定を確認する うまく移行できない時のチェックポイント 【記事

公開日：2014年5月25日 最終更新日：2014年7月13日 WordPressではwp_head()を呼び出したところで、自動的に出力されるlinkタグ・metaタグがいくつかあります。それらの追加されたタグは不要な場合も多いので、出力されないように削除する方法を解説します。 【コンテンツ】 head内に出力されるタグコード 出力されるタグを記述しているファイル 不要なタグの削除方法 プラグインを使った削除 【記事執筆時の環境】 WordPress 3.9.1 head内に出力されるタグコード ブラウザでHTMLコードを表示させてみるとわかりますが、以下のようなタグが追加で出力されています。 ※使用しているテーマや表示させているページによって追加されるタグは異なります。 <link rel="alternate" type="application/rss+xml" title="ex

公開日：2014年6月22日 最終更新日：2014年7月13日 Chrome デベロッパーツールのNetworkパネルでは、Webページでロードされるリソースに関するデータを収集することができます。リソースサイズ、ローディング時間、HTTPヘッダーなどを確認することができ、パフォーマンス改善に役立てることができます。 Networkパネルでは具体的に以下のことが可能です。 各リソースがリクエストされてから受信完了するまでの時間確認 リクエストヘッダー/レスポンスヘッダーの確認 送信されたクッキーの確認 記録したデータのHARフォーマットでの保存 【コンテンツ】 Networkパネル外観 データの記録 データ項目の追加・ソート・フィルター Timeline ビュー データのコピーと保存 詳細データの確認 【記事執筆時の環境】 Windows 7 Professional 32bit SP1