西村 文宏

ホームページ作成 ガイド 西村 文宏

にしむら ふみひろ

Web作成が楽しくなるお手伝い。分かりやすい解説を探求するWeb職人

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

ガイド記事一覧

  • CSSで幅や高さ等の指定に計算式が書けるcalcの使い方

    CSSで幅や高さ等の指定に計算式が書けるcalcの使い方

    CSSで幅や高さなどを指定する際に、「 (100% - 5em) / 3 」のような計算式が書けるcalc()の使い方を解説。割合や単位付きの数値を加減乗除してプロパティの値を決定したい場合、CSSソース内に直接計算式が書けると装飾の柔軟さが広がります。calc()を使う書き方の例と、使い方の注意点、効かない場合の対処方法などを解説。

    掲載日:2019年08月05日ホームページ作成
  • Chart.jsで折れ線・円・棒グラフを簡単に表示する方法

    Chart.jsで折れ線・円・棒グラフを簡単に表示する方法

    HTMLのcanvas要素上にグラフを描画してくれるスクリプト「Chart.js」の簡単な使い方を紹介。円グラフ・棒グラフ・折れ線グラフなど様々なグラフを、アニメーション効果付きでWebページ上に表示できます。画像ファイルとして作成するわけではないので、JavaScriptソース内の記述を書き換えるだけで、グラフの値も色も大きさも容易に修正できます。

    掲載日:2019年08月01日ホームページ作成
  • 丸囲み数字などの環境依存文字を使う方法

    丸囲み数字などの環境依存文字を使う方法

    環境依存文字(機種依存文字)でも文字化けせずに表示する方法を紹介。丸囲み数字、ローマ数字、ハートマークなど一部の特殊な文字や記号は、環境依存文字と呼ばれます。HTMLファイルの保存時に文字コード(テキストエンコーディング)をUTF-8にできない場合でも、数値文字参照という特殊な書き方を使えば、閲覧者の環境に関係なく各種記号を文字化けせずに表示できます。

    掲載日:2019年07月31日ホームページ作成
  • HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法

    HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法

    HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール(再生ボタンがあるプレーヤー)を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。

    掲載日:2019年07月26日ホームページ作成
  • CSSでIMEの状態を制御するime-modeの使い方+代替方法

    CSSでIMEの状態を制御するime-modeの使い方+代替方法

    Web上の入力フォームで日本語入力機能(IME)のON・OFF・無効状態を制御する方法に、CSSのime-modeプロパティがあります。対応ブラウザはIEやFirefoxで、Edgeでは効かなくなりました。ime-modeの書き方と、ime-modeを使わずに済ませる代替方法として、ChromeやiOS版Safariなどで使えるHTML5.1のinputmode属性や、半角全角を自動変換する方法などをご紹介。

    掲載日:2019年07月24日ホームページ作成
  • レスポンシブな2カラムレイアウトを作るCSSの書き方

    レスポンシブな2カラムレイアウトを作るCSSの書き方

    レスポンシブWebデザインを使って2カラム(2段組)レイアウトを作成する方法を、簡単なテンプレートとしても使えるHTML+CSSソースの例と共に解説。スマートフォンなど幅の狭い画面では1カラム(段組なし)で表示し、PCなど幅の広い画面ではマルチカラムで表示するような「画面幅に適したレイアウトで表示できるWebサイト」も、HTML+CSSだけで簡単に作れます。

    掲載日:2019年07月19日ホームページ作成
  • 1文字ずつ文字色を変える、文字単位でのCSS適用方法

    1文字ずつ文字色を変える、文字単位でのCSS適用方法

    HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript(jQuery)を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。

    掲載日:2019年07月18日ホームページ作成
  • 一定スクロールで出る「トップに戻る」ボタンの作り方

    一定スクロールで出る「トップに戻る」ボタンの作り方

    Webページが指定距離だけスクロールされた際に「トップに戻る」ボタンを動的に表示する方法を解説。JavaScriptで「現在のスクロール位置」を取得し、「指定量以上スクロールされたかどうか」を判定してボタンの表示・非表示を切り替える処理は、jQueryを使えば簡単。HTMLで作成したリンクをCSSでボタン型に装飾し、常に画面の右下にボタンが表示されるように作ります。

    掲載日:2019年07月16日ホームページ作成
  • お気に入り(ブックマーク)登録ボタンを作る方法

    お気に入り(ブックマーク)登録ボタンを作る方法

    お気に入り登録ボタン(ブックマークボタン)の作成方法を解説。IE11までならJavaScriptでブックマーク登録画面を出せます。SafariやChromeなど他のブラウザでは動かないため、代わりにソーシャルブックマークサービス「はてなブックマーク」や「Pocket」にURLを登録するボタンの設置方法も紹介。

    掲載日:2019年07月16日ホームページ作成
  • 文字列をアーチ状(扇形)や円形に並べて配置する方法

    文字列をアーチ状(扇形)や円形に並べて配置する方法

    HTMLで任意の要素に書いた文字列を、アーチ状(扇形)にカーブさせて表示したり、円形に配置して表示したりする方法を解説。jQueryを使うスクリプト「Arctext.js」を活用すれば、テキストを画像化することなく自由な半径でアーチ状に配置できます。上向き・下向きのアーチを組み合わせれば、コーヒー店のロゴのように文字を円形に配置することもできます。

    掲載日:2019年07月12日ホームページ作成
1 2 3 20 38