IT・インターネット
ホームページ作成 新着記事一覧
-
CSSで幅や高さ等の指定に計算式が書けるcalcの使い方
更新日:2019/08/05
CSSで幅や高さなどを指定する際に、「 (100% - 5em) / 3 」のような計算式が書けるcalc()の使い方を解説。割合や単位付きの数値を加減乗除してプロパティの値を決定したい場合、CSSソース内に直接計算式が書けると装飾の柔軟さが広がります。calc()を使う書き方の例と、使い方の注意点、効かない場合の対処方法などを解説。
-
Chart.jsで折れ線・円・棒グラフを簡単に表示する方法
更新日:2019/08/01
HTMLのcanvas要素上にグラフを描画してくれるスクリプト「Chart.js」の簡単な使い方を紹介。円グラフ・棒グラフ・折れ線グラフなど様々なグラフを、アニメーション効果付きでWebページ上に表示できます。画像ファイルとして作成するわけではないので、JavaScriptソース内の記述を書き換えるだけで、グラフの値も色も大きさも容易に修正できます。
-
丸囲み数字などの環境依存文字を使う方法
更新日:2019/07/31
環境依存文字(機種依存文字)でも文字化けせずに表示する方法を紹介。丸囲み数字、ローマ数字、ハートマークなど一部の特殊な文字や記号は、環境依存文字と呼ばれます。HTMLファイルの保存時に文字コード(テキストエンコーディング)をUTF-8にできない場合でも、数値文字参照という特殊な書き方を使えば、閲覧者の環境に関係なく各種記号を文字化けせずに表示できます。
-
HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法
更新日:2019/07/26
HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール(再生ボタンがあるプレーヤー)を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。
-
CSSでIMEの状態を制御するime-modeの使い方+代替方法
更新日:2019/07/24
Web上の入力フォームで日本語入力機能(IME)のON・OFF・無効状態を制御する方法に、CSSのime-modeプロパティがあります。対応ブラウザはIEやFirefoxで、Edgeでは効かなくなりました。ime-modeの書き方と、ime-modeを使わずに済ませる代替方法として、ChromeやiOS版Safariなどで使えるHTML5.1のinputmode属性や、半角全角を自動変換する方法などをご紹介。
-
レスポンシブな2カラムレイアウトを作るCSSの書き方
更新日:2019/07/19
レスポンシブWebデザインを使って2カラム(2段組)レイアウトを作成する方法を、簡単なテンプレートとしても使えるHTML+CSSソースの例と共に解説。スマートフォンなど幅の狭い画面では1カラム(段組なし)で表示し、PCなど幅の広い画面ではマルチカラムで表示するような「画面幅に適したレイアウトで表示できるWebサイト」も、HTML+CSSだけで簡単に作れます。
-
1文字ずつ文字色を変える、文字単位でのCSS適用方法
更新日:2019/07/18
HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript(jQuery)を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。
-
一定スクロールで出る「トップに戻る」ボタンの作り方
更新日:2019/07/16
Webページが指定距離だけスクロールされた際に「トップに戻る」ボタンを動的に表示する方法を解説。JavaScriptで「現在のスクロール位置」を取得し、「指定量以上スクロールされたかどうか」を判定してボタンの表示・非表示を切り替える処理は、jQueryを使えば簡単。HTMLで作成したリンクをCSSでボタン型に装飾し、常に画面の右下にボタンが表示されるように作ります。
-
お気に入り(ブックマーク)登録ボタンを作る方法
更新日:2019/07/16
お気に入り登録ボタン(ブックマークボタン)の作成方法を解説。IE11までならJavaScriptでブックマーク登録画面を出せます。SafariやChromeなど他のブラウザでは動かないため、代わりにソーシャルブックマークサービス「はてなブックマーク」や「Pocket」にURLを登録するボタンの設置方法も紹介。
-
文字列をアーチ状(扇形)や円形に並べて配置する方法
更新日:2019/07/12
HTMLで任意の要素に書いた文字列を、アーチ状(扇形)にカーブさせて表示したり、円形に配置して表示したりする方法を解説。jQueryを使うスクリプト「Arctext.js」を活用すれば、テキストを画像化することなく自由な半径でアーチ状に配置できます。上向き・下向きのアーチを組み合わせれば、コーヒー店のロゴのように文字を円形に配置することもできます。