ホームページ作成テクニック、小技

モバイル対応の段組が簡単に作れるBootstrap4のグリッドシステム段組を簡単に作成できるグリッドシステムも含む有名フレームワーク「Bootstrap4」CSSを駆使して自力で段組構造(マルチカラムレイアウト)を作るのはなかなか面倒です。PCだけでなくスマートフォンなどのモバイル端末にも同時に対応...続きを読む

JavaScriptの実行結果として出力された文字列やHTMLソースを見たいJavaScriptの関数が出力した文字列やHTMLソースを確認する方法があると便利Webページの一部をJavaScriptで生成している際、JavaScriptが実行された結果として出力された文字列やHTMLソースを確認し...続きを読む

グリッドレイアウト『だけ』を簡単に使いたいページレイアウトを簡単にするグリッドレイアウトシステム(細かく分割されたグリッドを自由に組み合わせることで、望みのサイズの段組を簡単に作成できる仕組み)ウェブページのレイアウトを簡単に作る方法として、「グリッドレイアウトを提供するフレームワーク」を活用する方...続きを読む

ウェブ上で、もっと見やすいツールチップを表示させたいWindowsのUIで使われるツールチップの例ウェブページ上のボタンやリンクに説明文をポップアップ表示する方法に「ツールチップ」があります。WindowsやMac用のソフトウェアでも、ボタンの上にマウスをしばらく載せると説明文が浮き上がって表示され...続きを読む

異なるバージョンのIEやEdgeがインストールされたWindowsを、OS丸ごと無料配布！古いバージョンのIEを使って表示確認がしたいウェブページを作成する際には、古いブラウザでどう表示されるのかも確認したいことがあります。しかし、同一の環境内でInternetExplorer(IE)の複数バージョ...続きを読む

CSSでは、色はすべて直接値を記述するしかない点が不便ベース色から相対的に変化させたいCSSで色を指定するときには、「#ccffcc」や「blue」などのように、望みの色を直接記述するしかありません。しかし、配色を考えるときには、「親ボックスよりも少し明るい色の子ボックス」のように、相対的に色を指定...続きを読む

Webフォントとは？Webフォントとは、ブラウザがフォントファイルそのものをウェブ上からダウンロードして文字の表示に使ってくれる仕組みのことです。CSSの@font-faceという記述を使ってダウンロードするフォントを指定します。閲覧環境に望みのフォントがインストールされていなくても、ウェブ上にフォ...続きを読む

CSSで、同じプロパティや値を何度も記述するのは大変CSSでは、同じ値や、同じプロパティの組み合わせを何度もを何度も記述しなければならないこともある。複数箇所で装飾を統一したい場合などに、同じプロパティや同じ値を何度も繰り返して記述するのは大変面倒です。同じ記述が増えると、それらを修正したくなったと...続きを読む

見やすいデザインが簡単に作れるフレームワークBootstrap自身のウェブページに、見やすくて使いやすいデザインや機能を簡単に用意できる便利なフレームワークの1つに、Bootstrap(ブートストラップ)があります。下図のように、ナビゲーションバー、サイドバー、メニュー項目、ボタン型リンク、段組レイ...続きを読む

(注)本記事で解説している内容は、初版公開時(2012年5月時点)の最新版「Bootstrap2」のものです。2014年6月時点の最新版「Bootstrap3」でも基本的な構造には変わりありませんが、記述するclass名などの仕様が若干変わっています。本記事に掲載のサンプルソースは、そのままでは「B...続きを読む