ブログ BLOG Home Blog #課題 Bootstrap、Font Awesomeの導入方法 こんにちわ!研修員の佐藤です。僕が課題で使ったBootstrapとFont Awesomeの簡単な説明をします。BootstrapはPC、タブレット、スマートフォンに対応したレスポンシブなサイトを作れ、スタイリッシュなページを作るのに便利なツールです。Font Awesomeはいろいろな種類のアイコンを使うのに便利なツールです。ではさっそく紹介していきます!まずは準備で<head>~</head>の間に下記の「<link rel="~」から始まる二行を入れます。● Bootstrap ・入力フォームの変え方 inputタグに「class="form-control"」を追加してみました。 コードの「<div class="container">」「<div class="row">」「<div class="col-xs-2">」はbootstrapのグリッドシステムというもので、同じページをスマホや大画面のPCで見た時にそれぞれの画面に対応したレイアウトにしてくれる便利な機能です。 「class="form-control"」を追加してやるだけだと、画面いっぱいに入力フォームが伸びてしまうので、今回は幅を指定してやるために使いました。 ・テーブルの変え方 tableタグに 「class="table table-bordered" 」を追加してみます。 デフォルトのテーブルは比較しやすいようbootstrapのテーブルと同じにするためwidthとheightを入れていますが、bootstrapは先程のグリッドシステムでその幅にあったテーブルのwidthを自動で設定してくれます。 widthとheightを入れてやれば違いはパッとしませんがbootstrapにはデフォルトにはない機能が存在します! ・ストライプ tableタグに「class="table table-bordered table-striped"」を追加してやります。 行毎に背景の色を自動で変えてくれて横を間違えず見ることが出来ます! ・ホバー tableタグに「class="table table-bordered table-hover"」を追加してやります。 カーソルをあわせた行のみ背景の色を自動で変えてくれます!・ボタンの変え方 buttonタグに 「class="btn"」 を追加します。後ろに「btn-primary」を追加してやることでボタンの色を青色に変えることができます。 他の色の種類は 青:btn-primary 白:btn-default 赤:btn-danger 緑:btn-success 水色:btn-info 橙:btn-warning があります。●Font Awesomeここ(http://fontawesome.io/icons/)で使いたいアイコンをクリックして、赤い矢印の一行をコピーして自分のコードに張り付ければ完成です!このようにいつものコードにちょっと手を加えるだけで見栄えが断然変わります!これらを使ってより見やすいウェブページを作ってみてはいかがでしょうか? #Bootstrap #Font Awesome #課題 #研修 2016-10-19 視点の重要さ こんにちわ!研修員の佐藤です。前回の記事の課題にて、課題に取り組んでいるときに気づかされたことを書きたいと思います。僕は最初に住所録のwebページを作る為、必要な機能などをノートにまとめ社長に見ていただいたところ、「作るときにどう使われるかを考えろ」とご指摘いただきました。このページを使用する第三者の目線で考え、改めて自分のイメージを見直してみたところ、無駄な要素の多いとても不親切な設計になっていたと気付きました。課題をこなすと同時に今まで自分がいかに何も感じずにインターネットを使っていたかと思い知らされました・・・「ここはこうしたらもっとよくなるんじゃないかな」ということを常に考えていればこのようなことはなかったと思います。社会に出てたばかりの自分にとって、まだまだこのようなことはたくさん出てくると思います。しかし、社訓の一つに「失敗(ミス)を恐れるな、失敗(ミス)は即、経験に置き換えろ」とあります。だから今回のこれも「良い経験」として今後の仕事に活かせるように頑張りたいです! #研修 #課題 #経験 #視点 2016-10-07 研修員の課題 こんにちわ!研修員の佐藤です。 この会社にきて、プログラムの基礎となる【データの表示・登録・編集・削除】を使った課題が与えられました。具体的には表示・登録・編集・削除の機能を持った住所録を作るという課題です。何のためかと言いますと一番にシステム屋として基礎となるデータベースの操作を覚えるためです。データベースとは簡単に言うとデータを整理して入れられる入れ物のようなものです。そしてそれ以外にも作るうえで住所録そのもの以外のこともいろいろ学ばせていただきました。・コードの書き方自分の今まで書いてたコードは自分だけがわかっていればよいと適当に書いていました。だけど、プログラムを一人で書くことはあまりないため、ほかの人にも理解してもらう必要があります。例えば適当な変数にしてしまうと他人が見たときに分かってもらえない可能性が高いです。しかし、コメントを残しておけば次誰かほかの人が見たときにでもすぐわかってもらえます。・バリデーションここではデータのバリデーションで、入力されたデータがあらかじめ規定された条件や仕様、形式などに適合しているかどうか検証・確認をしてくれます。例えば僕が使った機能として、どんなデータ(空欄でさえも)でも登録されていったらきりがないので入力必須(空欄では登録されない)の機能や、入力したメールアドレスの書き方が正しいかどうかを判断してくれる機能などがあります。参照:http://e-words.jp/w/%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.html・Bootstrap、Font Awesome最初僕が作った入力フォームはとても見た目が悪かったですが、Bootstrap、Font Awesomeを導入すると、見た目がとてもきれいになりました。Bootstrap:http://getbootstrap.com/Font Awesome:http://fontawesome.io/icons/ほかにも、・Laravelでの書き方・POSTとGETの違い・ajaxによる非同期化・クロスサイトスクリプティングといろいろあります。これらは基礎の基礎だと思うのでこれからもどんどん学びつつ成長していきます! #研修 #課題 2016-09-30 記事をもっと見る
Bootstrap、Font Awesomeの導入方法 こんにちわ!研修員の佐藤です。僕が課題で使ったBootstrapとFont Awesomeの簡単な説明をします。BootstrapはPC、タブレット、スマートフォンに対応したレスポンシブなサイトを作れ、スタイリッシュなページを作るのに便利なツールです。Font Awesomeはいろいろな種類のアイコンを使うのに便利なツールです。ではさっそく紹介していきます!まずは準備で<head>~</head>の間に下記の「<link rel="~」から始まる二行を入れます。● Bootstrap ・入力フォームの変え方 inputタグに「class="form-control"」を追加してみました。 コードの「<div class="container">」「<div class="row">」「<div class="col-xs-2">」はbootstrapのグリッドシステムというもので、同じページをスマホや大画面のPCで見た時にそれぞれの画面に対応したレイアウトにしてくれる便利な機能です。 「class="form-control"」を追加してやるだけだと、画面いっぱいに入力フォームが伸びてしまうので、今回は幅を指定してやるために使いました。 ・テーブルの変え方 tableタグに 「class="table table-bordered" 」を追加してみます。 デフォルトのテーブルは比較しやすいようbootstrapのテーブルと同じにするためwidthとheightを入れていますが、bootstrapは先程のグリッドシステムでその幅にあったテーブルのwidthを自動で設定してくれます。 widthとheightを入れてやれば違いはパッとしませんがbootstrapにはデフォルトにはない機能が存在します! ・ストライプ tableタグに「class="table table-bordered table-striped"」を追加してやります。 行毎に背景の色を自動で変えてくれて横を間違えず見ることが出来ます! ・ホバー tableタグに「class="table table-bordered table-hover"」を追加してやります。 カーソルをあわせた行のみ背景の色を自動で変えてくれます!・ボタンの変え方 buttonタグに 「class="btn"」 を追加します。後ろに「btn-primary」を追加してやることでボタンの色を青色に変えることができます。 他の色の種類は 青:btn-primary 白:btn-default 赤:btn-danger 緑:btn-success 水色:btn-info 橙:btn-warning があります。●Font Awesomeここ(http://fontawesome.io/icons/)で使いたいアイコンをクリックして、赤い矢印の一行をコピーして自分のコードに張り付ければ完成です!このようにいつものコードにちょっと手を加えるだけで見栄えが断然変わります!これらを使ってより見やすいウェブページを作ってみてはいかがでしょうか? #Bootstrap #Font Awesome #課題 #研修 2016-10-19
視点の重要さ こんにちわ!研修員の佐藤です。前回の記事の課題にて、課題に取り組んでいるときに気づかされたことを書きたいと思います。僕は最初に住所録のwebページを作る為、必要な機能などをノートにまとめ社長に見ていただいたところ、「作るときにどう使われるかを考えろ」とご指摘いただきました。このページを使用する第三者の目線で考え、改めて自分のイメージを見直してみたところ、無駄な要素の多いとても不親切な設計になっていたと気付きました。課題をこなすと同時に今まで自分がいかに何も感じずにインターネットを使っていたかと思い知らされました・・・「ここはこうしたらもっとよくなるんじゃないかな」ということを常に考えていればこのようなことはなかったと思います。社会に出てたばかりの自分にとって、まだまだこのようなことはたくさん出てくると思います。しかし、社訓の一つに「失敗(ミス)を恐れるな、失敗(ミス)は即、経験に置き換えろ」とあります。だから今回のこれも「良い経験」として今後の仕事に活かせるように頑張りたいです! #研修 #課題 #経験 #視点 2016-10-07
研修員の課題 こんにちわ!研修員の佐藤です。 この会社にきて、プログラムの基礎となる【データの表示・登録・編集・削除】を使った課題が与えられました。具体的には表示・登録・編集・削除の機能を持った住所録を作るという課題です。何のためかと言いますと一番にシステム屋として基礎となるデータベースの操作を覚えるためです。データベースとは簡単に言うとデータを整理して入れられる入れ物のようなものです。そしてそれ以外にも作るうえで住所録そのもの以外のこともいろいろ学ばせていただきました。・コードの書き方自分の今まで書いてたコードは自分だけがわかっていればよいと適当に書いていました。だけど、プログラムを一人で書くことはあまりないため、ほかの人にも理解してもらう必要があります。例えば適当な変数にしてしまうと他人が見たときに分かってもらえない可能性が高いです。しかし、コメントを残しておけば次誰かほかの人が見たときにでもすぐわかってもらえます。・バリデーションここではデータのバリデーションで、入力されたデータがあらかじめ規定された条件や仕様、形式などに適合しているかどうか検証・確認をしてくれます。例えば僕が使った機能として、どんなデータ(空欄でさえも)でも登録されていったらきりがないので入力必須(空欄では登録されない)の機能や、入力したメールアドレスの書き方が正しいかどうかを判断してくれる機能などがあります。参照:http://e-words.jp/w/%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3.html・Bootstrap、Font Awesome最初僕が作った入力フォームはとても見た目が悪かったですが、Bootstrap、Font Awesomeを導入すると、見た目がとてもきれいになりました。Bootstrap:http://getbootstrap.com/Font Awesome:http://fontawesome.io/icons/ほかにも、・Laravelでの書き方・POSTとGETの違い・ajaxによる非同期化・クロスサイトスクリプティングといろいろあります。これらは基礎の基礎だと思うのでこれからもどんどん学びつつ成長していきます! #研修 #課題 2016-09-30