cssは難しい？簡単に文章を装飾する方法、CMANの紹介。

cssを使用して装飾をしようとした場合、

こんな悩みはありませんか？

こんな悩みを解決してくれるサイトがあります。

「CMAN」というサイトです。

こちらのサイトを使うことで、難しいcssも簡単に使うことができます。

今回は、方法についてまとめていきます。

難しいcssを簡単に使えるCMAN

できることは以下の通り。

cssが難しくて分からなくても、これだけのことができてしまいます。

これを見た感じだとイメージが湧きづらいので、いくつか説明していきます。

css文字のデザインと動き

css文字のデザインと動きでは⬆️のようなことができます。

今回は目立つので「ブリンク」を選択しました。

「ブリンク」を選択すると⬇️の画面が表示されます。

• ブリンク速度
• ブリンク間隔

をバーで調整し、

• 開始文字色
• 終了文字色

を選択することにより

「実際の表示」のところにどのように表示されるかが表示されます。

気に入る表示になったら

「カスタムHTML」

もしくは

「HTMLとして編集」

で下記2つをまとめて入力します。

こういう感じ⬇️ですね。

これを実際に表示させると

こうなります。

難しいcssもこれだと簡単ですね。

css画像のデザインと動き

同様に画像のデザインと動きもやってみましょう。

「３Ｄ画像回転」のCSS生成を選択しました。

同様に「カスタムHTML」に

• 使用したhtml
• 生成したcss

入力していきます。

⬆️のように表示されます。

使用したhtmlの数字が書かれているところを文字に直すことで、

⬆️こんな感じにできます

1文字以上入力すると崩れました。

写真を挿入したい場合は

下のほうにスクロールしていくと説明が載っているので参考にしてください。

<div class="css-face css-forward"><img src="fine.png" width="100" height="100"></div>

このように

<img src="" width="" height="">

といったコードを追加していけば背景を画像にすることができます。

※画像は正方形のものを用意しましょう。

cssボタンのデザインと動き

ボタンのデザインと動きでは

「aタグをcssでボタンへ」を選択しました。

同様に「カスタムHTML」に

• 使用したhtml
• 生成したcss

入力していきます。

⬇️のようなボタンが出来上がります。

ボタンを中央に寄せたい場合は⬇️このように<div style></div>のコードで挟んであげればOKです

<div><a href=""class="button"></a></div>

難しいcssを簡単に使えるCMAN：まとめ

難しいcssを簡単に使えるCMANについてでした。

実際に1から自分で覚えるのもありですが、なかなかに時間がかかってしまいます。

こういったツールを使用することで、

実際にcssを

といった面で勉強になります。

失敗しても再度コピペすれば復活するので、勉強にももってこいだと思っています。