Fontelloのアイコンフォントを使ってみよう

こんにちは、allWebクリエイター塾生digidog（デジドッグ）です。

レスポンシブWebデザインで制作する場合、データの軽量化や、画面解像度によって表示がそこなわれないように配慮する事が大事です。そこで、アイコンなどはなるべく画像を使わずに、データも軽く解像度が違ってもきれいに見える、アイコンフォントをうまく利用してきたいと思い、勉強してみました。

今回は無料でアイコンフォントを提供している「Fontello」を利用し、使い方を詳しく紹介していきます。

レスポンシブWebデザインとjQuery Mobile｜1日でマスターjQuery Mobile初心者の記 (6)

今回の講座の中で、jQuery Mobile 1.3で新しく追加された機能、 表示幅に対応して自動的にフォーマットが変化する「Responsive tables」や「Responsive grids」、新しいウィジェットの「Panel」についても説明がありました。

デザインカスタマイズ｜1日でマスターjQuery Mobile初心者の記 (5)

デザインカスタマイズは2点の方法があります。

• 気合いでCSSを変更する
• 公式ツールであるthemeroller

jQuery Mobileのフォーム｜1日でマスターjQuery Mobile初心者の記 (4)

jQuery Mobileの用意されたフォームはCSSも意識せずにスマホらしい見た目になります！

ページ遷移について｜1日でマスターjQuery Mobile初心者の記 (3)

多彩で簡単なページ遷移のエフェクト

jQuery Mobileにはjavascriptを用意する事なくページ遷移の多彩なアニーメーションエフェクトが選べます。

jQuery Mobile ページを用意しよう｜1日でマスターjQuery Mobile初心者の記（2）

前回同様に、jQuery Mobile 入門基礎講座を受講した内容をまとめていきます。
まずはベースとなるHTMLファイルを読み込みます。

jQuery Mobile 入門講座｜1日でマスターjQuery mobile初心者の記（1）

「スマートフォン向けのサイトが手軽に作れるけどクライアントはテンプレートで満足しないだろうな。」これがjQery Mobileに対するわたしの先入観念でした。
そんなわけできちんと取り組まずにいた、jQeryMobileを今回受講しました。

Webサイト運営の助っ人がココに在り！WordPressのユーザー権限活用方法

WordPressに触ったことが無い人が抱くイメージとしてはどのような物があるでしょうか。
「コーディング知識が無くてもサイト更新が行えるらしい？」
「プラグインというものを使えば、プログラムがわからなくてもいろいろ出来るらしい？」

7月20日に受講したWordPress基礎講座で、あいまいな知識をたくさんの事例や丁寧な解説によって、導入するメリットやサイト運営方法など、多くの知識を上書きすることができました。操作方法を調べるには担当講師、星野さんの書籍でも多数のことを紹介されていますが、具体的な事例を元に解説していただくことで、WordPressの特性を活かすヒントを学べたと思います。
私が気になったWordPressの魅力、ユーザー権限に焦点をあてて、Webサイト運営の助っ人WordPressは何をしてくれるのかをまとめてみました！

JavaScriptに慣れるための3か条｜JavaScript基礎講座

JavaScriptの書籍を買って、一人で勉強してもなかなか理解することが出来ないことがあります。JavaScriptは、関数がでてきたり記述方法がいろいろあったりなど、プログラムを勉強したことの無い私は基本的なところでよくつまづきました。

今回は、JavaScriptをすっかり食わず嫌いになってしまった私が、JavaScript基礎講座を受講して、克服のための第一歩を踏めたポイントをご紹介します。ずばり、JavaScriptに慣れるための3か条です！

JavaScriptに慣れるための3か条

• (1) テストすることでJavaScriptに慣れる
• (2) パソコンに計算させることでJavaScriptに慣れる
• (3) 基本的なルールを覚えてJavaScriptに慣れる

ベンダープレフィックスはもういらない？

こんにちは。digidog(デジドッグ）です。6月23日（日）CSS3講座を再受講してきました。前回の受講はまたもや１年以上前。せっかく勉強はしたもの、IE対策を外せない環境に居た為、ばんばん実装出来ず、結局あまり使う事のないまま記憶も薄くなっていましたので、再受講です。

受講中たくさんプロパティーを勉強しましたが、今回は、ちょっと違った部分でも勉強になったところをご紹介します。

Googleランキングが下がる？スマホサイト最適化は必須！正しいRWDに解決策あり！

こんにちは、allWebクリエイター塾、受講生のdigidog（デジドッグ）です。今日は、スマートフォン制作において、Googleから重要なお知らせがありましたので、勉強の為にまとめてみたいと思います。

6月11日（火）にGoogleから「スマートフォン向け検索でのランキングの変更について」の発表がありました。

これは、Google が考える、「スマートフォン向けユーザーが快適に検索体験が出来る」それにふさわしいサイトを用意しましょう。その為には、スマートフォン向けユーザーの、サイトを閲覧する際に遭遇する支障を軽減する為、いくつかの問題な設定をしているサイトの順位を変更するという事です。以下は多く見られるミスについてピックアップしています。

レスポンシブWebデザインにも相対単位！｜CSSレイアウト講座編

こんにちは、digidog（デジドッグ）です。

今週6月16日（日）にCSSレイアウト講座があるので、ちょっと復習しようと思います。私がCSSレイアウト講座を受講したのは１年位前。講座を受講した時はいくつか初めて聞く事もありました。よく調べながらやってきたつもりでしたが、やはり「独学では学習が足りない」と思いました。

allWebの動画（レスポンシブWebデザイン講座を受けてみよう！）で、CSSレイアウト講座、講師である菊池氏も、「レスポンシブWebデザインでは、今までピクセルなどで指定して作成していた方も、em、rem、などを使って、正しいグリッド、正しい設計をしていく必要がある」と語っています。

「UX/UI設計」＆モバイルファーストって？

第一回　UX/UI設計講座を受講した、digidog（デジドッグ）です。

Web制作は長年してきたものの、モバイルの方も出来るようにしていきたいと思い、受講しました。モバイルファーストは以前「レスポンシブWebデザイン基礎講座」を受講して勉強していましたが、今回の「UX/UI設計講座」でより、実践的な設計部分を勉強する事が出来ました。

まずはモバイルファーストで考え方から変えよう！

ガラケー時代にその機能さえたいして使えてなかった自分は「PC用Webのモバイル版」って感じで考えていました。 だから、「情報が少ない？」とか、「表現が狭い？」みたいな疑問がでていたのだと気づかされました。まずはこの考え方から頭を切り替えなければ理解できないんですね！

SEOを考えるなら「ロボットが理解できる言語」を極めよう！｜HTML5マークアップ講座編

突然ですが、br要素、これを１ページでどれだけ使っていますか？（結構使ってました）それは本当に「改行」でしょうか？それとも「段落」？本当に他に適切な要素はありませんか？今日は、html5.jpの管理者であり、allweb講師、羽田野氏の講座「HTML5マークアップ基礎講座」を学んだ事を紹介します。

marginが消えるのを解決するシンプルな考え方

「あれ？指定した数値でmarginが表示されないよ！なんで、効かないの？」という遭遇になったことはありませんか？

理由をわかっていなかった私は回避策としてpaddingに書き直していました。
(paddingとmarginの違いを理解していなかったようです。）
allWebクリエイター塾で受講したHTML5+CSS入門基礎講座で解決したので共有させていただきます！

すべては正確に情報を伝えるために | HTML5,CSS編

こんにちは、allWeb受講生digidog(デジドック)です。基礎講座の「最も重要な基礎部分の勉強」として、歴史のセクションを前回までにご紹介しました。今回から、HTML5本体の内容に触れながら部分的に気になったところをご紹介します。

HTMLとCSSとJavaScriptの関係 （役割は明確に）

言わずと知れた、三角関係（笑）じゃなくて、、、。HTML5のマークアップを学ぶとHTMLとCSSの関係のはっきりさもうなづけます。そして、JavaScriptはその利便性を向上させる為にその技術を使うということです。

「JavaScript自身が注意を引くようなものであるべきではなく、無理やり使うべきでない。」

じゃあ何故HTML5なのか？ | HTML5,CSS編

こんにちは、allWeb受講生digidog(デジドック)です。少し前回の歴史を振り返った事の続きになりますが、XHTML1.0を2000年に開発されてから、何故、HTML5が誕生したのか？を、勉強したところからご紹介しますね。

１.文法が厳格な為エラーが多発な為ハンドリング回避

前回も紹介しましたが、XMLを元に作られたXHTMLは文法が非常に厳格であるという点。これをすべてをクリアできない為にエラーがでまくる訳ですね。いちいち間違った文法を正常の状態にする処置をしていたのでは、「ブラウザに負担がかかってしまう」ここはポイントですね。

2.セマンティクスの強化

セマンティクスとはHTML5のマークアップを勉強していくと、より、解りやすいのですが、一般的には「意味」という事です。ここでいう、「意味」とその「強化」とは、ユニバーサル的に（条件の違う環境の人だけではなく、ブラウザにも）文書や情報の持つ意味を正確に解釈させること。これをさらに強化させる方法として、マイクロデータにも注目しています。

実際に回りこんでいるのは何？ | floatの正体に迫る！その1

floatとは何か？を問われたら、要素が回り込むんだよ！と答えがちでした。でもちょっと違うようです。基本中の基本ですが、ここでfloatの正体を押さえるか否かで大きな差が出てきます。floatの正体に迫りました！

Webの歴史と原理を知って、もっと簡単HTML5！ | HTML5,CSS編

こんにちは、allWeb受講生digidog(デジドック)です。今回は、HTMLの歴史を勉強したところから紹介してみたいと思います。

えーわたくし、Webを始めたのはDTPをしていて、Adobe関連のソフトを使用していたものですから、ちょっとお手伝いをきっかけに、Dreamweaverなど「このページを作るにはどう使えば出来るんだ？」って、道具の使い方から入ってます。ですので、Webがなんぞや？歴史？なんて考えた事もなかった次第です。ですが、allWebで受講した今では、こんな難しそうな記事も、「アーこれ勉強した！」と理解しちゃう部分もあったりして感動しちゃいます。では早速本題、復習復習です。

HTML5の要素を理解してマークアップをしよう

HTML5＆CSS入門 基礎講座を受講してきました。
HTML5の勉強をしたいと思い、今までと何が違うのかを調べて、「宣言が簡単になったんだな〜」レベルの認識でしたが、どうして変更されたのか？から勉強することができました。

WEBの勉強を始める前の準備をしよう！ | HTML5,CSS編

はじめまして、digidog(デジドック)です。
allWebクリエイター塾の講座は、HTML5+CSS基礎講座や、CSSレイアウト講座からレスポンシブWebデザイン講座のモバイル制作まで受けました。

allWebで得た考え方や知識、また、受講の様子、感想などお伝えできればと思います。
基礎講座に来られる方は、「WEBショップを始めたばかり」「WEBデザイナーだけど分業なので」とか、「エンジニア」に「印刷関連」、「ディレクターになりたて」などなど、業種もスキルも立場も様々です。そんな違った環境から勉強されるのに、本当にここでの勉強から始められてうらやましいな！と、思います

制作しながら散々検索したりして、たどり着いてみれば「使えない」ってことの繰り返しの中、この講座に出会って、根本的に情報に振り回されていたなあと、痛感してるからです。では早速内容に入りましょう

reset.cssをカスタマイズしてパフォーマンスアップさせる方法

CSSレイアウト講座を3月31日に受講してきました。
その中で、「reset.css」の説明がありました。私の場合ですが、marginなどをゼロにしてくれるものという認識しかしていない事に気付きました。そのような事では、内容を把握していないソースをコピペして本来のreset.cssの良さを有効活用できずに終わってしまいます。講座では誕生の理由から説明して頂きました！