ホームページ作成 人気記事ランキング(3ページ目)

短縮URLの作り方おすすめ3選と、短縮URLを自分の独自ドメインで作成する方法をご紹介。外部の短縮URL生成サービスは手軽に利用できて便利ですが、デメリットもあります。転送の仕組みやフリーのツールを使えば、自サイト専用の短縮URLも無料で用意できます。短縮URLの解析サービスも使うと転送先が安全かどうかを調べられます。

CSSのinline-blockを使うと、自動改行での折り返し位置が中途半端になってしまう表示を避けやすくなります。日本語の文章は多少の禁則を除けばどこでも改行できるため、改行位置が「単語の途中」や「残り1文字の直前」のように中途半端になりがちです。画面幅が足りない場合にだけ、自然な位置で自動改行されるようinline-blockを指定するCSSの書き方を解説。

CSSで画像や文字を回転させる方法を解説。CSSのtransformプロパティを使うと、HTMLに書いた要素を45度でも90度でも自由な角度で回転できます。transformの値にrotateを使えば2D(平面)で傾けられ、rotateXなどを使えばX軸・Y軸・Z軸を基準に3D(立体)で回転できます。Y軸で中心から180度反転させれば鏡文字も簡単に作れます。何かを回転させるCSSの書き方をご紹介。

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

ファビコン(favicon／サイトアイコン)とは、ブラウザのタブやブックマークなどに表示されるWebサイト独自のアイコンのことです。ファビコンの簡単な作り方と設定方法を解説。複数サイズのアイコン画像を結合・変換したfavicon.icoファイルを無料で手軽に作成できる「x-icon editor」の使い方もご紹介。ホームページに合ったファビコンを作って設置してみましょう。

HTMLソースの中に画像を直接埋め込んで表示する方法を解説。HTMLはテキストデータですから、そのままではバイナリデータである画像を含められません。しかし、Base64という方法で画像をエンコード(＝テキストデータに変換)すれば、画像をHTMLソースの中に直接埋め込むことができます。読み込むファイル数を削減して高速化したい場合などに活用できます。HTMLソース内に画像を直接挿入してみましょう。

サブウインドウを開く方法！閲覧者に不便をかけない小窓とは。JavaScriptを使えば、ウェブページを表示しているウインドウとは別のサブウインドウを開くことができます。しかし書き方によっては弊害があります。それらの問題をすべて解決したサブウインドウの開き方や、そもそも別ウインドウを開かずに済ませる代替手段をご紹介。

HTML＋CSSで「1行全体」をクリック可能なリンクにしたり、テーブルの枠線内で「1つのセル全体」を余白も含めてクリック可能なリンクにしたりする方法を解説。HTMLのa要素で作るリンクを、CSSでブロック化した上で空白量を調整する簡単な記述で作れます。文字(リンクテキスト)だけでなく余白も含めた広い範囲をクリック可能にする、押しやすいリンクの作り方をご紹介。

HTMLに記述したテキストをCSSで両端揃え(均等割り付け)にする方法を解説。行揃え方法を指定するtext-alignプロパティに、両端揃えを示す値「justify」を指定するだけで、各行の左端だけではなく右端もきれいに揃えられます。ただし、IEとEdgeではtext-justifyプロパティを併用する必要があります。

HTMLで複数の画像を隙間なくぴったり並べる方法を解説。画像を横並びに掲載すると、画像と画像の間に余計な空白ができてぴったりくっつかない場合があります。画像を縦並びに掲載すると、各画像の下に余白ができてしまうことがあります。HTMLソースの書き方を工夫したり、CSSでスタイルを追加したりすれば、余白を消して画像と画像をぴったりくっつけられます。