サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
weback.net
公開日:2014年5月8日 入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。 JavaScriptで実現する方法もありますが、HTML5で導入されたplaceholder属性を使うとはるかに簡単に実現できますので、その方法をとることにします。 現在ではほとんどのブラウザがHTML5対応になっていますので、特殊な事情がない限りこの方法で構わないでしょう。 やり方は、以下の例のようにplaceholder属性で表示する文字列を指定するだけです。 <form action="" method="post"> <p><label>電話番号:<br><input type="tel" name="telNumber" placeholder=
公開日:2014年8月11日 最終更新日:2019年3月25日 XAMPPでローカルに開発環境を構築している場合、LAN内の他のPCからWordPressで作ったWebサイトにアクセスする方法を解説します。これによりWi-Fiで同じネットワークに接続したスマートフォンなどからもサイトを閲覧できるので、デバッグする時に便利です。 ローカル環境では一般に、ホスト名が「localhost」、あるいはlocalhostを示すIPアドレス「127.0.0.1」でアクセスします。 つまりブラウザに入力するURLは、「http://localhost/Webページのパス」あるいは「http://127.0.0.1/Webページのパス」となります。 同じネットワーク内の他のPCからアクセスする場合は、この "localhost" をXAMPPをインストールしたPCに割り当てられたIPアドレスに変更してアク
公開日:2014年8月29日 最終更新日:2014年8月31日 アイコンフォント作成サイト「IcoMoon App」では、自分で作成したカスタムアイコンをフォントファイルにすることができます。自作アイコンをフォントファイルにしてWebページに表示するまでの具体的な手順について解説します。 IcoMoon App には数千種類のアイコンが登録されており、ユーザーが選択したアイコンをフォントファイルにしてダウンロードできます。 このサイトの具体的な利用方法は、以下の記事にも説明していますので参照してください。 「アイコンフォントの具体的な使い方 - IcoMoon App」 この記事では、自作アイコンをフォントファイルにする方法を解説していきます。 【コンテンツ】 アイコンのSVGファイルを用意する SVGファイルを読み込む アイコンを選択する フォントファイルをダウンロードする ダウンロード
公開日:2014年6月30日 WordPressのマルチサイト機能は複数サイトを一括管理でき、インストールやアップデートが1回ですむため非常に便利です。最初にシングルサイトで構築していたサイトを、マルチサイトに移行する手順を解説します。 【記事執筆時の環境】 WordPress 3.8.2 前提としては、マルチサイトでWordPressをインストールして、既存サイトを子サイトとして移行するものとします。 通常通りWordPressをインストールします。 マルチサイト化を行います。詳細は以下の記事を参照してください。 「WordPressマルチサイト機能でWebサイトを構成する」 親サイトおよび移行する既存サイトを、ネットワーク管理画面で設定します。 パーマリンク設定などWordPressの基本設定をします。 必要なプラグインをインストールします。 既存サイトの画像をアップロードするディレク
公開日:2014年9月22日 メニューが開閉するアコーディオンメニューはスマートフォンサイトでよく見かけます。プラグインもたくさんありますが、それらを使わないでもシンプルなコードで実装できますので、基本的な作成方法を解説します。 作成するメニューは以下になります。横幅はスクリーンサイズに応じて変化します。 カテゴリをクリックするとその下に隠れているメニューが開きますが、そのとき右側のアイコンも切り替ります。 今回は各カテゴリを複数同時に開くことができるメニューと、1つのカテゴリを開くと他のカテゴリは閉じるメニューの2種類作成してみます。 またメニューに表示するアイコンは、CSSで作成したものとアイコンフォントで作成したものを2つ示します。 スマホでもPCでも動作するデモページを用意しましたのでご覧ください。 >> 複数のカテゴリがオープン可能なメニューの DEMO ページへ >> 1つのカ
公開日:2014年8月24日 jQuery UIでは、アイコン付きのボタンやメニューを作成することができます。jQuery UIをインクルードしていれば、付属しているアイコンはHTML要素にクラス指定することで、単独でも使用できます。 アイコン付きボタンなどの作成方法は他の記事にゆずることとして、ここではアイコンだけを取り出して利用する方法を解説します。 【コンテンツ】 利用できるアイコンの一覧 jQuery UIをダウンロードする jsファイルとcssファイルをインクルードする アイコンを表示するためのコード アイコンの色を指定して表示する 【記事執筆時の環境】 jQuery UI 1.11.1 jQuery本体 1.10.2 利用できるアイコンの一覧 jQuery UIに付属し利用できるアイコンは以下になります。 アイコンのサイズは16x16ピクセルで、1枚の画像にまとめられているため
特集記事 WordPress の 基礎から応用まで 利用するにあたって必要な知識を体系的にまとめた記事 【カテゴリー】 WordPressの概要 WordPressの仕組み WordPressのカスタマイズ性 制作環境とインストール 基本設定項目 追加設定項目 Gutenbergエディター 具体的な制作作業 応用・高度機能 実践的なTips よく使われるテーマ紹介 有用なプラグイン紹介 独自テーマによる制作 jQuery Mobile を 基本から覚える スマホサイト制作に最適なフレームワークの利用方法を解説 提供しているサービス WordPress を利用した Webサイト制作の方法を、あなたのオフィスにうかがいご説明いたします。 料金:¥49,500 サービス詳細ページ >> 申し込みフォーム >> 一刻も早く Webサイトが必要な方のために、一緒に作業し1日で公開までもっていきます。
公開日:2014年9月15日 スマートフォン用にサイトを用意した場合、ユーザーからのアクセスをPCサイトとスマートフォンサイトに振り分けるにはユーザーエージェントで判別します。.htaccess、PHP、JavaScript それぞれでユーザーエージェントを判別し振り分ける方法を解説します。 Webサイトの振り分け方法としては、ユーザーエージェントの他にスクリーンサイズで振り分ける方法もあります。こちらはレスポンシブWebデザインでよく用いられます。 また WordPress などの CMS を使っているサイトなら、プラグインを使ってテーマごと切り替える方法もあります。 PC用とスマートフォン用にサイトを別々に用意した場合は、ブラウザから送られてくるユーザーエージェントの文字列を、何らかのコードを組んで判別し振り分けるのが一般的です。 【コンテンツ】 モバイル端末のユーザーエージェントの見
aタグにonclick属性をつけて、クリックした時にJavaScriptの関数を実行するようにした場合、関数実行後にhref属性の値を参照しようとします。 これをキャンセルするには以下のようにfalseを戻り値となるように記述します。 これでクリック時には、指定した関数だけを実行してくれます。
公開日: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年5月28日 最終更新日:2014年7月13日 Webサイトにフォームを設置し、ローカルにあるファイルを指定してサーバーにアップロードするPHPコードを解説します。アップロード時には、エラーチェックとサーバー環境に合わせた文字コード変換処理を含めます。 【コンテンツ】 フォームの作成 アップロードされたファイル情報 エラーのチェック ファイルの保存 ファイル名文字コードの変換 PHP処理部のコード 【記事執筆時の環境】 PHP 5.4.19 フォームの作成 ファイルアップロードを行うフォームを作成します。 formタグの中では、enctype属性を"multipart/form-data"として、 以下のように記述します。 <form action="" method="post" enctype="multipart/form-data"> <p>ファイル:<input
公開日:2014年8月20日 最終更新日:2015年8月10日 スマートフォンサイトの制作で重要になるのが、ブラウザの表示設定を行う Viewport(ビューポート)というmeta要素です。Viewportの設定次第でWebページの見た目とユーザーの使い勝手が変わるので、サイトの性質に合わせて適切に設定する必要があります。 Viewportを設定しない場合は、スマートフォンのブラウザは横幅980pxでWebページを表示します。これはlandscapeモードにしても同様です。 Viewport設定のないPC向けサイトなどを閲覧した場合は、スマートフォンの画面に画像や文字がかなり小さく表示されることになります。 【コンテンツ】 Viewportの設定項目と書式 各プロパティの設定ガイドライン Viewport設定例 Viewportの設定項目と書式 Viewportでは以下の設定ができます。
公開日: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年10月25日 最終更新日:2014年11月8日 jQuery Mobile ではさまざまなタイミングで発生するカスタムイベントを用意しています。この記事では jQuery Mobile でイベントを利用するための基本的事項と、用意しているイベントのリストを示します。 «次の特集記事» jQuery Mobile ページイベントの種類・発生タイミングと利用例 «前の特集記事» jQuery Mobile セレクトメニューを設置する 【コンテンツ】 イベントの概要 イベントリスト 【記事執筆時の環境】 jQuery Mobile 1.4.4/1.4.5 イベントの概要 JavaScript を扱う上ではイベントは欠かすことができない要素です。 jQuery Mobile では標準の jQueryイベントを使うことができますが、その他さまざまなタイミングで発生するカスタムイベン
公開日: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月22日 最終更新日:2019年3月25日 Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。 欧文フォントだけを考えればいいのなら、Webフォントで対応することが現在は主流です。 しかし文字種類の多い日本語フォントが必要なサイトでは、どうしても端末にインストールされているデバイスフォントを使用せざるを得ません。 どういうデバイスフォントがインストールされているかは、端末により異なります。 MacとWindowsで共通しているフォントもありますが、デフォルトで使用するフォントは違いますので、Webページの表示を整えたいのならきちんと指定することが必要です。 スマートフォンまで考えたら
公開日: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年2月5日 最終更新日:2019年3月25日 WordPressでは、標準で検索機能が用意されており、簡単なコードの記述で検索フォームを設置することができます。検索する際は、一般の検索エンジンとは少し違う部分があります。ユーザビリティを考えると若干のカスタマイズも必要ですので、それらを解説します。 【コンテンツ】 検索フォームを設置する場所にコードを記述する 検索フォーム部分のCSS設定をする 検索結果を表示するページを用意する WordPress検索機能の仕様 検索対象を絞り込む 検索条件未入力時の処理を追加する 【記事執筆時の環境】 WordPress 3.8.1 検索フォームを設置する場所にコードを記述する フォームを設置するには、表示したいページの場所に、 <?php get_search_form(); ?> と記述するだけです。 これで、以下のようなHTMLコー
公開日:2014年3月18日 最終更新日:2014年7月13日 Webサイトを運用するには、データベースも定期的にバックアップしなければなりません。 MySQLを自動でバックアップしてくれるツール「phpMyBackupPro」をサーバーへ設置する方法を解説します。 WordPressではMySQLデータベースを自動でバックアップしてくれるプラグインがありますが、CMSを利用しない一般サイトのデータベースは他の方法を取らざるを得ません。 phpMyBackupProは、簡単な設定でMySQLデータベースを自動バックアップしてくれるツールです。 バックアップするSQLファイルは、 1.サーバー内の任意のディレクトリに保存 2.他サーバーへFTP転送 3.メールの添付ファイルとして送信 と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
このページを最初にブックマークしてみませんか?
『Web Tips アーカイブ | ホームページ作成、Web制作・運用テクニック』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く