• このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

CSSでギザギザとなみなみの下線を実装したい!

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存

こんにちは、渡辺です。
そういえば、今年もかき氷食べました!(毎年かき氷をブログに載せていた気がしたので)
img_5493
友達が朝の10時からお店に並んで整理券をとってくれたんですけど(ありがたい)
さすが整理券のためにオープンから並ぶかき氷だな~~って思いました。
すごくおいしかったので1時間電車に揺られて奈良県に出向いてよかったです。

さて、かき氷とは関係ないですが、WEBサイトを作っているときに、どうしても実装が難しそう(面倒くさそう)なデザインはやめて無難なものを選びがちになってしまいます。

画像を作れば簡単なものもたくさんあるんですけど、パターンが必要なものは、切り出すのもへたくそなのでどうにかしてCSSで実装したい! 😈 
でもどんなことができるのか忘れてしまう!!という私のために、今回はギザギザ(山が連なってるやつ)となみなみの下線をCSSでできそうなので備忘録として残しておきます。

ギザギザを作る(山が連なってるやつ)

ギザギザで下線を作ってみる!

どうでしょう?新選組のやつみたいですね~!色を可愛い感じにするとポップになるきがします!もう少し幅を大きくしてもかわいいかもしれないですね! 😎 

cssはこんな感じになります。結構簡単にできました!

.giza{
    font-size: 20px;
    padding-bottom: 5px;
    background: linear-gradient(-135deg, #ffffff 4px, transparent 0) 0 4px, linear-gradient(135deg, #ffffff 4px, #ff0000 0) 0 4px;
    background-color: #ffffff;
    background-position: left bottom !important;
    background-repeat: repeat-x !important;
    background-size: 8px 8px;
}

なみなみをつくる

なみなみで下線をオシャレにしたい!

どうでしょう?これはtext-decorationで実装してるだけなので、文字と違う色にはできないのが残念ですよね。
spanとかでくくって大事なところにマーカーとして使うくらいがいいのかもしれないです。
あと、とっても大切なんですが、FireFoxChromeでしか実装確認できませんでした。
なのであまり実用的ではないですね~。

cssはこんな感じです!実装自体は簡単でした!

.nami{text-decoration: underline wavy;}

さいごに

いかがでしたでしょうか、未来の自分に向けたので端折ってしまった部分も多いかもしれないですが、コピペしたら使えると思います!

いやいや、もっとちゃんと教えてくれよ!という方には、プロクラスではCSS初心者の方に向けた授業をおこなっていますので!
CSSのことをちゃんと知りたい!という方はぜひ受講してみてください~~!!CSSは楽しいよ! 😀 
はじめてのWebサイト制作入門(CSS編)

  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
各地で開催中!

【簡単ホームページ制作!はじめてのWordPress講座】
好評につき、大阪会場もスタート!

WordPress東京
【簡単ホームページ制作!はじめてのWordPress】講座詳細はこちら