ホームページ作成 人気記事ランキング(6ページ目)
2024年11月13日 ホームページ作成内でアクセスの多かった記事をご紹介します。
51位JavaScriptを実行して出力されたHTMLソースを見る方法
JavaScriptが実行された結果として、どのような文字列やHTMLソースが出力されているのかを確認する方法を解説。ブラウザの「ソースを表示」機能では単にJavaScriptのソースコードが見えるだけです。そうではなく、関数が処理された結果としてブラウザに出力されるHTML要素などの値を見たりファイルに保存したりする操作例をご紹介いたします。
ホームページ作成テクニック、小技ガイド記事52位その場で展開できる「続きを読む」ボタンの作り方
ボタンクリックで後続コンテンツを表示する「続きを読む」ボタンの作り方を解説。ページを読み込んだ時点では冒頭以外のコンテンツは折りたたんで(=非表示にして)おき、「続きを読む」ボタンが押された際にだけ続きを展開(表示)する仕組みを作ってみましょう。グラデーションを使って徐々に後続コンテンツを薄くしたり、アニメーション効果と共に続きを表示したりする方法も紹介しています。
表示・非表示の切替 (HTML,CSS,JavaScript)ガイド記事53位1回クリックすると無効になるボタンの作り方
1回クリックされると無効化され、2回以上はクリックできないボタンの作り方を解説。入力フォームで使えば、送信ボタンが複数回クリックされても同じ内容の重複送信を防げます。HTMLのinput要素で作成したボタンに対して、JavaScriptを使ってdisabledプロパティをON/OFFすることで、ボタンの有効/無効状態を簡単に切り替える方法を解説。
フォームの活用・装飾 (HTML,CSS,JavaScript)ガイド記事54位Enterキーでフォームが誤送信されるのを防ぐ方法
Enterキーによる誤送信を防ぐ方法や設定はあるのでしょうか。Enterキーを押してもフォームの内容が送信されないようにする方法と、送信する前に確認ダイアログを表示する方法の2通りをご紹介いたします。
フォームの活用・装飾 (HTML,CSS,JavaScript)ガイド記事55位モバイルファーストでデザインするCSSの書き方
ウェブページのデザインをモバイルファーストで作る際のCSSソースの書き方を解説。スマートフォンに最適化したシンプルなCSSを「共通デザイン」として先に記述しておき、後から「タブレット向けの差分デザイン」や「PC向けの差分デザイン」を付け足していくモバイルファーストな書き方なら、CSSソースの総量を減らしやすく、更新の手間も少なくて済みます。
装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)ガイド記事56位CSSのfloatとclearで簡単に段組レイアウトを作る方法
CSSで段組レイアウトを作る簡単な方法を解説。各段をdiv要素などのボックスで作るだけのシンプルなHTMLに、CSSのfloatとclearプロパティを適用するだけで段組レイアウトが作れます。HTMLとCSSをどう書けば段組になるのかの基本から、2段組や3段組の作り方、回り込み解除の便利な書き方(clearfix)まで、図とサンプルソースを使って説明しています。
レイアウトの作成・調整 (HTML,CSS)ガイド記事57位CSSのnth-childで偶数/奇数行などn番目を装飾する方法
リストやテーブル(表組み)など多数の項目が連続する要素は、1行おきに装飾を分けると見やすくなります。CSSのnth-child疑似クラスを使えば、偶数行(=2の倍数番目)だけの装飾、奇数行(=2の倍数+1番目)だけの装飾などを簡単に指定できます。表なら「n番目の列」のように列単位で色分けするのも簡単です。そのほか、先頭だけ、先頭から5つだけ、3個おき(=3の倍数)、最後から2番目だけ、最後だけ……など柔軟に指定できて便利です。
CSS3とはガイド記事58位CSSで、表(テーブル)のセル内に自動で連番を振る方法
HTMLで作成した表(テーブル)に1行ずつ連番を振りたいと思ったことはありませんか?CSS(スタイルシート)のcounter-incrementプロパティ等を使えば、表の特定のセルに自動で連番を振ることも簡単です。1・2・3のような数値だけでなく、第1位・第2位・第3位のように任意の文字を組み合わせた連番も簡単に表示できます。
テキストの配置・装飾 (HTML,CSS)ガイド記事59位横幅を100%にした際、親ボックスからはみ出すのを防ぐ
画像やボックスを横幅いっぱいに広げるためにCSSで横幅(widthプロパティの値)を100%にすると、なぜか親ボックスの領域からはみ出ることがあります。CSSで幅や長さの指定を100%にした際などに遭遇する「微妙にはみ出してしまう」現象について、box-sizingプロパティを使って解決する方法をご紹介いたします。意図しない変なはみ出しを簡単に解消できます。
ボックスや枠線の表示・装飾 (HTML,CSS)ガイド記事60位1画面ずつスクロールして進むウェブページを簡単作成
企業の製品紹介サイトなどでは、画面全体に文字や画像を大きく配置し、1画面ずつスクロールして見せるデザインのウェブページをよく見かけます。そのような「1画面単位で滑らかにスクロールして画面が切り替わる」デザインのページを、jQueryを使って簡単に作成してみましょう。
レイアウトの作成・調整 (HTML,CSS)ガイド記事