WEBCAMP:経済産業省が認定!エンジニア転職成功率98%!HikoProこんにちは!大学生フリーランスエンジニアのHikoProです!Bootstrapを使ってwebサイトを作っているが、便利だけどサイトが英語だしなかなか思うように扱いこなせてない。Sheet(チートシート)的なものはないの?今回の記事ではプログラミング初心者向けに、ほぼコピペでかっこいいサイトをサクッと作れる方法をご紹介します!CSSを書く事なく、HTMLタグの中にコードをちょろっと書くだけでサクッとかっこいいサイトが作れるCSSのフレームワークBootstrapですが、サイトの見方がよく分からなかったり、扱いきれていない方がいるかと思います。サイトにアクセス2.Bootstrapを有効化にする3.チートシートをコピペしてサイトを作るBootstrapチートシートまとめBootstrapとは?Bootstrap(読み方:ブートストラップ)はTwitter社が開発したCSSのフレームワークです。フレームワークとは簡単にいうとその言語をより使いやすく便利にしたものです。フレームワークとは、アプリケーションソフトを開発する際によく必要をされる汎用的な機能をまとめて提供し、アプリケーションの土台として機能するソフトウェアのことです。いう意味の英単語です。アプリケーションのひな形であり、これを開発に利用することで、大幅な効率の向上が見込めます。ferret(https://ferret-plus.com/996)ネコ君Bootstrapを使うと効率よくCSSがコーディングできるってことだね!Bootstrapを使って作られた有名なサイトを一つあげるとAirbnbがあげられます。Bootstrapを使うメリット・デメリットHTMLタグにBootstrap(CSS)を書くことができる効率よくコーディングができる簡単にカッコいいページができるレスポンシブデザインに対応しているネット上にテンプレートが沢山ある(コピペでOK)メリットをざっくりと上げるとこんな感じです、HTML,CSSでサイトを作る際は良いことしかないので、ぜひマスターして使いこなせる様になることをオススメします!良いことしかありませんが、一つデメリットを上げるとすると、便利すぎてBootstrapを使っているユーザーがかなり多いのでデザインが被ってしまい独自性の高いサイトは作りにくいと言った点です。Sheet(チートシート)の使い方まずそもそも、チートシートとは何なのか?と言うと、1枚のページや資料でその情報や使い方がまとめられたシートのことです。チートシートこのように、ブロガーの方や情報発信者の方が、よく使うコードまとめシート的な物を配布しています。プログラミングでは実際に使わないコードが結構あったりするので、初心者の方は実際に経験豊富な方が作ったチートシートを見ながらコーディングすると効率よく学習する事ができます。サイトにアクセスでは早速Bootstrapをより便利に使えるチートシートのサイトをご紹介します。hackerthemesが作ったBootstrapのコードをまとめたサイトで、基本的にコピペするだけで、カード型のボックスや、ページネイション、モーダル表示など、初心者が1からコーディングすると手間のかかる物をコピペで再現できるシートです。チートシートはこのようになっており、約400以上のテンプレートコードがあり、コードと、表示結果が同時に見れて、自分が求めているデザインが一目でわかります。400以上のテンプレートがあるコードと表示結果を同時に見れるデザインがシンプルでどんなサイトにも合うコピペで使用可能2.Bootstrapを有効化にするまずこのシートを使うにはBootstrapを使う為のコードをHTMLファイルのheadタグに書く必要があります。crossorigin="anonymous"></script></head>こちらのコードを<head></head>の間にコピペしてください。これでBootstrapは有効になりました。Bootstrapとは?基本的な使い方はこちらの記事をご覧ください!3.チートシートをコピペしてサイトを作るもう後はコピペするだけで簡単にシンプルなサイトが作れてしまいます。作りたい物をクリック実行結果を確認コードをコピーエディタに貼り付けテキストを変更する場所や間隔などをCSSで微調整たったのこれだけでOKです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*日本語が含まれない投稿は無視されますのでご注意ください。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。BlogについてHikoProBlogは大学生フリーランスエンジニアが学んだことを発信するノウハウブログです。プログラミング学習、フリーランスの生き方、WordPress、Webマーケティング、IT産業について発信しています。Reserved.タイトルとURLをコピーしました。