西村 文宏 （ニシムラ フミヒロ） 記事一覧

All About ホームページ作成ガイド

西村 文宏 （ニシムラ フミヒロ）

2001年より、その道のプロ（専門家）が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。

他の著者をもっと見る

• 

  サイト制作

  2016/09/29

  文字を画像の上に重ねて表示させる方法

  画像内に文字を書き込みたい場合、その都度ソフトウェアを使って加工するのは面倒！それに、画像を直接加工してしまうと、「修正したくなったときに再加工する作業が面倒」「文字部分が検索にはヒットしなくなる」といったデメリットもあります。そこで、スタイルシートを使い、画像の上に文字を重ねる方法をご紹介します。

  • #HTML

• 

  サイト制作

  2016/09/26

  サイト訪問者が、機能に対応しているかどうかの識別方法

  サイト訪問者は、全員が最新バージョンのブラウザを使っているとは限りません。OSもブラウザも様々でしょう。HTML5やCSS3で追加された「比較的新しい機能」を使いたい場合に、どのようにして古いブラウザで閲覧された場合の対策をするかを解説します。

  • #JavaScript

• 

  サイト制作

  2016/09/26

  レスポンシブデザインの作りかた

  レスポンシブデザインとは、閲覧者の画面サイズに応じて、適用するスタイルシートを変化させる仕組みのこと。閲覧者の端末の種類は問わず、画面サイズだけを基準にしてデザイン（適用するスタイルシート）を選択します。今回は、この「レスポンシブデザイン」の作りかたについて解説いたします。

  • #CSS

• 

  サイト制作

  2016/09/20

  ブラウザ上でスマホ用サイトを簡単に作成できるサービス

  直接HTMLやスタイルシートを書くことなく、ソフトウェアのインストールすらも必要なく、ブラウザ上だけで簡単にスマホ用サイトを作れるサービスをご紹介いたします。

• 

  サイト制作

  2016/09/20

  複数のサムネイル画像から拡大画像をスライド表示させる方法

  複数の商品画像を「使いやすく」かつ「おもしろく」見せる効果が出せる、「FlexSlider2」というスクリプトの使用方法をご紹介します。

  • #JavaScript

• 

  サイト制作

  2016/09/20

  「表」の体裁を整える装飾で「見やすい表」を作る方法

  ウェブサイトでは、table要素を使って「表」を作ることが多々ありますね。特にアフィリエイトサイトでは、紹介する商品・サービスの仕様を掲載する際などにも「表」をよく活用されるのではないでしょうか。今回は、表を見やすく掲載するために、表の体裁を整える（装飾する）方法をご紹介いたします。

  • #HTML

• 

  サイト制作

  2016/09/20

  SNSボタンを一括して掲載するスクリプトの使いかた

  最近では、FacebookやTwitterなどのSNSと連携できるボタンをウェブページ上に設置しているサイトをよく見かけます。しかし、個々のソースを1つ1つ調べて掲載するのは面倒・・・そんなときには、これらのSNSボタンを一括して掲載できるスクリプトを利用するのがお勧めです。

  • #JQuery

• 

  サイト制作

  2015/05/25

  BootstrapでレスポンシブWebデザインを簡単に作る方法

  スタイルシートを工夫することで、どんな環境でも単一のHTMLで閲覧できる「レスポンシブWebデザイン」はご存じですか？端末別に専用サイトを用意する必要がなくなるため、労力を大きく減らせるデザインです。今回はその「レスポンシブ」なサイトを簡単に作れる「Bootstrap」をご紹介します。

• 

  サイト制作

  2015/04/13

  「jQueryMobile」を使って様々なページ切替効果を出す

  今回は、スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、ダイアログを表示する際に、さまざまな表示効果（切替効果）を加える方法を10種類ご紹介します。

  • #JQuery

• 

  サイト制作

  2015/04/13

  「jQueryMobile」を使って別ページをダイアログとして表示させる

  スマートフォン用の狭いウェブサイトの画面に補足情報を表示したいときなど、短い文章や少量の画像を表示させる際に便利な「ダイアログ」の作成方法を、スマートフォンらしいデザインが簡単に作れるフレームワーク「jQuery Mobile」を使って解説します。

  • #JQuery

• 

  サイト制作

  2015/04/13

  タップしやすいインセットリストを作る

  スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を使えば、様々な形態のリストを作ることができます。今回は、リスト全体（外枠）の見栄えを変える方法をサンプルページを参照しながらご紹介いたします。

  • #JQuery

• 

  サイト制作

  2015/04/13

  検索フィルタ付きリストを作る

  スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を活用して、見やすくてタップしやすい様々な形のリストを簡単に作る方法やリスト項目内を検索できるようにする方法など、サンプルページを参照しながら解説します。

  • #JQuery

• 

  サイト制作

  2015/04/13

  タップしやすい画像付きリストを作る

  スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を活用して、サムネイル画像やアイコン画像を付加したリンクリストを作る方法をサンプルソースを参照しながらご紹介します。アフィリエイト商品一覧ページを作る際にも役立ちますので、ぜひご活用ください。

  • #JQuery

• 

  サイト制作

  2015/04/13

  スマホらしいリンクリストを簡単に作る

  スマートフォンらしいデザインが簡単に作れる「jQuery Mobile」を活用して、メニューやサイトマップを作る用途で特に役に立つ、見やすくてタップしやすい形の「リンクリスト」を簡単に作る方法をご紹介します。今回は、実際にサンプルページを参照しながら説明していきます。

  • #JQuery

• 

  サイト制作

  2015/04/13

  スマホ用に様々なスタイルのボタン型リンクを作る

  フレームワーク「jQuery Mobile」を使って、スマートフォンらしいデザインのボタン（リンク）を作成する方法をご紹介します。 サンプルHTMLソースを使って「複数のボタンが合体したグループ型ボタン」の作り方などを解説します。

  • #JQuery

• 

  サイト制作

  2015/04/13

  「jQueryMobile」を使ってアコーディオン式コンテンツを作る

  スマートフォンらしいデザインを簡単に作れる「jQuery Mobile」を使って、今回は１ページ内にたくさんの情報を並べて掲載する際に便利な「アコーディオン式コンテンツ」の作成方法を、実際に「jQuery Mobile」を使って作成したHTMLのソースを参照しながら解説します。

  • #JQuery

• 

  サイト制作

  2015/04/13

  「jQueryMobile」でスマホらしいページデザインを簡単に作る3

  複数ページに分割するほどでもない情報や、複数ページに分割してしまうと逆に分かりにくくなる情報がある場合、ヘッダ（見出し）部分をタップすることでコンテンツ（中身）が表示される「開閉式コンテンツ」を利用すると便利です。今回は実際にサンプルHTMLを使ってご紹介します。

  • #JQuery

• 

  サイト制作

  2015/04/13

  「jQueryMobile」でスマホらしいページデザインを簡単に作る2

  スマートフォンでのページ移動の際に、読み込みに時間がかかり、操作がもたついてしまうデメリットを解消するために、便利なHTMLファイル内に複数ページのデータを収録できる「jQuery Mobile」の機能を紹介します。今回は具体的にHTMLのソースとサンプルを使って解説します。

  • #JQuery

• 

  サイト制作

  2015/04/13

  PC版とスマートフォン版サイトを自動振り分けする方法

  PC用サイトに加えてスマートフォン用サイトを開設した際には、スマートフォン利用者へ向けて存在を知らせる必要があります。今回は、アクセス者の利用端末を判別して、PC版サイトとスマートフォン版サイトを自動で振り分けする方法をご紹介します。

• 

  サイト制作

  2015/04/13

  「jQueryMobile」でスマホらしいページデザインを簡単に作る

  「jQuery Mobile」というJavaScriptで作られたフレームワークをご紹介します。手間のかかる背景がグラデーションになっているヘッダやフッタ、指で押しやすいように面積を広くしたボタン型リンクなど、よくある『スマホらしいデザイン』が、ウェブページ内で簡単に実現できます。

  • #JQuery

• 

  サイト制作

  2015/04/13

  PC上でスマートフォン表示を確認できるツールの紹介

  パソコン上で仮想的なスマートフォンを動作させ表示確認できる便利なソフトウェア「Android スマートフォン・エミュレータ」をご紹介します。

• 

  サイト制作

  2015/04/13

  スマホ対応サイト『リンクを指で押しやすく装飾する方法』

  スマートフォン用ウェブページのために「押しやすいリンク」を作りたいかた向けに、 押しやすい1行まるまる占有する「大きなボタン」に装飾するHTMLソース例をご紹介します。

  • #HTML

• 

  サイト制作

  2015/04/13

  スマートフォン対応サイトの作りかたの基礎

  これからスマートフォン用サイトを作成する人にむけて、スマートフォン用サイトを作るには何が必要か、作成する際に注意しなければいけない問題点や、スマートフォン用ブラウザが勝手に縮小表示するのを回避するための方法をご紹介します。