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

デザイン変更

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

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

  • cssが難しくて触れない
  • cssいじると表示が壊れそうで触るのが怖い
  • css難しそうだけどお洒落な記事を書きたい

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

CMAN」というサイトです。

ホームページのパーツ作成【無料】

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

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

スポンサーリンク

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

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

  • 文字のデザインと動き
  • 画像のデザインと動き
  • ボタンのデザインと動き
  • 入力項目のデザインと動き
  • 表・テーブルのデザインと動き
  • BOX・ブロックのデザイン・背景と動き
  • 吹き出しなどのデザインと動き
  • HTMLページ全体のデザインと動き
  • 各種図形のCSSデザインとSVG画像

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

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

css文字のデザインと動き

ブリンクは簡単

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

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

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

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

をバーで調整し、

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

を選択することにより

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

気に入る表示になったら

「カスタムHTML」

もしくは

「HTMLとして編集」

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

CMANで生成された

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

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

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

ブリンクは簡単

こうなります。

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

css画像のデザインと動き

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

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

同様に「カスタムHTML」に

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

入力していきます。

1
6
3
4
5
2

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

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

C
S
S

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

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を

  • どのように使用するのか
  • どこをいじるとどう変化するのか

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

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

CMANを利用してレベルアップしていきましょう。
ホームページのパーツ作成【無料】

コメント