Webページの「見やすさ」を決定づけるCSS３の技術は、基本的な文法や記述を習得してからが本当の勝負ではないでしょうか。中級者へステップアップするには、先人の技を学びつつ、個々の技の使いどころを考え、全体をまとめていく方法を考える、といったところが重要と考えます。ここでは、パーツ系の装飾や技術的なこと、CSS全体のまとめ方などが掲載されているサイトをご紹介します。
| もくじ |
小技・テクニック系のサイト
CSS系のサイトは数がとても多いです。中でも、見出しやボタンの装飾コード、ジェネレータ関係は大変多いです。ここでは、装飾的な小技やテクニックはもちろんのこと、技術的なTipsを中心としたサイトもご紹介します。
１．もう、class名やid名で悩まないんだからっ！！
https://css-happylife.com/archives/2007/0115_1345.php
実際にCSSを作り出すと、class名やid名をどうしよう…という悩みはあると思います。ここは、よく使われるclassおよびid名をまとめたページです。可読性向上・コーティング時間短縮に役立つこと間違いなしです。
２．CSSサンプルプログ
https://css-el.seesaa.net/
技術的な小技や解説がたくさんあります。思った通り表示されない等でお悩みの際はこちらをチェックです。解決策が見つかるかも知れません。「あ、こうすればいいのか」と感じていただけると思います。
３．●●っぽい表現ができる「CSS３」サンプル集
https://www.find-job.net/startup/css3-sample
「高級フレンチっぽい」「映画のタイトルっぽい」等々、画像データを使わずに凝った表現の見出しのサンプルが載っています。文字の装飾のお手本になります。もちろんコードも掲載されています。
４．WEB道-WEB技術の辞書・解説・使用例
https://web-dou.com/
HTML･CSS Tipsのコンテンツは、小技やサンプル、ジェネレータ等満載で勉強になります。同コンテンツにリファレンスも載っていますので、一つ一つ確認しながら学ぶのもいいかと思います。
５．CSSジェネレーターツール50種類超【無料】
https://matome.naver.jp/odai/2137887038837578301
見出し、ボタン、グラデーション等々、「小技」のリンク集で、リンク先はほとんどが英語サイトですが、いろいろ載っており便利です。CSS/CSS3のカテゴリではジェネレータのみならず、他のお役立つテクニック等満載です。毎回NEVERのトップから検索するのも面倒ですので、ぜひブックマークしておきましょう。
全体のまとめ方がよくわかるサイト
局所局所の小技をうまく利用し全体をどうまとめられるかが、初級者と中級者の差だと考えます。ここでは、コードや配色など、CSS全体のまとめ方についての解説が詳しいサイトをご紹介します。
６．CSSデザインサンプル
https://www.css-designsample.com/
全体レイアウトや効率的な記述方法などを中心に解説されているサイトです。CSSファイル全体をどうまとめるか、崩れないWebページをどう作るかといったところがよくわかりますので、中級者を目指す方にはピッタリではないでしょうか。
７.Web制作支援サイト イーウェブ
https://www.eweb-design.com/
テクニック系のコンテンツ満載ですが、「色」にこだわりのあるサイトです。Webページにおいては形的なデザインはもちろん、配色のセンスも問われます。「ウェブ配色の見本」は、ぜひご覧になってください。きっとお役に立ちます。
８．７日間でできるCSSベースのホームページの作り方
https://www.coolwebwindow.com/hp-navi/
初心者向けのサイトですが、「ホームページ制作に役立つコラム」は中級者を目指す方々でも得るものはたくさんあります。初級の復習も兼ねて、いかがでしょうか。
無料サンプルページのサイト
全体的なCSSのまとめ方を習得する上で、洗練された出来のWebページを見て内容を理解することは、とても有効だと思います。ここでは、無料サンプルが掲載されているサイトをご紹介します。なお、使用にあたっては、規約等よくご理解されたうえでお願いいたします。
９.プロが作る無料のホームページテンプレート | デザインなう！
https://www.designnow.net/
無料のWebページテンプレートが25種類あります。ビジネス向け、色などでカテゴリ分けされていてやすいです。
１０．Nikukyu-Punch
https://nikukyu-punch.com/
目的やイメージ(シンプル、かわいい等）で分類されたサンプルページが多数あります。無料です。
まとめ
いかがでしたでしょうか。CSS関連のサイトは非常に多く、もはやパーツ類は自作せずともすべて揃ってしまう勢いです。そこは恩恵にあずかり（もちろんコードの内容を理解するのも大事ですが）、Webページを作り上げる流れや定石の習得に注力するのが、上達への近道ではないでしょうか。ご紹介したサイトが、皆様のステップアップにつながれば幸いです。
販売店比較早見表
|
店舗名 |
詳細 |
|
『おとくケータイ 乗り換えキャッシュバック最高額を保証してくれます |
|
|
|
|
ソフトバンクショップ, auショップ, ドコモショップ |
|
』
