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

ホームページ作成に役立つ知識はHTML以外にもあります。ホームページ作成ソフトや制作サービスの機能に任せて整ったデザインを手軽に得る方法もありますが、無料の各種ツールを活用して自作することで自由度の高いWebサイトを作る方法もあります。ウェブ製作に役立つ情報として、4種類に分類した26の技術や知識を簡単にご紹介。

「ホームページ作成ソフト」、「テキストエディタ」、「CMSツール」のうち、個人でホームページを作るにはどれを選択するのが良いでしょうか。判断するための基準をご紹介します。

サイトマップのような「項目数が多くて長くなるリスト」に活用すると便利な、「項目をクリックすることで深い階層が現れるリスト」の作り方をご紹介。リストが長い場合は、どこに何があるのかが把握しにくくなります。初期状態ではリストを「折り畳まれた状態」にしておき、閲覧者が見たいと思う階層だけをその都度表示する方が、望みの項目が探しやすくなって便利です。

CSS3では文字の縁取り装飾も簡単に実現できます。CSS3のtext-shadowプロパティを使えば、文字に影を付けられます。この影を文字の四方に加えることで「縁取り効果」を作成する方法を解説。写真など複雑な背景の上にそのまま文字を重ねると読みにくくなってしまいますが、文字に影を付けたり縁取りしたりすれば読みやすくできます。

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

テキスト入力欄を、PC用ブラウザだけでなく、スマートフォンやタブレット端末でも使いやすくしてみましょう。既存のページを大きく改修することなく、簡単に実現できる方法をご紹介。

CSS3のtransformプロパティを使うと、ワープロソフトなどでは簡単に実現できる「長体」(縦に細長い文字)や「平体」(横に平べったい文字)をウェブ上でも簡単に作れます。長体や平体を実現する方法と注意点等を解説。

画像の読み込みが完了するまでの間、画像が表示される予定の領域に「ローディング画像」を表示させて、読込中であることを示してみてはいかがでしょうか。スクリプトは不要で、数行のCSSを記述するだけで、簡単にローディング画像を掲載できます。

HTMLで作成した表(テーブル)に1行ずつ連番を振りたいと思ったことはありませんか？CSS(スタイルシート)のcounter-incrementプロパティ等を使えば、表の特定のセルに自動で連番を振ることも簡単です。1・2・3のような数値だけでなく、第1位・第2位・第3位のように任意の文字を組み合わせた連番も簡単に表示できます。

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