自ブログのデザインは「こんな風にしたい」を叶えるCSS学習法&ツール紹介

このエントリーをはてなブックマークに追加

Author

トッド(Todd)

What Content?

発想の具現化

HTMLやCSSについて、僕は完全素人でした。
ブログを始めてから自分の思い描くコンテンツビジュアルについて興味を持ち
CSS&HTMLを使ったカスタマイズを始めるようになりました。
ここでは、僕がこれまでに活用してきた学習法やツール。カスタムスキル向上法について紹介したいと思います。


注意
私はプロフェッショナルではありません。あくまで、個人のWEBサイトデザインの考案の参考になる程度の知識力しかありませんので・・・

ドキドキ

CSSをどのように学習し始めたか?

自分でWEBサイトを運用するようになってから、僕は初めてHTMLとCSSというものに出会いました。

色々な初期設定を終え、これでやっとコンテンツを書き始めることが出来ると落ち着き始めた頃、勉強がてらに他のブログサイトへネットサーフィンをしている時に「この見出しカッコ良いな」と思う瞬間がありました。

自分のブログでもこんな見出しを設定できたら良いなと、思い始めた瞬間にカスタマイズに目覚めました。

という感じで、HTMLとCSSを学び始めた入口は「見出し」のカスタマイズからです。

見出しのデザインはサンプルコードと共に「ブログ 見出し コピペ」というように検索をかければ、ユニークな見出しを集めたWEBページを観覧することが出来るでしょう。

どのようなCSS&HTMLで構成されているのかが、目で見て分かります。

学び始めた頃は、そうやって簡単に理解できる部分「例えば、font-size:;(文字の大きさ)とかcolor:;(色のことだな)」を英単語レベルで覚え始めました。

書籍を利用することも知識の定着に必要なものだと思うけれど正直、真似したくなるようなデザインの例が、初心者向けのモノには載っていないので少しづつ覚え、吸収した知識をいったん整理するぐらいの気持ちで手に取る方が、僕は学びに楽しみがあっていいんじゃないかな?と思います。

とまぁ、こんな感じのザックリした箇条書きはこの辺にしましてココから学習を助ける方法やツールについて紹介していきますね。

ワクワク

好みのデザインビジュアルがどのように構成されているか?を吸収する

僕の経験上このやり方が1番楽しいと思います。どんな書籍よりも刺激ある学習で楽しみながら学べるんじゃないでしょうか。

まずは、ネット上にある「見出しサンプル」デザインのビジュアルとソースコードを照らし合わせながら(こうすればこうなる)というように、オウム返しでCSS&HTMLに触れながら部分的に学んでいき、

マネが出来る段階に差し掛かった所でいったん書籍等で整理したあとに「デベロッパーツール」と「CSSフレームワーク」を見たり使ったりしてみて下さい。

ブラウザのデペロッパーツール

僕はなんですけど、普段使いのブラウザがGoogle Chromeなのでココではそれでのやり方を紹介します。

デベロッパーツールの使い方は、どんなページでも良いので、好きなWEB上の画面、好みのブログパーツがあるページを開いていただいて、画面右上にはウィンドウを閉じる【×印】があると思います。

その少し下に「縦に点が3つ並んでいるボタン」あるので、そこをクリックしてもらうと下から数えて5番目の列に「その他のツール」と書かれたところがあります。

そこをクリックしてもらうと次に出ました画面に「デベロッパーツール」があるのでそこをクリックすると開きます。

すると、さっきまで観ていたページがこのように表示されると思います。↓

デペロッパーツールの使い方を簡単にまとめたモノがコチラ↓

詳細モード(呼び方が分からない)を押してから気になる部分をクリックすることでその部分がどのようなHTML&CSSで構成されているかが分かるようになっています。

この方法で気になるデザインがどんな風に構成されているのか?テクニックを学ぶ事が出来ます。

CSSフレームワーク

これを簡単に言うと、HTMLとCSSをテンプレート化して一塊にすることでWEBサイト設計の骨組みとして使用することで設計に効率化を図るとかの用途として使用されることがあったり・・・。土台みたいなもの。

有名なところでBootstrapがありますね。他にもUIkitBulmaMaterialize何かを参考にすることが僕は多いです。

特にデザイン的に個人的に参考にするのはBulmaが良いですよ。

CSSフレームワークを学習でオススメする理由は使ってみるのも良いですが、WEBパーツの語句を知るためにあります。例えば、(パンくず)(アコーディオン)(ページネーション)とか自分が作りたかったパーツ名称が分かれば検索の仕方も変わってくるし学習スピードにも変化があると思います。

1UP

デザインビジュアルから自分で再現し、作ってみる

最近は、ページ設計からカスタマイズページを作ることにハマっています。今書いているコンテンツの構成もデザインから考案しHTMLとCSSで再現しました。

仮デザインビジュアルはこんな感じで↓

だいぶ近い印象に持ってくることが出来た時はうれしいものです。

さいごに学習を支えるツール紹介です・

Behance

世界中のクリエイターが自身の作品を発信し、ポートフォリオとして活用することも出来るクリエイティブが集うSNSです。

SNSですからかなりの頻度で更新されるのでデザインビジュアルの参考に役立てたり、アイデアの発想を得る為に使用することが多いです。

「WEB Design」と検索をかければ良いものが必ずあるでしょう。

気に入ったものがあれば自分なりに再現してみるのもトレーニングになります。

InVision Studio

これは無料で使用することが出来ます。AdobeXDみたいな感じ。WEBデザインをビジュアルから構成するのに活用しています。

さっき載せた、【仮デザインビジュアル】はこのソフトで作成したものになります。

liveweave

これは、WEB上で書けるテキストエディターです。ライブビューが機能しているので打ち込んだHTML&CSSが即時反映されるので見出しのカスタマイズや学習ツールとしても良いです。あと、シンタックスハイライト機能(打ち込んだ属性ごとに色が変化するので見やすくプログラミングやってるなぁ~)みたいな気になれます。


CSS&HTMLの学習に購入した書籍たち

一番右端のHTML5&CSS3/2.1全事典が特にオススメ言うなれば赤本のようなもの。



最後まで読んでくれてありがとう。おわり。

このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。