サイトロゴ

Enjoy Creating
Web & Mobile Apps

MENU BOX
WEB
MOBILE
OPEN

ホーム

 > 

WEB

疑似要素の基礎 – CSS ::before ::after

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

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

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

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

リストの挿入(olタグ・ulタグ)

*HTML:リストの挿入についてです

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

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

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

マウスオーバーアクションをつける – CSS :hover

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

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

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

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

見出しの挿入(h1タグ〜h6タグ)

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

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

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

CSSで画像を白黒にする -filter:grayscale( )

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

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

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

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

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

表の挿入(table・tr・th・tdタグ)

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

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

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

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

CSSでストライプを作る(repeating-linear-gradient)

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

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

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

Webページ構造の基本(header・footer・mainタグ)

*Webページの基本構造についてです

Webページは様々なブロック・パーツから成り立ちますが、基本的な構造はだいたい決まっています。

今回はheader・footer・mainタグを紹介しながら、Webページの基本的な構造について説明していきます。

輪郭線をカスタマイズする(CSS:outline)

*outlineの紹介です*

お問い合わせフォームをクリックすると、通常であれば枠線が表示されます。

これはborder(境界線)ではなく、outline(輪郭線)です。よく似ているCSSプロパティですが、全く異なるCSSプロパティなので、特にフォームの枠線をカスタマイズしたい場合には注意が必要です。

CSSでよく使われる単位(CSS-unit)

*CSSでよく使われる単位についてです*

CSSでは様々な単位が使用されます。

日常生活でもよく使用される馴染み深いものもあれば、ほとんどWebの世界でしか使われない単位もあり、様々です。

CSS調整の具体例も交えながら、イメージができやすいように解説しています。