ホームページ作成 人気記事ランキング(7ページ目)
2025年09月17日 ホームページ作成内でアクセスの多かった記事をご紹介します。
61位CSSのnth-childやnth-of-typeで表の縦(列)を一括装飾
CSSの疑似クラスnth-childやnth-of-typeは、どちらも「何番目の要素を対象にして装飾」というスタイルを作れます。これらを使えば、CSSだけで表を縦方向に一括装飾できます。表の列をグループ化するcolgroup要素を使わなくても、nth-of-typeやnth-childを使えば対象セルの位置を番号で指定できるからです。表を列単位で装飾するCSSの書き方をご紹介。nth-childとnth-of-typeの違いも解説。
テキストの配置・装飾 (HTML,CSS)ガイド記事62位横幅を100%にした際、親ボックスからはみ出すのを防ぐ
画像やボックスを横幅いっぱいに広げるためにCSSで横幅(widthプロパティの値)を100%にすると、なぜか親ボックスの領域からはみ出ることがあります。CSSで幅や長さの指定を100%にした際などに遭遇する「微妙にはみ出してしまう」現象について、box-sizingプロパティを使って解決する方法をご紹介いたします。意図しない変なはみ出しを簡単に解消できます。
ボックスや枠線の表示・装飾 (HTML,CSS)ガイド記事63位tableタグの使い方・表の作成方法:HTML5+CSS3版
tableタグの使い方、表の作成方法を簡単に一括解説。HTMLで表を書き、CSSで見やすく装飾します。HTMLではtable、tr、td要素さえ使えば良く、CSSではborder-collapse、border、paddingさえ使えば見やすい余白を確保した最低限の表が作れます。そのほか、見出しセルの作り方、罫線や斜線を引く方法、colspan属性などでセルを結合する方法、ヘッダ行やフッタ行の加え方なども解説。
レイアウトの作成・調整 (HTML,CSS)ガイド記事64位画像を使わずに絵や記号を表示?特殊なフォントを使う
画像ファイルを使わずに、様々な絵や記号を表示する方法をご紹介。この方法なら、読み込み速度の低下を招かずに絵や記号を好きなだけ使えます。実現方法はとっても簡単なのでぜひお試しを。
特殊文字・記号の記述 (HTML)ガイド記事65位2乗や3乗などのn乗をHTMLで表示する方法
ウェブページ上で2乗や3乗など「n乗」の数値や単位(累乗の指数)を表示したい際には、右肩に小さく文字を載せるHTMLのsup要素を使えば簡単です。または、文字実体参照を使って2乗・3乗を記号として表示する方法もあります。それら両方の書き方をご紹介。sup要素は上付き文字にする要素なので、注釈を示す脚注番号を表示する用途にも活用できます。
特殊文字・記号の記述 (HTML)ガイド記事66位文字に影を付け、画像に重ねた文字を見やすくするCSS3
CSS3では文字の縁取り装飾も簡単に実現できます。CSS3のtext-shadowプロパティを使えば、文字に影を付けられます。この影を文字の四方に加えることで「縁取り効果」を作成する方法を解説。写真など複雑な背景の上にそのまま文字を重ねると読みにくくなってしまいますが、文字に影を付けたり縁取りしたりすれば読みやすくできます。
CSS3とはガイド記事67位ログインページに他人がアクセスするのを拒否する方法
CMSツールなどのログインページには、通常は誰でもアクセスできます。ウェブサーバのアクセス制限機能を使って「自分や関係者以外からのアクセスを拒否する」方法をご紹介。不正ログインの可能性を減らす方策の1つになります。
アクセス制限・認証、サイト内検索ガイド記事68位1文字ずつ文字色を変える、文字単位でのCSS適用方法
HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript(jQuery)を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。
テキストの配置・装飾 (HTML,CSS)ガイド記事69位モバイルファーストでデザインするCSSの書き方
ウェブページのデザインをモバイルファーストで作る際のCSSソースの書き方を解説。スマートフォンに最適化したシンプルなCSSを「共通デザイン」として先に記述しておき、後から「タブレット向けの差分デザイン」や「PC向けの差分デザイン」を付け足していくモバイルファーストな書き方なら、CSSソースの総量を減らしやすく、更新の手間も少なくて済みます。
装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)ガイド記事70位その場で展開できる「続きを読む」ボタンの作り方
ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(=非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。
表示・非表示の切替 (HTML,CSS,JavaScript)ガイド記事