ホームページ作成 人気記事ランキング （4ページ目）

ウェブ上に表示した画像の上に文字を重ねる方法を解説。HTMLとCSSを使えば、表示位置(座標)を指定することで画像の上に任意の文字を重ねられます。画像そのものを加工する必要は一切ありません。HTMLで画像と文字を掲載し、スタイルシートで文字の配置を調整するだけの簡単な方法です。表示例に加えて、コピー＆ペーストで使えるサンプルソースと共に解説。

ウェブページのデザインをモバイルファーストで作る際のCSSソースの書き方を解説。スマートフォンに最適化したシンプルなCSSを「共通デザイン」として先に記述しておき、後から「タブレット向けの差分デザイン」や「PC向けの差分デザイン」を付け足していくモバイルファーストな書き方なら、CSSソースの総量を減らしやすく、更新の手間も少なくて済みます。

レスポンシブWebデザインでCSSを書く際のブレイクポイントを、2018年版アクセス解析結果の画面サイズシェアから考える方法を解説。スマホは375px、タブレットは768pxの横幅が最も多いとはいえ、375と768をブレイクポイントにすれば良いわけではありません。さらに、モバイル端末とPCとの境界は1024～1280pxのどこに設定すれば良いのかなど、ブレイクポイントの決め方をご紹介。

CSSのborder-radiusプロパティを使って、スタイルシートだけでボックスなどの角を丸くする方法を解説。枠線が引かれていれば四角い枠線の角が丸くなりますし、背景色が塗られていれば四角い塗りつぶし領域の角が丸くなります。画像の四隅を丸くカットすることも可能。角丸の半径は1ピクセル単位で設定でき、四隅の一部だけ(上だけ・下だけ・左だけなど)を角丸にすることもできるため、連結ボタンに見せる装飾も簡単に作れます。

HTMLの背景に画像を全画面で表示させる方法を解説。ブラウザのウインドウサイズに関係なく、1枚の背景画像が縦横比を維持して必ず画面全体を覆うように表示できます。CSSのbackground関連プロパティを書くだけの簡単な方法で、フルスクリーンでの縦横中央配置ができます。画面サイズに応じて適切な解像度の画像に切り替えて読み込ませる記述方法も紹介。

CSSの疑似クラスnth-childやnth-of-typeは、どちらも「何番目の要素を対象にして装飾」というスタイルを作れます。これらを使えば、CSSだけで表を縦方向に一括装飾できます。表の列をグループ化するcolgroup要素を使わなくても、nth-of-typeやnth-childを使えば対象セルの位置を番号で指定できるからです。表を列単位で装飾するCSSの書き方をご紹介。nth-childとnth-of-typeの違いも解説。

JavaScriptで乱数を生成することで、画像リストの中からランダムに1つの画像を表示する方法を解説。アクセス者がページを閲覧するたびに画像を切り替えて表示できます。乱数を使ってランダムに画像を表示すると言っても、記述するJavaScriptソースはほんの数行だけなので簡単に作れます。

大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。

ホームページ作成ソフトのおすすめな選び方を比較してご紹介。初心者向けの統合ソフトや、便利なソース編集支援機能のあるソフト、個人や会社向けのデザインテンプレートが豊富なソフト、サーバ提供サービスまであるソフトなど、ホームページ制作の目的やスキルに合ったソフトウェアの選択方法を解説。

Webページの周囲にある余白を消す方法や、任意の余白サイズを指定する方法、余白部分にだけ背景色や背景画像を加えるスタイルの書き方などを簡単に解説。Webページ周囲の余白は主に、HTMLのbody要素に対するマージンで作られています。上下左右のマージン量をCSSで調整したり装飾したりすれば、ページ周囲の余白をなくすことも自由な色を付けることも簡単です。