Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。
今回はその対処方を紹介します。
“Bootstapのグリッドでcolumn崩れが起きるときの対処法” の続きを読む
大阪で働く会社員兼副業フリーランスWebデザイナーのブログ
Bootstrap3でグリッドを使っているとしばしば、カラム落ちしてレイアウト崩れをおこしている状態を見かけます。
今回はその対処方を紹介します。
“Bootstapのグリッドでcolumn崩れが起きるときの対処法” の続きを読む
2014年頃からPug(当時はjade)を使ってHTMLのコーディングを進めてました。
最初はこんな書き方もできたほうが良いのかなくらいで考えていたのですが、最近ではPugがないほうがしんどい状態になってきました。
保守が苦手だったり、修正時にミスが多い人はPugを使うことでコーディングの質を向上させることができます。
今日はそんなPugのメリットをご紹介します。
Webデザイナーになろうとして、まず最初につまずくのがコーディングです。
CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。
本記事ではCSSが全然わからない方がCSSのコーディングに慣れるための勉強法を紹介します。
まずCSSの書き方どうこうを覚えるより、まずはWeb制作の全体感を覚えたほうが、自分が担当する範囲がイメージでき、必要性が見えてくるので覚えやすくなります。
「CSSはコーディングするために必要」という考え方だけだと、どうしても作業的な見方になりがちなのですが、プロセスが見えてくると何をすれば良いのかが見えてくるので、まずは全体像の把握をおすすめします。
全体像を学ぶのは簡単なようで難しいです。
個人的には下記の書籍をオススメします。
Webデザインの新しい教科書 改訂新版 基礎から覚える、深く理解できる。〈HTML5、CSS3、レスポンシブWebデザイン〉
こちらはWeb制作入門書として人気の書籍です。
制作の「背景」や「理由」を学び、応用力をつけれる1冊です。
インターネットの仕組みから、サイト制作のワークフロー、
HTML・CSSの技術的な解説、Webサイトを公開・運用するまでの基礎知識を、
順序立てて学べます。
「すでに知っているよ」という方も慢心せずに一度目を通してみると気づきがあって「自分で考える力」や「ずっと役立つ応用力」が身につくでしょう。
Webデザイナーが最低限覚えるコーディングといえばHTML/CSS/JavaScript(jQuery)となります。
HTMLはマークアップ言語と言われるもので、<body></body>
<div></div>
といった感じでタグで囲われるものが多いです。
※imgタグのように囲われないものも存在します。
HTMLが何をしているのかというと主に検索エンジン(SEO)への対応の強化をしているものです。
適切なマークアップをすることで、Googleの検索ロボットに「ここのページがどんなページで、どんな情報があるか」を整理して意味をつけた状態で伝えます。
例えば<main>
タグでくくられた部分はそのページのメインのコンテンツとして検索エンジンには理解されます。
MTMLは要素に意味を持たせるものに対してCSSは見栄えを整えるものです。
大きく分けるとCSSでは下記の事ができます。
javascript(jQuery)はHTML/CSSに比べて難易度が高いですが、これが使えないと出来ることが限られてしますので、今需要のあるスキルです。
JavaScript(jQuery)では、ユーザーの動作によって動的なアクションを設定出来るものです。
例えば、クリックしたタイミングな何かの要素が見えたり、スクロールしたら、何かがアニメーションしてきたりします。
JavaScript(jQuery)が使えるようになると出来ることが一気に広がりWeb制作が楽しくなります。
全体の概要を把握した後は、実際に手を動かす事でCSSを学びます。
オススメは下記2サイトのカリキュラムを受ける事です。
無料で学べるので、気軽に開始できます。
2サイトともそれなりの時間は必要ですが基礎は大事ですので、時間をかけてわからないところをそのままにせずにしっかり学んでおくと今後の習得スピードが上がります。
これまでオススメの方法をご紹介しましたが、しないほうが良い方法もご紹介します。
学校のテスト勉強の延長で「暗記」に頼るのはオススメしません。
なぜなら、Webサイトをコーディングするときには暗記では対応できないケースが殆どで、応用が求められるからです。
同様にコピー&ペーストを多様するのもオススメしません。
制作の現場でも必要なコードをコピー&ペーストできるようにスニペットを作ったりはしますが、それはそのコードを理解している人だから問題なく使えるのです。
コードの意味を理解して記述していかないとなかなか身につきません。
以前CSSのプロパティをノートに書いてる人を見かけたのですがこちらもオススメしません。
理由はノートに書いたコードは検索できないので、必要なときにすぐに探せないからです。
手で書いたほうが覚えるという方もいるかと思いますが、コードを書き慣れる意味も含めてちゃんとエディターで書いてそれがきちんと自分の思い描いたように実行されるのか見える状態で練習したほうが良いです。
CSSもHTMLを「全部」を覚えようとするとかなり大変です。
私も使わない・知らないCSSプロパティとかたくさんあります。
重要度を均一にするのではなく必要なもの・よく使うものに重点をおいて調べたほうが身につきやすいですし、応用力もつきます。
CSSもHTMLも覚えただけではなかなか身につきません。
やっぱり何度もコードを書く事、そして毎日書くことが重要です。
ただCSSプロパティを覚えてもいつ使っていいかわからないとう悩みにぶつかると思います。
私はそんなときはレイアウトの模写をしました。
デザインの表現力を上げるためによく模写を勧められますが、CSSにも同じ事がいえます。
レイアウトの模写といってもどこかのページ1ページをそのまま模写するのではなく模写したい一部だけを決めてそのレイアウトだけを模写します。
この方法だと簡単なものだと数分で終わることができますので毎日の修練にぴったりです。
同時に答えのコードもブラウザから見ることができるので、悩みすぎて諦めるということもないです。
ブラウザで対象のレイアウトがどんなCSSプロパティが当たってるか見たいときは各ブラウザにあるデベロッパーツールを使うと良いです。
Google Chromeの場合デベロッパーツールはメニューバーの表示→開発/管理→デベロッパーツールのところにあります。
デベロッパーツールを起動して確認したいHTMLを選択するとそこにどんなCSSプロパティがあたっているか確認ができます。
コードを書くのにエディターを立ち上げるのが面倒、簡単なレイアウトを作るのにHTMLとCSSのディレクトリを作るのが面倒と思う人はcodepenというサービスがオススメです。
このサービスではブラウザ上でHTML・CSS・JSが書くことができそれをすぐにプレビューしてくれます。
その他にもタグが付けれたりするので、書いたレイアウトをいつか探す時にも役立ちます。
毎日続けると、たくさんの模写が溜まっていくので自分がどのくらいのCSSの勉強をしたのかが見えるので達成感もあります。
Webデザイナーの人でCSSはちょっとできるくらいの人は、このくらいはできますみたいな共有の場にしても良いですね。
Webサイトを探すときは、デザインギャラリーのサイトから探してみるのはどうでしょう。
io3000
最新のデザインに触れれる機会も増えますのでオススメです。
他にも雑誌のレイアウトを組み込んでみるのもオススメです。
Webのレイアウトだけで練習していると、常に同じようなものになってしまってすぐ飽きてしまします。
その点雑誌はレイアウトが自由なので、それをWebのレスポンシブで表現しようとすると頭を刺激して良いコーディングの練習になります。
手元にある雑誌を読むのも悪くないのですが、私のオススメは「楽天マガジン 」です。
楽天マガジンは月額380円のアプリです。
200冊以上の雑誌が読み放題なので、色んなレイアウト業界のデザインに触れる機会になります。
詳しくは別記事にしていますので、興味ある方は下記記事をご覧ください。
Webデザイナーにオススメしたい雑誌からの情報収集
コーディングは一度覚えれば簡単です。
一点注意が必要なのが、クロスブラウザの存在です。
普段みなさんは同じブラウザでWebサイトを見ているかと思いますが、ユーザーは様々なブラウザでWebサイトを見ています。
一般的なブラウザは下記になります。
【PCの場合】
【スマートフォンの場合】
同じようにCSS/JavaScriptを書いてもブラウザによって少し解釈が異なり、同じ表示にならないことがあります。
ですので、「コーディングができたー」と思ったら必ず様々なブラウザでテストをして問題なく表示されるかを確認してください。
特定のブラウザで表示が崩れてしまっては、上質なコーディングができたとは言えません。
自分で学ぶと言うのは必須ですが、時には人に頼るのも大事です。
つまずいてるところと言うのは、検索で解決できるものではなかったり、自分のやり方が適切なのか、もっといい方法はないのかと悩む事もあるかと思います。
そういった場合は、「プロに聞く」のが1番てっとり
早いです。
周りに相談できる方がいる場合は、ちゃんと質問事項をまとめて質問すれば、ちゃんと答えてくれると思います。
(※当然頼ってばかりでは信頼関係を損ね掛けないのでご注意ください)
よくjQueryがわからない
といった質問がわからないという相談を受けるのですが、正直そんなバックリな質問を受けても私もわからないです…。
ちゃんと相手が答えれるような状態まで質問を持っていかないと適切な回答はいただけないでしょう。
私も能力柄、人に教えることが多いので最近ココナラというサービスを試しに始めました。
こちらでコーディングでわからない人向けに相談に乗っていますのでよかったら、ご活用ください(ゝω・)
試しにやってるので、ずっと続けるかは不明です。
他にもオススメの方法としては動画視聴で覚えるUdemyです。
Udemyで学ぶメリットはべつの記事でまとめていますので、ご興味あればご覧ください。
動画学習サービスUdemy(ユーデミー)を1年間利用してみた評判と感想
CSSは知らない人からするととっつきにくいですが、覚えてしまえば簡単です。
最初は苦労すると思いますがコーディングはWebサイトを作るには切っても切れないですし、いつ自分が書かないといけない状況になるのかわかりません。
CSSはWebサイトを作る人には必須のスキルです。
CSSでどんな事が出来るかイメージできない、こんなことをやりたい、みんなはどうCSSを組んでるんだろう?というのが気になる方は、こちらの書籍がオススメです。
HTML5 & CSS3 デザインレシピ集
現場でよく使う実用的なコーディングの例がまとまって書いてあるので、目を通すだけでも学ぶものがあります。
本記事で苦手意識を早く克服できる手助けができたら幸いです(ゝω・)
TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。
そのCSSは「font-feature-settings」というものです。
詳しい事は下記記事よりご確認ください。
文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング
“【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた” の続きを読む
これまでスタイルガイドジェネレーターはFrontnoteを使っていましたが、この度aigisに乗り換えました。
“【サンプル有り】gulpで作るスタイルガイド-aigisに乗り換えました” の続きを読む
Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。
これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。
簡単にですが公開されたフォントを紹介します。
“【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページを使って見た。” の続きを読む
みなさん、スタイルガイドは使ってますか。
私は今年になって使い始めました。
これまではstyledoccoを使っていましたが、長年メンテナンスされてない不安と、使ってるうちに自分のCSS設計と合わない部分がでてきたので乗り換える事にしました。
乗り換えたスタイルガイドジェネレーターは「frontNote」です。
“gulpで作るスタイルガイドをFrontNoteにした” の続きを読む
各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。
そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。
“WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法” の続きを読む
Web制作を長いことやっていても、中々勉強する機会のないmetaタグやlinkタグでよく使うものを整理しました。
これまで必要な度にコピペしていた人、これからWebを勉強する人の参考になれば幸いです。
WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。
作って見た規約はこちら。
WEB制作ガイドライン
“コーディング規約(HTML・CSS)を作ってみた(公開済)” の続きを読む