ホームページ制作者が知っておきたいティップス集【HTML&CSSとWebデザイン実践講座編】
僕はホームページ制作を1つの事業として行なっています。
しかし、実は制作会社で働いたことはなく、全て独学で勉強してきました。
独学でやっていると、「業界の一般常識」が抜けていたりします。
知っているのが当たり前のテクニックだったり、情報を知らなかったりするわけですね。
この対策には、とにかく「本を読む」しかありません。
自分のジャンルの本を読む。特に売れている本は必ず読む。
こうすることで、独学であっても業界の一般常識が身につくと思っています。
今回は今一度HTML、CSSの基礎を固めるべく、ベストセラー「HTML＆CSSとWebデザインの実践講座」を読みました。
ちなみに、こちらの基礎編の「入門講座」は3年前に読んでいます。
HTML、CSSの教本の中では、圧倒的に売れている本ですので、一般常識を取りこぼさないという意味でも、読んでいない人は一読することをオススメします。
この記事では、本書を読んで「これは知らなかった」「この情報はメモしておきたい」という内容をまとめました。
特に独学でホームページ制作を行っている人は、共感部分も多いはずですので、ぜひ参考にしてください。
HTML、CSSのティップス
知っているか、知らないかで、できることの幅が大きく変わるHTML、CSSの知識。
その中でも、これは知らなかった！という少しマイナーなポイントをまとめました。
表示領域にピタッと移動させる
サイトをスクロールしていると、セクションごとにピタッと止まるWebサイトがあります。
てっきりJavaScriptで実装しているのかと思いきや、CSSだけで簡単に実装ができます。その名も「CSSスクロールスナップ」です。
scroll-snap-type: y;こちらのコードを追加するだけ。
簡単なのに、手間がかかっているように見えるので覚えておきましょう。
テキストを円形に回り込ませる
丸い画像の横にテキストを配置した際に、下記のCSSでテキストを回り込ませて表示させることができます。
shape-outside: circle();あまり使う機会は多くないと思いますが、覚えておくと何かの役に立つかも。
ふりがな（ルビ）を振る
ふりがな（ルビ）を振るためには、<ruby>タグを使います。
やや構造に癖がありますね。
<p><ruby>Apple<rt>アップル</rt></ruby></p>小説や物語風のWebサイトに使えるかもしれません。
ダークモード
最近では使う人も増えたWEBサイトの「ダークモード」。
実装が難しいと思っていましたが、CSSだけでも実装可能です。
@media (prefers-color-scheme: dark){}こちらのコードを使って実装します。
カスタムプロパティで文字色を管理すると、より簡単にダークモードが実装できます。近いうちに案件でも提案してみようと思います。
Emmet
エディターで簡単にHTMLやCSSを書くことができる機能が「Emmet」です。よく使うコードだけでも覚えておけば作業効率は非常に上がることでしょう。
また、厳格なルールが決まっているので、CSSの命名にも使いやすいと思います。
詳しい記述方法はEmmetの公式サイトに載っているので、少しずつ覚えていこうと思います。
Sassに使える拡張機能
Sassを使う時に便利になりそうなVSコードの拡張機能が「DartJS Sass Compiler and Sass Watcher」です。Sassファイルを自動でCSSファイルに変換してくれます。
最近はCSSでできることも増えたため、Sassは全然使っていません。
ただ、クライアントによってはSassで作って欲しいという要望もあったので、メモしておきました。
覚えておきたいライブラリ
ライブラリも知っているだけで、ホームページのクオリティーに大きな差をつけることができます。
シンプルなホームページに追加するだけでも、一気に単価アップが狙えますね。
グラフ用のライブラリ
コーポレートページを見ていると、分かりやすいグラフが埋めこまれていることがあります。デザインは綺麗で、動きもあったりして視覚効果も抜群。覚えておきたいグラフ用ライブラリは以下の3つです。
ライトボックスのライブラリ
小さな画像のサムネイルをクリックすると、拡大画像が表示される機能を誰しも見たことがあるでしょう。この機能のことをライトボックスと呼びます。そもそも、僕はライトボックスという言葉を知らなかったので、助かりました。
ライトボックスには「Luminous」というJavaScriptライブラリがおすすめです。
アニメーションライブラリ
アニメーションライブラリの定番の「AOS」。
これはよく使うことになるかと思います。
ブックマークしておきたいサイト
最後に、ホームページ制作で活用できるサイトやツールもまとめます。
CSSアニメーションの参考サイト
CSSアニメーションの参考コードがたくさん掲載されているサイトです。
アニメーションを素早く実装できます。
clip-pathの座標を簡単に取得できるサイト
斜め線を簡単に作ることができる「clip-path」。
複雑な形状を作るのが難しいですが、こちらのサイトを使うと直感的にコードを取得できます。
グラデーションカラーをまとめたサイト
ホームページを垢抜けさせる時に使うグラデーション。
下記のサイトを使えばサンプルも豊富ですし、コードの取得も簡単です。
フリーの動画素材サイト
最近は装飾目的でホームページに動画を埋め込むことが増えてきましたよね。そんな時に使いやすいフリーの動画素材サイトです。
CSSグリッドコードのシミュレーター
様々なレイアウトを実装できるグリッドですが、ゼロから組むと結構大変なことも。そんな時に使えるシミュレーターです。
box-shadowのシミュレーター
box-shadowもゼロから作ると結構大変なんですよね。そんな時に使いたいシミュレーターです。
センスの良いボタンデザインなども多数掲載されているので、ブックマーク推奨です。
まとめ
以上、今回は「HTML&CSSとWebデザイン実践講座」より、覚えておきたい情報をまとめました。
ノーコードが騒がれる昨今ですが、単価を上げるには技術レベルの向上は必須課題です。
引き続き、コツコツ勉強を続けたいと思います。