ホームページ作成 新着記事一覧

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

HTML＋CSSで段組レイアウトを作る簡単な方法を解説。各段をdivで作るだけのシンプルなHTMLソースに、CSSのfloatとclearプロパティを適用するだけで段組レイアウトが作れます。HTMLとCSSをどう書けば段組になるのかの基本から、2段組や3段組を作る具体例、回り込み解除の便利な書き方(clearfix)まで、図とサンプルソースで説明しています。

隠しリンクの作り方と見つけ方(探し方)、SEOでのペナルティなど注意点をご紹介。HTMLとCSSを使った「簡単に作れて簡単に見つけられる方法」から、JavaScriptを併用することで「リンク一覧作成機能(アドオンなど)を使っても見つけられない方法」まで、4種類の作り方・見つけ方を解説しています。隠しリンクゲームの作成や攻略などにお役立てください。

一定秒数ごとに自動的に画像とキャプションが切り替わるスライドショー機能の簡単な作り方を解説。HTMLで画像とキャプションの表示領域を用意し、CSSで装飾を加え、JavaScriptで指定時間ごとに切り替えることでスライドショーにします。開始・一時停止ボタンも用意して、閲覧者が自由なタイミングでスライドショーを開始し、好きな画像で止めてじっくり鑑賞できるように作ってみましょう。

ウェブ上の文字や画像をCSSで回転させる方法を解説。CSSのtransformプロパティを使うと、任意の要素を45度でも90度でも自由な角度で回転できます。transformプロパティの値にrotateを使えば2D(平面)で回転でき、rotateXなどを使えばX軸・Y軸・Z軸を基準に3D(立体)で回転できます。Y軸で180度ひっくり返せば鏡文字も作れます。CSSで何かを回転させる書き方をご紹介。

HTMLで書いた文章を、CSSで左寄せ・中央寄せ(センタリング)・右寄せする方法を解説。同一行内に左寄せと右寄せを共存させたり、左寄せ・中央寄せ・右寄せ全部を同じ行に横並びで表示させたりもできます。1行の文字寄せ方向を指定するだけならtext-alignプロパティを使うだけでとても簡単。複数の文字寄せ方向を混在させたい場合でも、CSSを少し工夫するだけで掲載できます。

作ったホームページを公開するには、掲載スペースを用意しましょう。ウェブサーバとドメインを準備して自サイトを公開する手順を解説します。サーバには、無料サーバもあれば有料サーバもあります。有料でも格安で利用できるサーバが多々あります。ドメインには、サブドメインを無料で利用する方法もあれば、自分で所有できる独自ドメインを取得する方法もあります。

ページを移動することなくボックス内の表示内容を切り替えられるタブ機能の作り方を解説。HTMLとCSSでタブを作り、JavaScriptを使って表示タブを切り替えます。タブ表示部分がクリックされれば一瞬でページ内容が変化するタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。

HTMLに数行のJavaScriptを加えるだけでパスワードによる認証機能を作る方法を解説。「ウェブサイト上でパスワード付きのアクセス制限を設定したい、でもBasic認証やCGIを使う複雑なことはしたくない」という場合には、JavaScriptを使った手軽なログイン認証機能を使ってはいかがでしょうか。完全な制限にはならない分、とても簡単にホームページの閲覧制限ができます。

imgタグとは、HTMLで画像を表示する際に使うタグのことです。imgタグの書き方は簡単で、src属性に画像のURLを指定し、alt属性に代替文字を指定するだけ。CSSを使えば画像の表示位置を中央寄せでも左右寄せでも自由に指定できます。HTML5で追加されたsrcset属性を使えば、複数の候補画像から条件に合致する1枚を自動選択することも可能。imgタグの簡単な書き方を解説。