開発者が犯す10の最も一般的なブートストラップの間違い

公開: 2022-03-11

一見すると、Bootstrapは非常に単純に見えます。そして確かに、Bootstrapの使用を開始することは難しくありません。多くのHTML、CSS、およびJavaScriptコード例を含む非常によく書かれたBootstrapドキュメントがあります。重要な落とし穴のほとんどはそこで言及されていますが、それでもいくつかの間違いはかなり微妙であるか、またはあいまいな原因があります。 Bootstrapは非常にシンプルで使いやすいように見えるため、多くの開発者がフレームワークに突入しており、ミスが発生します。

開発者がBootstrapを使い始めたときに、最も一般的なBootstrapの間違い、問題、誤解の10を見ていきます。

よくあるブートストラップの間違い＃1：フレームワークに関する基本的な誤解

人々が持っているBootstrapフレームワークについていくつかの基本的な誤解があります。これは、Bootstrapサイトで明確に宣伝されていないか、ドキュメントを読むのに十分な時間がないことが原因である可能性があります。事実、開発者がコーナーで間違ったことをしてしまい、フレームワークのせいにすることがあります。それでは、いくつかの基本的な事実を明確にしましょう。

ブートストラップは包括的ですが、巨大でも巨大でもありません。 Bootstrapには、多くの一般的なUIコンポーネントを含む基本的なHTMLおよびCSSデザインテンプレートがバンドルされています。これらには、タイポグラフィ、テーブル、フォーム、ボタン、グリフィコン、ドロップダウン、ボタンと入力グループ、ナビゲーション、ページネーション、ラベルとバッジ、アラート、プログレスバー、モーダル、タブ、アコーディオン、カルーセルなどが含まれます。それらのいくつかを選択して選択できます。デフォルトの構成では、複数のブラウザー、デバイス、および解像度を適切な形式で処理するUIをすばやく生成します。

Bootstrapはすべてを実行するわけではありませんが、選択可能な一連の妥当なデフォルトを提供し、開発者がデザインについて心配するよりも開発作業に集中できるようにし、見栄えの良いWebサイトをすばやく立ち上げて実行できるようにします。ラピッドプロトタイピングが可能ですが、開発者を制限するものではありません。

誰もが自分のニーズに合うように調整できるほど十分に拡張可能です。当初、Bootstrapにはいくつかの制限があり、当時はデフォルトのスタイルを拡張するのが複雑でした。しかし、フレームワークが成熟するにつれて、拡張性も向上しました。

よくあるブートストラップの間違い＃2：ブートストラップを使用するためにCSSを知る必要はなく、デザイナーも必要ないと考える

Bootstrapを使用している場合、CSSを知る必要がないと考えている場合は、非常に間違っています。フロントエンド開発者は、CSSとHTML5を学ぶ必要があります。 Bootstrapは、開発者の肩から多くのトリッキーなCSSパーツ（ベンダー固有のプレフィックスなど）を削除し、基本的なデフォルトのスタイルを提供しますが、それでもCSSを理解する必要があります。メディアクエリがどのように機能するかを知る必要はありませんが、レスポンシブデザインがどのように機能するかを理解する必要があります。ブートストラップはCSSを教えることを意図したものではありませんが、必要に応じて役立ちます。 LESSまたはSASSでソースコードを調べることは素晴らしい出発点です。

同様のトピックについては、デザイナーである必要はなく、Bootstrapを使用するデザイナーは必要ないと主張することができます。ただし、可能であれば、設計者の助けを借りてください。 Bootstrapに対する一般的な不満は、すべてのBootstrapサイトが同じように見えることであり、他のBootstrapサイトと同じように見えるWebサイトになってしまうのは簡単です。しかし、これは真実である必要はありません。 Web全体で何百万ものWebサイトがBootstrapを使用して構築されています。さまざまなデザインを実現する方法の優れたショーケースは、Bootstrapで構築されたサイトを収集するBootstrapExpoで見つけることができます。見て、インスピレーションを得て、独自のデザインバリエーションの構築を開始してください。

よくあるブートストラップの間違い＃3：ブートストラップCSSファイルの変更

わかりやすくシンプルにするには： bootstrap.cssファイルを変更しないでください。

bootstrap.cssファイルに変更を加えると、事態は非常に速く複雑になります。 Bootstrapファイルをアップグレードする場合、デザイン全体が壊れます。独自のスタイルシートで、デフォルトのブートストラップの色、スタイル、余白、パディングなどすべてを上書きできます。 bootstrap.cssスタイルシートに触れる必要はまったくありません。

LESSまたはSASSを知りませんか？問題ありません。独自のCSSファイルを作成し、元のbootstrap.cssスタイルシートから必要なものを上書きできます。前の間違いで述べたように、CSSを知ることは必須です。新しいCSSセレクターを作成し、それをHTMLで使用します。ブートストラップスタイルの後にCSSクラスを宣言する限り、定義はブートストラップのデフォルトを上書きします。

それでももっと知りたい、もっと深く掘り下げたいですか？そうすることを強くお勧めします。 BootstrapLESSソースコードを使用します。静的CSSではなくLESSソースを使用すると、何が起こっているのか、どこで何が起こっているのかをよりよく理解できるようになります。

よくあるブートストラップの間違い＃4：ブートストラップが提供するすべてのものを使用する

前述のように、Bootstrapは包括的です。多くのUIコンポーネント、HTMLおよびCSSデザインテンプレート、JavaScriptプラグインを提供します。ただし、選択してください。 Bootstrapのすべての機能を使用する必要はありません。

これは特にプラグインに当てはまります。意味のあるプラグインのみを選択してください。見た目が良くてかっこいいので、すべてを使用しないでください。あなたのウェブサイトは簡単にやり過ぎになる可能性があります。まず、 bootstrap.jsファイルをまったく含めず、プレーンなHTMLとCSSだけを使用してサイトを作成することを検討してください。次に、特定の役割に必要な場合にのみ、コンポーネントを1つずつ追加します。

一般的なブートストラップの間違い＃5：モーダルプロンプトの誤用

ブートストラップモーダルは、必要最小限の機能を備えた柔軟なダイアログプロンプトを提供し、スマートなデフォルトが付属しています。モーダルは使いやすく、豊富なカスタマイズを提供しますが、一般的な誤用を避けるために留意する必要があることがいくつかあります。

一度に複数のモーダルプロンプトを表示する

ブートストラップは、重複するモーダルをサポートしていません。一度に表示できるモーダルは1つだけです。一度に複数のモーダルを表示することはできますが、これを適切に処理するにはカスタムコードを作成する必要があります。

ブートストラップモーダルが背景の下に表示されます

モーダルコンテナまたはその親要素の位置が固定または相対である場合、モーダルは正しく表示されません。モーダルコンテナとその親要素に特別な配置が適用されていないことを常に確認してください。ベストプラクティスは、モーダルのHTMLを終了</body>タグの直前に配置するか、ドキュメントの開始<body>タグの直後の最上位の位置に配置することです。これは、モーダルの外観と機能に影響を与える他のコンポーネントを回避するための最良の方法です。

モバイルデバイスのモーダル

仮想キーボードを備えたモバイルデバイスでモーダルを扱う場合、開発者が知っておく必要のある注意事項がいくつかあります。これは、仮想キーボードがトリガーされたときに固定要素の位置を更新しないレンダリングのバグが存在するiOSデバイスに特に当てはまります。これはBootstrapによって処理されないため、問題のアプリケーションに最適な方法でコード内のこれらの状況を処理するのは開発者の責任です。

一般的なブートストラップの間違い＃6：ファイル入力ボタンコンポーネントの問題

Bootstrapには、ファイルアップロードボタン用に指定されたコンポーネントがありません。 HTMLとCSSのみを使用するシンプルでエレガントなソリューションは、次のサンプルコードで実現できます。

 <span class="btn btn-default btn-file"> Browse <input type="file"> </span>

 .btn-file { position: relative; overflow: hidden; } .btn-file input[type=file] { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; }

同様の効果を得る方法の例はたくさんあります。このコード例はCoryLaViskaから借りたものであり、彼のサイトでこの問題のより詳細な説明を読むことができます。追加のJavaScriptコードを使用する、より多くの機能を備えた拡張例もあります。

よくあるブートストラップの間違い＃7：JavaScriptを複雑にしすぎて、「data-」属性を無視する

デザイナー、またはJavaScriptの初心者の開発者は、非常に簡単にWeb開発に飛び込み、HTML、CSS、およびBootstrapのみを使用してWebページを作成できます。コーディングがあまり得意でない場合は、JavaScriptを誤用したり、単純に複雑にしすぎたりするという罠に陥る可能性があります。すべてのBootstrapプラグインは、JavaScriptを1行も記述せずに、マークアップAPIを介して純粋に使用できることを述べることが重要です。これはBootstrapのファーストクラスAPIであり、プラグインを使用する際の最初の考慮事項です。

たとえば、ボタンやアンカーなどのコントローラー要素にdata-toggle="modal"を設定するだけで、JavaScriptを記述せずにモーダルダイアログをアクティブにし、data- data-を使用して追加のパラメーターを渡すことができます。以下のコードでは、ID #myModalのHTMLコードをターゲットにしています。 data-backdropオプションを使用して、ユーザーがモーダルの外側をクリックしたときにモーダルが閉じないように指定し、 data-keyboardオプションを使用してモーダルを閉じるEscキーイベントを無効にしました。オールインワンのHTML行のコード：

 <button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

よくあるブートストラップの間違い＃8：ブートストラップの開発を容易にするツールを無視する

間違いが起こり、すべての開発者が時折間違いを犯します。これは避けられないことですが、重要なのは間違いへの対処方法です。 Bootstrapチームは、課題追跡システムを見て、人々がより頻繁にいくつかの間違いをしていることに気づきました。それが彼らが開発プロセスを自動化しようとした理由です。その結果が、Bootstrapプロジェクト用のHTMLリンティングツールであるBootlintです。 Bootlintは、ブラウザー内またはNode.jsを介したコマンドラインから使用でき、BootstrappedWebページで一般的なBootstrapの使用ミスがないか自動的にチェックします。 BootlintをWeb開発ツールチェーンに追加すると、通常はプロジェクトの開発を遅らせる多くの一般的な間違いを排除できます。

Bootstrapプロジェクトに貢献したい場合は、ロールシャッハをチェックする価値があります。ロールシャッハは、ブートストラッププルリクエストの健全性チェッカーボットであり、新しいプルリクエストごとにいくつかのチェックを実行します。健全性チェックが失敗した場合、プルリクエストに誤りとその修正方法を説明する有益なコメントを残し、プルリクエストを閉じます。

よくあるブートストラップの間違い＃9：IE8とそれ以前のブラウザーの非互換性の問題

Bootstrapは、最新のデスクトップおよびモバイルブラウザで最高の状態で動作するように構築されています。古いブラウザでは、異なるスタイルのコンポーネントや要素が表示される場合がありますが、すべてが完全に機能する必要があります。サポートにはInternetExplorer8および9が含まれますが、一部のCSS3プロパティおよびHTML5要素はこれらのブラウザーでは完全にはサポートされていないことに注意してください。

Internet Explorer 8およびその他の古いブラウザーを完全にサポートするには、CSS3 Media Queries Respond.jsのポリフィル、HTML5要素の使用を可能にするHTML 5シム、およびHTMLヘッドの適切なIE <meta>タグを使用する必要があります。 IEが互換性モードで実行されていないことを確認してください。最終的にHTMLヘッドは次のようになります。

 <head> ... <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head>

Respond.jsの場合、開発環境と本番環境では次の点に注意してください。

よくあるブートストラップの間違い＃10：ベストプラクティスを無視する

Stack Overflowでよくある質問の1つは、Bootstrapsメニューのドロップダウンをクリックではなくホバーで開く方法です。この質問の解決策は複雑ではなく、CSSのみを使用して実行できますが、お勧めしません。この機能は意図的にフレームワークから除外されており、これは開発チームによって行われた設計上の決定です。繰り返しになりますが、それは可能ですが、特にモバイルファーストフレームワークの場合、影響を理解し、ベストプラクティスが存在することを理解する必要があります。この特定の問題の背後にある理由は、ホバーで動作するようにすることは、タッチデバイスを持っているユーザーには役立たないということです。このようなデバイスでは、ホバーはなく、タッチイベントのみです。したがって、これはタッチ対応デバイスでは正しく機能しません。

ブートストラップの間違い結論

この短いブートストラップガイドが、よくある間違いのいくつかを回避し、通常の誤解を取り除き、フレームワークのほとんどを理解するのに役立つことを願っています。 Bootstrapはすべての人に適しているわけではなく、すべてのプロジェクトに適しているわけでもありません。フレームワークを選択するときは、ドキュメントを読むのに少し時間がかかる必要があります。また、フレームワークがどのように機能するかをよりよく理解するために、フレームワークをいじるのに時間をかける必要があります。これはBootstrapにも有効です。

ドキュメントを読み、サンプルを試してみて、基本を正しく理解し、新しくて美しいデザインの作成を楽しんでください。