スクリーンショット

bootstrap

最近、学校の卒業制作をメインにしているせいで勉強ができず、ブログの更新ができていませんでした…。ちょっと反省して、少し前から勉強しているbootstrapについて書いてしまおうかと思います。

bootstrapとは、twitter bootstrapのことです。
ほかの学生さんにbootstrapのお話をしたところ、意外と知られていないことに気づきました。

twitter bootstrap

CSSのフレームワークで、twitterや、ドットインストールに使われています。

CSSのフレームワークっていうのは、自分でCSSを書かなくても、HTMLとクラスだけ書いていけばなんとなくかっこいいデザインになってくれる便利なもののことです。

私はbootstrapと、a-blogcmsを一緒に使って勉強しているので、結構早くに大体の形ができてきました。そのため、ほんとに、ほぼクラスしか書いていない状態です。bootstrapというか、a-blogcmsの勉強みたいな感じになってるときもあるくらいです。

それでもきっと、bootstrapをやっていって、自分の中でbootstrapやa-blogcms以外のの基本的なことの引き出しが増えていってると思うんです。
bootstrapを勉強しながら、CSSでできることを学んだり、ドロップダウンとかの名称を覚えたり、html5の勉強にもなりました。

私が実際にbootstrapを使って感じたこと

  • グリッドシステムが使われていて、便利
  • あんまりCSS書けなくても大丈夫
  • 簡単にレスポンシブ対応にできる
  •   

  • すばやくカッコイイデザインが作れる

 

■グリッドシステム
新しくグリッドシステムのことも学びました。普段のサイト作りでは使わないので、「そんなものがあるのか」から始まりました。
あんまり詳しくは理解していませんが、とりあえず、幅を指定するときに便利です。

■あんまりCSS書けなくても大丈夫。
はじめからCSSがあるので、あんまり書けなくても大丈夫です。
「あんまり」っていうのは、自分で書き足さないといけないためです。
どうしてもmarginとかpaddingとかを書き足さないと、詰め詰めになってしまって、見づらくなってしまいます。

■簡単にレスポンシブ対応にできる
私、レスポンシブサイトの作り方、わかりません。(一度勉強しようとしてみたけど、まだ理解できなかったため)
ですが、レスポンシブにできました。
フレームワーク、ほんとすごいと思いました。
少し憧れだったレスポンシブサイトが簡単にできてしまいました。

■すばやくカッコイイデザインが作れる
クラスを書いていくだけなので、ぱぱっとナビやボタンができていきます。あんまり自分でCSS書かなくて良いんで早いです。
でも、ちょっと気になるところがあるんです。
・ナビバーや、ボタンのデザインが他の人と一緒。
同じCSS使っているので、当然ナビバーとかボタンとか一緒になってしまいますよね。
まあ、ナビバーやボタンくらい人と一緒でも良いサイトさんもあるだろうし、人それぞれなんですが。
個性的な自分だけのサイトとか作ろうとしている人には向いてないと思います。そんな人はフレームワークなんか頼らずに自分でCSS書いてしまいそうですが…。
確かにbootstrapは便利だけれど、自分でCSSを書いた方が愛着はわくと思いました。

 

この記事を書いて、まだまだbootstrapについてわかっていないことが多いことに気づきました。特にグリッドシステムとか。
そして、やっぱりレスポンシブサイトをフレームワークなしで自分の力で作ってみたいとかも思いました。
果たしていつになるやら…といった感じですが。
そのためには、とりあえず学校の卒業制作を早く終わらせることにします!

それでは。

 

答え合わせが終わりました!

やっと、以前からablogcmsさんのテーマを使って、やっている答え合わせが終わりました。

clearhidden、clearfix、とか、

ベンダープレフィックスとか、

cssでのhoverの仕方とか、

heightを指定しないで作っていく方法とか、

borderの使い方とか、

tableとか、

たくさん学びました!
他の方が作ったサイトを作ってみて、とても勉強になりました。

◆ table
この中で一番苦戦したのはtableでした。
(結局、サイト内ではtableを使っていなくて、borderが使われていたのですが…)
前期にあったウェブデザインの授業では、ドリームウィーバーの機能をつかってテーブルを作ったことがあり、実際にhtmlでは作ったことがなかったからです。(それにtableを作ったのも一度でした)
tableの枠線を消したりできるのを知らなかったので勘違いといえど、とても勉強になりました。
tableに関しては、サイトを探しても、欲しい情報が書かれていないことが多く、
いろんなサイトを探しました。

◆ clearfix
clearfixの存在は知らなかったのですが、
自分で勝手にclearのためのクラスを作っていたので、既にあると知ってびっくりしました。
楽な方法で卑怯だなあとか我ながら思っていたのですが、他の人も同じことしててちょっと安心しました。

◆ height
私はなぜか、今まではdivにheightをいちいち指定してサイトを作っていました。
指定しない方が、楽でいいですね。
思えば授業では、先生は引っ張りだこで、(ほかのクラスメイトもサイト作りは初めての人が多かったため)ほぼ独学状態でした。
勘でhtml書いてました…。
でも、それって正確なマークアップではないので、危険な行為だったな、と反省しています…。

まあ、とりあえず、一つすることが終わったので、bootstrapの勉強をします!
実ははbootstrapでサイトを1つ作ることになりました。
一月は学校の卒業制作の締め切りもあり、ポートフォリオサイトをもう一つ作りたいと思っているので(実は就活中)、今月は大変です…!
が、がんばろう…!

WCAN2012 winter

WCAN2012 winterに参加してきました!
初めての大きな勉強会だったため、当日は少し緊張していました。

以前いったことのある場所だったのですが、
事前に乗り換え案内やGooglemapなどのアプリをまだ買ったばかりのiPhoneに入れて用意していました。
まあ、結果、とても駅から近いところで、看板もあり、地図いらずでしたが。

では、本題です。

続きを読む

ベンダープレフィックス

少し前に、11月にあった色彩検定の結果がきました。
なんとか、無事に合格できました〜!
いきなり2級を受けるという荒技を実行したのですが、
無事に合格できて安心です。

 

さて、実は前からa-blog cmsさんのテーマを使わせてもらって、HTMLとCSSを書いていました。
ある程度できてきたので、今日、実際の物と答え合わせをしました!
・・・まあ、間違っていますよね。
そんな中、合っているところがあると嬉しくなるもんですね。

答え合わせをしていて疑問に思った物がありました。
text-align:-webkit-match-parent
なんだこれ、と思って調べても出てこない・・・。
CSSリファレンスのサイトをみてもtext-alignのところにない・・・。
ちょうど話しかけてくれたウェブデザイン学科の先生に聞くことで解決できました。(ほんとにタイミングよく話しかけてくれて助かりました)

-webkit-

match-parent
は別々のようで、

-webkit-は、ベンダープレフィックスというもので、
safariやgooglechromeに使われる物です。

webkit以外にも種類があり、

  • moz : firefox
  • o : opera
  • ms : IE

これらはCSS3を使うときに適用します。
それぞれのブラウザ向けのベンダープレフィックスをつける必要があるのです。

ですが、すでにgooglechromeやfirefoxなどのブラウザでは、ベンダープレフィックス無しでも
動作できるようになっています。
そのため、ベンダープレフィックス無しのものも一緒に書いておくと良いみたいです!
 
ちなみに、もうひとつのmatch-parentというものは、CSS3の一つでした。
CSS3だったため、いつも使っているCSSのリファレンスサイトにはなく、ドリームウィバーにもなかったみたいです。
 

ベンダープレフィックスは、ドットインストールなどでよく単語を聞いていたんですが、
実際になるときちんと理解できていなかったことが分かりました。
CSS3も、どんどん覚えていかないといけないですね。
既にあるサイトを作ることで、自分がもっと勉強するべきところが発見できて、ためになりました。

 
では、これから土曜日に参加予定のWCANのために名刺を作ります!
それでは〜

WEBデザイン ハンズオンセミナーに参加しました。

12月8日に「WEBデザインハンズオンセミナーVol.1」に参加させて頂きました。

自分自身、初めてこういったWEBデザインのセミナーに参加したので、

若干緊張しつつも、わくわくしながら行ってきました!

 

まずセミナーが行われる前なのですが、複数の方々から名刺を頂きました。

こういったセミナーのときには皆さん名刺を配るんですね〜!

そんなことも知らなかったため、名刺は用意できず・・・。

今度からは持っていこう・・・。

 

今回のセミナーは、WEBデザインをし始めた人や、WEBデザインの仕事をし始めた人などを対象にされています。

そのため、本当に基礎のことから丁寧に教えてくれました。

前半の座学の部分では、例えば、実際の仕事の流れ、就職についてからインターネットの歴史、仕組みなど・・・!

なんでもインターネットが冷戦時代に作られたらしくて、驚きました!

他にも、今回はWEBデザインのセミナーだったため、

デザインの基礎についても教えてくださいました。

文字は端に揃えるときれい、とか、文字の間隔は同じ方がきれい、とか。

人にはちょっと聞きにくい基礎知識で、

知らなかったことなどがたくさんあり、とても勉強になりました。

 

後半に行われたハンズオンセミナーでは、まずはじめに4人1組になり、

クライアントからウェブサイトの制作依頼という内容で、ワイヤーフレームを作りました。

1つめは、一般的な企業サイトを、2つめは挑戦的なものを、というお題でした。

挑戦的なものの方は、どのグループもアイデアが面白くて、

楽しくプレゼンを聞いていました。

 

つぎには、実際にPhotoshopを使ってのテクニックを学びました。

実際に制作する前に、webデザインにとっておすすめのPhotoshopの設定から始まりました。

設定が終わると、ボタンを制作する際に、影などを意識することで

ボタンっぽさを出すことができる方法を教えてくださいました。

 

初めてのセミナーでしたが、そんなに固い感じではなくて、

座学も2時間くらいあったはずなのですが、楽しく、あっという間でした。

初めて会った人とも、お知り合いになることができました。

他にも教えてくださる予定みたいでしたが、丁寧に教えてくださったので、

とても分かりやすかったと思います。

 

また次回の開催を予定されているようなので、

参加できたら良いなあ、と思っております。

今度はきちんと名刺を作って、名刺交換ができるようにしたいです!