＊CSSの擬似要素についての記事です＊

プログラムではないCSSでは本来、要素を作り出すという命令は出せません。

しかし擬似要素という仕組みを使うことで、CSSでも擬似的な要素を生成し、HTMLファイルを編集することなくテキストを付け足したり、画像を挿入したりすることができます。

やや扱いが難しい擬似要素ですが、基礎からしっかり解説していきます。

＊Photoshopで画像を切り抜くテクニックです＊

画像の切り抜きはPhotoshopの画像編集の中でも最も多用する加工編集だと思います。

自動的に切り抜き範囲を選択してくれる機能もありますが、それだけでは正確な切り抜きができないこともしばしば。

この記事では、画像を切り抜く方法だけでなく、なるべく正確に切り抜くテクニックもあわせてご紹介します。

＊HTML：リストの挿入についてです

グローバルメニューや、ブログの目次など、Webサイト制作では「情報をリストで表したい」という場合があります。

そこで今回は、HTMLでリストを挿入するタグと方法について解説していきます。

リストの挿入は決して難しいものではありませんが、入れ子（ネスト）にする場合などは少し注意が必要です。

＊CSSでマウスオーバーアクションを実装する方法です＊

クリックできるボタンにマウスポインタが乗っかった時、ボタンが光ったり、色が変わったりするのを見たことがある人も多いと思います。

これは、ただ単におしゃれとかカッコイイとかだけではなく、クリックできることが分かりやすいようにという、UIとしての役割も果たしています。

UI設計にも欠かせない、マウスオーバーアクションをマスターしていきましょう！

＊Illustratorで矢印を作る方法です＊

矢印は、手順を説明する時や場所を示す時など、様々な場面で活躍の機会がある記号（オブジェクト）です。

Illustratorを触り始めたばかりという方でも、簡単に矢印を作れるテクニックをご紹介します！

＊HTMLの見出しの挿入についてです

SEO対策としても重要と言われる見出しタグ（h1〜h6）ですが、重要なタグである分様々な情報が飛び交っていて、結局どう使えば良いのか悩んでしまいやすいタグでもあります。

そこで今回は、初心者が悩まなくて済む、基本的な見出しタグの使い方について紹介していきます。

＊CSSで画像を白黒にする＋さらに加工する方法です＊

風景や人物の画像を白黒にすることで、ノスタルジーな雰囲気を醸し出すデザインテクニックは、雑誌やポスターでもよく見かけます。

こういったテクニックはもちろんWebサイトでも有効ですが、問題は画像を白黒にする方法ですよね。

実は画像編集ソフトに頼らずとも、なんとCSSだけでも簡単にできます。

その他、画像加工のテクニックなどもお伝えします。

＊Photoshopでデュオトーン画像を作る方法です＊

デュオトーンとは、Duo（ペアの）＋Tone（トーン）という意味で、写真などを２色で表現・デザインするテクニックです。

色の組み合わせによって印象はガラッと変わりますが、雑誌の表紙をイメージさせるような、オシャレな感じや洗練された印象を与えることができます。

＊HTMLの表の挿入についてです

会社概要や店舗の営業日・時間など、Webページに掲載する内容を表でまとめたい場合も多々あります。

そんな時に活躍してくれるのが、HTMLのtableタグとそれに関連するタグです。

今回は、HTMLに表を挿入することができる、table・tr・th・tdタグについて紹介していきます。

＊CSSでストライプ柄を作る方法です＊

PhotoshopやIllustratorで画像を作成する時にもよく使われる「ストライプ」（しましま模様）ですが、CSSでもストライプ柄を作ることが可能です。

背景がベタ塗りばかりだと、色やデザインによっては重たいイメージや単調なイメージになりがちですが、ストライプを取り入れることでデザインにアクセントや変化を加えることができます。