ホームページ作成 人気記事ランキング(7ページ目)
2024年06月08日 ホームページ作成内でアクセスの多かった記事をご紹介します。
61位CSSで斜線を引く方法:表の空セルなど任意のHTML要素に
CSSで斜線を引く方法を解説。CSSのlinear-gradientを駆使すると、画像を使わずにCSSだけで1本の斜線を引くことができます。右上がりや左上がりの斜め45度はもちろん、自由な角度、望みの太さで斜線が引けます。CSS3では空(カラ)の要素だけを対象にして装飾できますから、それと組み合わせて「テーブル内の空っぽのセルにだけ斜線(対角線)を引く」という装飾も簡単に作れます。短いCSSソースで任意のHTMLに斜線を引く方法をご紹介!
ガイド記事62位フレームを使った構成の問題点
フレームは、特定のページを表示させたまま様々な別のページを同時に表示できる便利な機能ですね。しかしそこに、せっかくの来訪者を逃してしまう危険な落とし穴が潜んでいるのです…。
Webサイトのユーザビリティガイド記事63位2乗や3乗などのn乗をHTMLで表示する方法
ウェブページ上で2乗や3乗など「n乗」の数値や単位(累乗の指数)を表示したい際には、右肩に小さく文字を載せるHTMLのsup要素を使えば簡単です。または、文字実体参照を使って2乗・3乗を記号として表示する方法もあります。それら両方の書き方をご紹介。sup要素は上付き文字にする要素なので、注釈を示す脚注番号を表示する用途にも活用できます。
特殊文字・記号の記述 (HTML)ガイド記事64位.htaccessファイルの書き方と設定・設置方法
.htaccessファイルの作成方法や設定の書き方を簡単に解説。設定が影響するディレクトリの範囲や、サーバにアップロードする際の注意点、Internal Server Errorが出る場合の対処方法も紹介。Webサイトに「.htaccess」という特殊なファイル名の設定ファイルを置くと、アクセス制限・認証・リダイレクト・デフォルトファイル名の変更など様々な設定ができます。
アクセス制限・認証、サイト内検索ガイド記事65位スマートフォン用ページが自動縮小されないようにする
スマートフォン用にウェブページを作っても、コンテンツが多ければ自動的に縮小されて表示されます。これは、PC用ウェブサイトをうまく閲覧するためには必要な機能ですが、スマートフォン用にデザインしたページの表示では少々困ります。そこで、自動縮小を防ぐ「viewport」の記述を使ってみましょう。
携帯・スマートフォンサイト作成入門ガイド記事66位レスポンシブWebデザインの簡単な作り方
レスポンシブWebデザインとは、ユーザの画面サイズやブラウザのウインドウサイズに応じて適用CSSを分けることで、閲覧環境に合ったデザイン・レイアウトでウェブページを表示するデザイン方法のことです。レスポンシブWebデザインのメリットやデメリットなどの基本から、CSSソースのサンプル、簡単に作れるフレームワークやテンプレートを紹介。
装飾・レイアウトの動的変更 (HTML,CSS,JavaScript)ガイド記事67位CSSで色を直接書かず、変化量で相対的に指定する方法
ウェブページ内の配色は、「親ボックスよりも20%ほど明るい色の子ボックス」のように、相対的に指定できると便利です。色の値を直接記述することなく、ベース色からの変化量で「相対的に色を指定する」方法をご紹介。
ホームページ作成テクニック、小技ガイド記事68位CSSだけで画像をトリミング(切り抜き)する方法
CSSの「clipプロパティ」を使うと、画像をソフトウェアで加工したりすることなく、自由なサイズにトリミング(切り抜き)ができます。画像の周囲をカットしたり、画像の中の特定の箇所だけを見せたい場合に、画像を直接加工せずに済むので手軽です。切り抜き範囲を数値で指定するだけで、画像中の任意の部分を四角形に切り取って表示できます。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事69位サムネイル画像をその場で全画面に拡大表示させる方法
ウェブ上に掲載したサムネイル画像をクリックしたときに、拡大画像を全画面で(ブラウザの描画領域全面に広げて)表示する方法をご紹介。ページ移動することなく拡大画像を全画面で表示できるスクリプト「Intense Images」の使い方を解説。スマートフォンでの操作にも対応。画面と画像との縦横比が異なる場合には、隠れた部分をマウスの動き(またはスワイプ操作)で見ることができる便利な仕様もあってお勧めです。
画像の表示・活用 (HTML,CSS,JavaScript)ガイド記事70位Bootstrap4のグリッドでスマホ対応の段組を簡単に作成
12段のグリッドシステムで段組を簡単に作成できるBootstrap4を使って、PCだけでなくスマートフォンなどのモバイル端末にも対応したレスポンシブな段組レイアウトを作る方法を解説。Bootstrap4には、複雑に組み合わせて入れ子にもできるグリッドがあるため、table(テーブル)を駆使しなくてもPC・モバイル両対応の段組(グリッドレイアウト)が簡単に作成できて便利です。
ホームページ作成テクニック、小技ガイド記事