体験記– category –

今回はRubyで計算をしていきます。足し算・引き算・かけ算・割り算を学んできます。 『puts 1+1』と書いて、実行すると『2』と計算されます。『puts』が後に続くことを表示するので、『1+1』の結果の『2』を表示してくれました。 もうひとつ足し算をしてみ...

今回からRubyについて学んでいきます。Rubyと今まで学んできたHTMLやCSSを使うことでWebサービスを作っていくことができます。データの処理などの目では見えない部分を処理してくれるのがRubyになります。 最初に新しいファイルを作成します。 そのファイ...

今回は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...