「Bootstrap」と呼ばれるCSSフレームワークを使用してみました 

Webサイトのデザインとは切っても切り離せない要素がCSSです。記述方法は至ってシンプルなため、覚えて使うこと自体は難しくありません。しかし、記述の自由度の高さから、「コードに統一性がなくなる」「他の制作への再利用がしづらい」などの問題につながるケースもあります。

当サイトには200ページ以上ありますが、上記で言うようにに統一性が無くって来ています、基本は内容が同等なページをコピーして使用していますがバラバラになってきています。

弊社も統一性のとれたCSS設計を行うために、現場においてスピーディーなコーディングを可能にするツールが、CSSフレームワークの「Bootstrap」を使用する事にしましたです。

CSSフレームワークには数多くの種類がありますが、BootstrapはTwitter社で開発されたフレームワークです。当初はTwitter Bootstrapと呼ばれていました。

Bootstrapは、再利用性の高いWebパーツや各レイアウトのデザインを整える機能を豊富に備えているため、CSSのコードを一から組むことなくWebサイトのデザインを進められます。

また、表示切り替えやアニメーションなど、ダイナミックなWebサイトを制作する際に必要なJavaScript・jQueryも手軽に読み込んで利用できます。

今では常識となりつつある、マルチデバイスやレスポンシブデザイン対応も容易で、コードとデザインを交互に眺めながら微調整をする手間が不要となったことも、Webデザイナーに とっては大きなメリットです。

「Bootstrap」を使用するためにここからダウンロードしました。
「Bootstrap」の最新は4.3.1です、「Bootstrap」の使用方法について紹介するページは沢山ありましたが
ここのページを利用しました。

手始めに、アクセス数の多い、

ワード(Word)とエクセル(Excel)の使い分け

のページに「Bootstrap」を使用した理由は、このページでは<table>タグを使用しています、この<table>タグをレスポンシブに対応させるためです。これまで使用していたCSSファイルも併用しています。

カテゴリー: ホームページ, 情報処理技術 タグ: , パーマリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA