1ヶ月でWebデザイン・プログラミングスキルをオーダーメイドのカリキュラムで学べるスクール、それがWebCamp。

子供の想像力を伸ばしアイデアを形にする小学生向けプログラミング教室「プロスタキッズ」

爆速で開発を終わらせる!Bootstrapチートシートがチートすぎる

Bootstrap 4 Cheat Sheet
Pocket

Bootstrapとは、Twitter社が開発したCSSのフレームワークです。通常は自分でスタイルを実装していく必要がありますが、Bootstrapを利用すれば、ボタンやフォームなど既に用意されているスタイルを適用するだけで、誰でも素早く整ったデザインのページを作ることが可能になります。

今回は、さらに簡単かつ素早くスタイルを開発できるブートストラップのチートシートをご紹介します。

プレビューを見ながらコードを確認できるチートシート

既存のBootstrapのチートシートというのは、Bootstrap 3 cheat sheetのように、グリッドなどに使われているスタイルをPDFにまとめたものでした。一方で、今回ご紹介するBootstrap 4 Cheat Sheetは、要素をクリックするとコード・スニペットとプレビューを表示してくれる便利なチートシートです。

Bootstrap 4 Cheat Sheet
「Code snippet」右上のCopyボタンを押すと、一発でコードをコピーすることができます。プレビューを見ながらコードをコピーできるので非常にわかりやすいです。

Bootstrap 4 Cheat Sheet2
Alert、Dropdown、Form、ProgressなどBootstrapで使われているほとんどのトピックを網羅しています。また、各要素の右横の?マークに公式ドキュメントへのリンクが貼ってあるので、詳細な情報を手に入れたい場合はそちらを参照するといいでしょう。
Webサイトをさらに早くかつ簡単にコーディングしたい方はぜひ利用してみてください。

投稿者:プロスタ編集部

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

初心者がプログラミングで挫折しない学習方法を無料動画で公開中。オンラインに特化したプログラミングスクール「TechAcademy(テックアカデミー)」が解説。

この記事が気に入ったら
いいね!しよう

プロスタの最新情報をお届けします

あわせて読みたい

関連記事

ページ上部へ戻る