cssを使用して装飾をしようとした場合、
こんな悩みはありませんか？
- cssが難しくて触れない
- cssいじると表示が壊れそうで触るのが怖い
- css難しそうだけどお洒落な記事を書きたい
こんな悩みを解決してくれるサイトがあります。
「CMAN」というサイトです。
こちらのサイトを使うことで、難しいcssも簡単に使うことができます。
今回は、方法についてまとめていきます。
難しいcssを簡単に使えるCMAN
できることは以下の通り。
- 文字のデザインと動き
- 画像のデザインと動き
- ボタンのデザインと動き
- 入力項目のデザインと動き
- 表・テーブルのデザインと動き
- BOX・ブロックのデザイン・背景と動き
- 吹き出しなどのデザインと動き
- HTMLページ全体のデザインと動き
- 各種図形のCSSデザインとSVG画像
cssが難しくて分からなくても、これだけのことができてしまいます。
これを見た感じだとイメージが湧きづらいので、いくつか説明していきます。
css文字のデザインと動き
ブリンクは簡単css文字のデザインと動きでは⬆️のようなことができます。
今回は目立つので「ブリンク」を選択しました。
「ブリンク」を選択すると⬇️の画面が表示されます。
- ブリンク速度
- ブリンク間隔
をバーで調整し、
- 開始文字色
- 終了文字色
を選択することにより
「実際の表示」のところにどのように表示されるかが表示されます。
気に入る表示になったら
「カスタムHTML」
もしくは
「HTMLとして編集」
で下記2つをまとめて入力します。
CMANで生成された
- 使用したhtml
- 生成したcss
こういう感じ⬇️ですね。
これを実際に表示させると
ブリンクは簡単こうなります。
難しい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 style="text-align:center"><a href=""class="button"></a></div>
難しいcssを簡単に使えるCMAN：まとめ
難しいcssを簡単に使えるCMANについてでした。
実際に1から自分で覚えるのもありですが、なかなかに時間がかかってしまいます。
こういったツールを使用することで、
実際にcssを
- どのように使用するのか
- どこをいじるとどう変化するのか
といった面で勉強になります。
失敗しても再度コピペすれば復活するので、勉強にももってこいだと思っています。
CMANを利用してレベルアップしていきましょう。
コメント