体験記– category –
-
【スキルハックス】Rubyで計算の仕方を学ぶ!
今回はRubyで計算をしていきます。足し算・引き算・かけ算・割り算を学んできます。 『puts 1+1』と書いて、実行すると『2』と計算されます。『puts』が後に続くことを表示するので、『1+1』の結果の『2』を表示してくれました。 もうひとつ足し算をしてみ... -
【スキルハックス】Rubyについて学び始めました!
今回からRubyについて学んでいきます。Rubyと今まで学んできたHTMLやCSSを使うことでWebサービスを作っていくことができます。データの処理などの目では見えない部分を処理してくれるのがRubyになります。 最初に新しいファイルを作成します。 そのファイ... -
【スキルハックス】Bootstrapのグリッドシステム(レスポンシブデザイン)について学ぶ!
今回はBootstrapはスマホやパソコンでのサイズが違うデバイスでも調整してくれる機能があります。レスポンシブデザインというもので、そのレスポンシブデザインを作るためにグリッドシステムというものがあります。 グリッドシステムは画面を12分割してい... -
【スキルハックス】Bootstrapでハートマークを作る!進捗状況を示すプログレスバーを作る!
今回はBootstrapでハートマークを作ったり、進捗状況を表すプログレスバーの作り方になります。 Componentsをクリックすると様々なアイコンがあります。その中からハートマークを作っていきます。 上記のように書きます。 ハートマークを表示することがで... -
【スキルハックス】Bootstrapのドロップダウンメニューの作り方を学ぶ!
今回はBootstrapでドロップダウンメニューの作り方を学んでいきます。メニューをクリックしたら、下に他の項目が現れるやつです。よく使われているメニューなので、見れば『あれのことか!』と分かるはずです。 ComponentsからDropdownsをクリック。上記の... -
【スキルハックス】Bootstrapのアラートの使い方を学ぶ!エラーメッセージみたいなやつ
今回は『ログインに成功しました』『パスワードが間違っています』のようなアラートをBootstrapで学んでいきます。 Bootstrapの3系からComponentsをクリック。 ComponentsからAlertsをクリック。 上記のようなメッセージを作成してみます。 success(緑)... -
【スキルハックス】Bootstrapでボタンを作る!色についても学ぶ!
今回はBootstrapで使用頻度が高いと言われているボタンを学んでいきます。また色についても学んでいきます。 CSSの3系でCSSからButtonsをクリック。 まずはリンクを作って、それからclass="btn btn-default"を書いて、ボタンを作ります。 まずはリンクを作... -
【スキルハックス】Bootstrapを使って便利さを体験する
今回は実際にBootstrapを使ってみて、どれぐらい便利なのかみていきましょう。 まずは画像をBootstrapのフォルダに入れるために、CSSフォルダから『なばなの里』の画像をDuplicate(複製)します。 Duplicateするとnabana.1.jpgというファイルが出来ます。... -
【スキルハックス】Bootstrapってなに?使うまでの準備をする!
今回はBootstrapとは?についてです。またBootstrapを使うための準備を説明していきます。BootstrapはCSSのフレームワークになります。 Bootstrapはよく使うCSSを、決まったclassを使う事で簡単にデザインをすることができるようになります(画像を丸くし... -
【スキルハックス】CSSで画像に丸みをつけたり、文字に影を付ける
今回は画像に丸みを付けたり、文字に影を付けて立体感を出したりします。 まずは画像を表示させます。 サイズが大きすぎると分かりにくいので幅を150pxにします。 border-radiusは画像の丸くすることができます。50%にすると丸くなります。 border-radius...