スポンサーリンク
自分がHTMLやCSSのテスト用によく使ってるブラウザ上でのWeb開発サービスのCodePen 。テストした結果をブログに貼り付けるってこともよくやってますが、今回はCodePenでCSSフレームワークであるBootstrapを使用する方法をご紹介します。
スポンサーリンク
CodePenとは？
HTML、CSS、JavaScriptをブラウザ上で開発できるWebサービスです。
詳細や基本的な使用方法は過去記事を参照ください。
環境構築不要！フロントエンド開発がブラウザ上できるCodePenCodePenとは？
CodePenはブラウザ上でHTML、CSS、Javascriptを使用してウェブ開発ができるWebサービスです...
CodePenでBootstrapを使用する方法
まずは新規PEN(プログラム)作成画面を開き、HTMLの左にある歯車アイコンをクリックします。
「Stuff for ＜head＞」欄に以下をコピペします。
|
1 2 3 4 5 |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> |
これでhead要素に上記が指定されたことになるので、Bootstrapを使用することができるようになります。
Bootstrapで定義されているtext-dangerクラスを指定することで文字色が赤になってますね。
ちなみにHTML欄にhead要素を追加してそこに、上記をコピペしてもOKです。
要するにhead要素に指定してし、そこにアクセスさえできれば色んなものが使用できるってことです。
CodePenのエディタ部分はHTML、CSSの入力補助機能のEmmetにも対応しているのでHTMLの動作をちょっと確認したいとかいう時に重宝します。
残念ながらiPadでは日本語が入力できないEmmetがきかないので、実用にはもの足りない感じですね。iPadOSになってどうなるかですが、現時点でiPadでちょっとした開発や動作確認をしたいのであれば、以前紹介したテキストエディタの「LiquidLogic」を使用するのが良いと思います。
まとめ
- CodePenでBootstrapを使用するにはhead要素に必要なコードをコピペするだけ
- head要素に指定して使用するものであれば、指定したものにアクセスできさえすれば使用可能
- CodePenのエディタはEmmetに対応している(iPadではEmmetはきかないので注意)
スポンサーリンク
