Webクリエイターな備忘録このサイトはフリーランスでWeb制作をするクリエイターの備忘録なメモサイトです。Webサイトを作る際に気になった事やjavaScriptなどのライブラリの事などWebサイト制作に関する事、また気になるでき事、日常の事などを気ままに勝手に書き綴っています。Smaphone-NavホームProfileContactプライバシーポリシーホーム>Bootstrap>Bootstrap3を使ってみたBootstrap3を使ってみた2015-02-03BootstrapBootstrap個人的には、あまりフレームワークの類が好きではないので、今までフレームワークを使用しないようにしていましたが、今更ながら「Bootstrap3系」を使用してみました。今回、Bootstrap3を使用して作ってみたのは、私のお仕事サイトのテンプレートとこの備忘録ブログ(Wordpress)のテンプレートです。今まで両サイトともに黒ベースの色使いで「かなり怪しい」イメージだったので、オレンジベースの色味に変更してみました。この記事の目次Bootstrapをダウンロードまだまだ...(-ω-)Bootstrap3テーマ変更して参考サイトBootstrapをダウンロードBootstrapを使用する為には、まずダウンロードしないと始まりませんので、ここからダウンロードします。ダウンロードした物を「解凍」し中身を確認!し、作業に移ります。基本的に既存のテンプレートにBootstrap3のcss、jsファイルを読込んでおいてから、使いたい機能の各classを振っていくって感じなので、あまり深く考える事もなく使用できました。jQueryで実装していた事をBootstrap3に置き換えたので、多くのスクリプトを読込まずに同じことを表現する事ができソースの軽量化ができたと思います。...(-ω-)今回テンプレートを制作してみて、Bootstrap3の全てを使用したわけではありません。いろいろなプロパティが、あるようで、今回は使用しない物や、使用できるのに解らず使用していない物が多くあると思います。今後は、少しずつBootstrapの使用回数を増やしていろいろと制作して行こうと考えています。Bootstrap3テーマ変更してまた当サイトの表示が重く、一部の記事でスクリプトエラーが出ていましたので、修正致しました。以前のテーマファイルか、何かのプラグインと競合していたのか?スクリプトエラーが出ていましたので、<pre>タグに全て置き換えたところ、エラーを吐かないようになりました。表示の重さもBootstrap3を使用してテーマを制作したところ、かなりスムーズに表示するようになりました。・レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみたコメントは受け付けていません。「いいなぁ」と思ったら、ソーシャルメディアでの共有をお願いします。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。