CSSメモ

機能の中身を紹介/使えるタグ ページ24

##

機能の中身を紹介
大まかに、機能の種類と書き方について紹介していきます。
一応ですがサンプルらしきものも置いておきますので。

小タイトル系
説明をすると、左と下の線(border)を別々に設定しています。

詳しくは後ほどまとめて説明していきますが、
文字を大きくしたりするとそれらしい雰囲気が出ます。
デザイン集の方には、線やその他設定をいじったものを何種類か置いています。


マーカー系
これは、背景に色を設定することで、マーカーらしく見せています。

これも後で詳しく説明していきますが、
色や透明度、丸みを変えることでアレンジできます。
デザイン集の方には、グラデーションのマーカーみたいなものを置いていますので是非見てみてください。自信作だったりします。


箱系
ネーミングセンス…。
簡単に言うと、四角で囲んで強調したり、別の部分と分けたりする機能です。
box-shadowを応用することでステッチ風にも出来たりします。


背景画像系

これも、背景に画像を設定することで実装しています。
丸みをつけたり、枠線をつけてみたりと、これも幅広い使い方ができそうです。


機能のデザイン集▷機能紹介のページ。
タグとかの都合で別サイトになります。

そのままコピペして使えます。
使用報告もお願いします。

また、あちらにも書いてありますが、
自作発言や、それに準じる行為、そのままの再配布は禁止です。

この二つは守ってくださいね。

使えるタグ
em7調べの使えるタグ一覧です。

＜i＞iタグ＜/i＞…文字をイタリック(斜めの字)にします。
＜em＞emタグ＜/em＞…強調のタグです。斜めの字になる場合があります。
斜めになった文字をもとに戻すには、
font-style:normal;
を加えます。

＜u＞uタグ＜/u＞…下線を引きます。
＜strike＞strikeタグ＜/strike＞…取り消し線を引きます。
＜s＞sタグ＜/s＞…strikeタグの省略版？取り消し線を引きます。
線を消したい場合は、
text-decoration:none;
を加えます。
ちなみに、sタグとstrikeタグは別物扱いです。

＜b＞bタグ＜/b＞…文字を太くします。
＜strong＞strongタグ＜/strong＞…強い強調のタグです。文字が太くなります。
これを使う時、文字の太さを戻すときは
font-weight:normal;
を加えます。


##

次のお話に進むボタン→←機能の仕組み/セレクタの書き方

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す