初心者38歳のプログラミングスクール体験記

今回はBootstrapはスマホやパソコンでのサイズが違うデバイスでも調整してくれる機能があります。レスポンシブデザインというもので、そのレスポンシブデザインを作るためにグリッドシステムというものがあります。 グリッドシステムは画面を12分割してい...

今回はBootstrapでハートマークを作ったり、進捗状況を表すプログレスバーの作り方になります。 Componentsをクリックすると様々なアイコンがあります。その中からハートマークを作っていきます。 上記のように書きます。 ハートマークを表示することがで...

今回はBootstrapでドロップダウンメニューの作り方を学んでいきます。メニューをクリックしたら、下に他の項目が現れるやつです。よく使われているメニューなので、見れば『あれのことか！』と分かるはずです。 ComponentsからDropdownsをクリック。上記の...

今回は『ログインに成功しました』『パスワードが間違っています』のようなアラートをBootstrapで学んでいきます。 Bootstrapの3系からComponentsをクリック。 ComponentsからAlertsをクリック。 上記のようなメッセージを作成してみます。 success（緑）...

今回はBootstrapで使用頻度が高いと言われているボタンを学んでいきます。また色についても学んでいきます。 CSSの3系でCSSからButtonsをクリック。 まずはリンクを作って、それからclass="btn btn-default"を書いて、ボタンを作ります。 まずはリンクを作...

今回は実際にBootstrapを使ってみて、どれぐらい便利なのかみていきましょう。 まずは画像をBootstrapのフォルダに入れるために、CSSフォルダから『なばなの里』の画像をDuplicate（複製）します。 Duplicateするとnabana.1.jpgというファイルが出来ます。...

今回はBootstrapとは？についてです。またBootstrapを使うための準備を説明していきます。BootstrapはCSSのフレームワークになります。 Bootstrapはよく使うCSSを、決まったclassを使う事で簡単にデザインをすることができるようになります（画像を丸くし...

今回は画像に丸みを付けたり、文字に影を付けて立体感を出したりします。 まずは画像を表示させます。 サイズが大きすぎると分かりにくいので幅を150pxにします。 border-radiusは画像の丸くすることができます。50％にすると丸くなります。 border-radius...

今回はCSSの余白について学んでいきます。余白はコンテンツとコンテンツの間の事です。 まず、前回からHTMLでpタグの2行だけにします。 CSSでborderはコンテンツに境界線を引くためのものです。solidは一本戦を表しています。 プレビューで見ると、上記の...

今回はリンクの下線を消したり、ブロック要素をインラインっぽく見せる方法を学んでいきます。 まずHTMLでリンクを作ります。ちなみにURLはこのブログです。 CSSでtext-decorationをnoneにすると、リンクの下線を消すことができます。 次にpタグで同じ内容...