Web Tips
Web一般
- Webページに サイズ可変の YouTube 動画を埋め込む
- Google FontsをWindows PCにインストールして使う
- Google FontsをWebページで使う
- Webアクセス履歴を基にした広告表示を無効にする
- 電子書籍におけるPDFファイルのセキュリティ設定
- Webサイトの特定ディレクトリにアクセス制限をかける方法
- GmailとOutlookを連携して使用するための設定方法
- 入力した文章の文字数をカウントする方法各種
制作手順・環境
- Webデザインにグリッドシステムを利用する
- スマートフォンサイトの開発環境としてEdge Inspectを利用する
- XAMPP環境でLAN内の他PCからWordPressサイトにアクセスする
- Android 開発環境として Android SDK Tools を利用する
- セッションの有効期限を設定する
- Eclipse+XdebugによるPHPのデバッグ方法
- Pleiades All in Oneによるローカル開発環境の構築方法
ホームページ作成ソフト
- Dreamweaverで「_notesフォルダ」を生成しないようにする
- Dreamweaverでローカルとリモートを同期させる
- Aptana Studio 3のインストールと設定方法
- Dreamweaver CS6とWordPressを連携させる
- NetBeansのインストールと設定方法
HTML/CSS
- CSS3 animationプロパティでアニメーションを実装する
- CSS3 transitionプロパティでアニメーションを実装する
- CSS3の変形機能「transformプロパティ」の使い方
- CSSだけで背景パターンを作成する
- CSS3 線形グラデーションの記述方法
- Fluid image でスクリーンサイズに合わせて画像サイズを変える
- box-sizing: border-box を指定しレイアウト崩れを防止する
- マルチカラムレイアウトで自由度の高い段組みを構成する
- フレキシブルボックス(Flexbox)を使い柔軟なレイアウトを組む
- display: table を使って要素を表組みのように均等配置する
- display: inline-block を使って要素を横並びにする
- CSSだけで作成したアイコンを利用する
- 階層構造を持つドロップダウンメニューの作成方法
- 入力ボックスの初期値として薄いグレーの文字を表示する
- Web制作者がおさえておくべきmeta要素プロパティの種類
- box-shadowプロパティを使って複数の境界線を設定する
- マウスオーバーした時、CSS3で画像を半透明にする方法
- クリッカブルマップ(イメージマップ)で１枚の画像に複数リンクを設定する
JavaScript
- jquery.cookie を使ってサイトの状態を保存する
- jQuery UIに付属しているアイコンを単独で利用する
- 入力フォームのテキストガイドをjQueryで実装する
- jQueryで開閉式FAQを実装する
- コピーライトの年表示を自動更新する
- JavaScriptでスムーズスクロールを実装する
- jQuery UIを使ってタブメニューを実装する
PHP/MySQL
- MySQLの動作をコマンドラインから確認する
- フォームからアップロードされたファイルをPHPで処理する
- phpMyBackupProによるMySQLデータベースの自動バックアップ
- 正規表現によるフォーム入力データの妥当性確認
- Qdmail/Qdsmtpを使ったメール送信フォーム作成
画像/パーツ制作
- FireworksでCSSスプライトを作成しページに実装する方法
- Webページにダミー画像を表示する「place IMG」の使い方
- 自作のアイコンフォントを「IcoMoon App」で作成する
- アイコンフォントの具体的な使い方 - IcoMoon App
- アイコンフォントの具体的な使い方 - Fontello
- アイコンフォントの具体的な使い方 - Font Awesome
- アイコンフォントの具体的な使い方 - Genericons
- アイコンフォントの具体的な使い方 - ZURB University
- アイコンフォントの基本的な使い方
- Fireworks CS6でCSS3グラデーションボタンを作成する
- Adobe Illustratorでのスライス作成方法
- Adobe Photoshopでのスライス作成方法
- Adobe Fireworksでのスライス作成方法
- PNGファイルのサイズを圧縮し最適化するツール
- eBookやDVDなどの3Dカバーを作成する方法
ブラウザ・ツール
- 各ブラウザでのプライベート ブラウジングの起動方法
- Chrome デベロッパーツールでのJavaScriptデバッグ方法
- Chrome デベロッパーツールでPageSpeed Insightsを使う
- Chrome デベロッパーツール Auditsパネルの使い方
- Chrome デベロッパーツール Resourcesパネルの使い方
- Chrome デベロッパーツール Networkパネルの使い方
- Chrome デベロッパーツール Workspaces機能の設定
- Chrome デベロッパーツール Sourcesパネルの使い方
- Chrome デベロッパーツール Elementsパネルの使い方
- Chrome デベロッパーツールの使い方概要
- Webサイトのリンク切れチェックソフト「LinkCheker」
- Allway SyncでWebサイトデータを自動バックアップする方法
- Chromeデベロッパーツールでモバイルをエミュレートする
- Firefoxのユーザーエージェント切替えによるスマホサイト表示
- ランダムなパスワード・文字列を一括して自動生成するツール
WordPress
- WordPressの検索機能をプラグイン無しで拡張する
- WordPressで不要な画像サイズの自動生成を停止する
- WordPressの記事個別にCSSファイルを適用する
- WordPress テーマにカスタムヘッダーを設置する
- WordPressのシングルサイトをマルチサイトへ移行する手順
- WordPressでrobots.txtを設定する
- WordPressで投稿の自動保存とリビジョンをコントロールする
- WordPressがhead内へ追加する不要なタグを削除する
- WordPressサイトをローカル環境から本番サーバーへ移行する
- プラグインWP Page Numbersでページナビゲーションを設置する
- WordPressマルチサイトでの更新情報サービスについて
- WordPressでの投稿記事入力時に設定されるスタイルについて
- 記事一覧の２ページ目以降やアーカイブページなどをnoindexにする
- WordPressのwp-config.phpの中に認証用ユニークキーを設定する
- WordPressマルチサイト機能でWebサイトを構成する
- WordPressの検索機能を使ってサイト内検索フォームを設置する
- WP SiteManagerを使ってパンくずナビを表示する
- WordPressでカスタムメニューを利用する
スマートフォンサイト
- 表を横にスクロール可能なレスポンシブテーブルを実装する
- スマートフォンサイトにアコーディオンメニューを実装する
- Fluid Image 対応のフリックで動作するスライドショーを実装する
- スマホページにタブ切り替えをプラグインを使わず実装する
- スライドメニューのプラグインを使わない実装方法
- スマートフォンページにPCサイトへのリンクを設ける
- WordPressプラグインでスマートフォンとPC用テーマを振り分ける
- スマートフォンとPCをユーザーエージェントで振り分ける
- スマートフォンを考慮したフォント指定の検討
- スマートフォン向けサイトのViewport設定まとめ
- Windowsで使えるiPhone/iPadシミュレータ「iBBDemo3」
- スマートフォン画面と外観を表示するツール「Mobilizer」
- 表示する画像や文字の切り替えをdisplay/visibilityプロパティで行う
アクセス解析・SEO
- アクセス解析ツール「リサーチアルチザンライト」の使い方
- Google ウェブマスターツールでこれだけはチェックする
- Bing Webマスターツールへサイトを登録する
- Google ウェブマスターツールでサイトマップを送信する
- Google アナリティクスをセットアップする
- Google ウェブマスターツールへサイトを追加する
- Google検索エンジンからWebサイト情報を取得する
- アクセス解析ツール「リサーチアルチザンライト」のインストール方法
- URL正規化をする.htaccessの記述の仕方
広告・ネットビジネス
- Chrome 拡張機能 Google Publisher Toolbar でAdSense情報を確認する
- Google AdSense の使い方 ～広告設置・運用方法～
- Google AdSense の始め方 ～申し込みから支払い手続きまで～
- PayPal決済完了時に独自メールを自動送信する
- PayPalテストサイト Sandboxで決済処理を検証する
- PayPal決済サービスを利用し独自オンライン決済を導入する
特集記事：WordPress
- WordPressの概要
- WordPressの仕組み
- WordPressのカスタマイズ性
- 制作環境とインストール
- 基本設定項目
- 追加設定項目
- Gutenbergエディター
- 具体的な制作作業
- 応用・高度機能
- 実践的なTips
- よく使われるテーマ紹介
- 有用なプラグイン紹介
- 独自テーマによる制作
特集記事：jQuery Mobile
- jQuery Mobile 戻るボタンの一括設定と独自の戻るボタン
- jQuery Mobile フルスクリーンモードを設定する
- jQuery Mobile グリッドレイアウトで要素を均等に配置する
- jQuery Mobile デフォルトアイコンを拡張する
- jQuery Mobile オリジナルアイコンを組み込む
- jQuery Mobile ThemeRollerでカスタムテーマを作成する
- jQuery Mobile ウィジェットのオプションを JavaScriptで設定する
- jQuery Mobile サイト全体の動作を規定するグローバル設定
- jQuery Mobile ページイベントの種類・発生タイミングと利用例
- jQuery Mobile イベントの概要とイベントリスト
- jQuery Mobile セレクトメニューを設置する
- jQuery Mobile スライダーを設置する
- jQuery Mobile フリップスイッチを設置する
- jQuery Mobile ラジオボタンを設置する
- jQuery Mobile チェックボックスを設置する
- jQuery Mobile 検索ボックスを設置する
- jQuery Mobile テキスト入力を設置する
- jQuery Mobile フォームを設置する基本
- jQuery Mobile レスポンシブテーブルを設置する
- jQuery Mobile アコーディオン式コンテンツを設置する
- jQuery Mobile 開閉式コンテンツを設置する
- jQuery Mobile パネルを設置する
- jQuery Mobile ポップアップの利用例
- jQuery Mobile ポップアップを設置する基本
- jQuery Mobile ダイアログを設置する
- jQuery Mobile さまざまなスタイルのリスト例
- jQuery Mobile 分類リストと分割リストを設置する
- jQuery Mobile 基本的なリストを設置する
- jQuery Mobile タブを設置する
- jQuery Mobile ナビゲーションバーを設置する
- jQuery Mobile フッターを設置する
- jQuery Mobile ヘッダーを設置する
- jQuery Mobile アイコンをボタンに表示する
- jQuery Mobile ボタンを設置する
- jQuery Mobile 提供されているアイコン
- jQuery Mobile テーマの基本的な仕組み
- jQuery Mobile ウィジェットにスタイルを指定するクラス
- jQuery Mobile ウィジェットにオプションを指定するデータ属性
- jQuery Mobile ページを構成するUI要素(ウィジェット)の指定方法
- jQuery Mobile １つのHTMLファイルに複数ページを記述する
- jQuery Mobile ページ遷移の仕組み
- jQuery Mobile 使用する環境を整える
