WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： shima
カテゴリー： マークアップ >CSS

様々なWebサイトのコーディングを行っている際、似たようなパーツは結構ありますよね。
それを1つ1つ考えながら入力していくのは大変な作業だと感じませんか。

そんな時に、より効率的にコーディングできるWebサービスを選んでみました。

三角形を自動生成「CSS Triangle Generator」

CSS Triangle Generator
https://triangle.designyourcode.io/

右向きだったり下向きだったりあらゆる箇所で使用される三角形は、頭の中で考えて作成するより実際の三角形を見ながら作成した方が時短になります。三角形の向きを選び、あとは幅と高さを指定するだけで作ることができ、色も変えられます。プレビューの背景色も設定できるので、実際のサイトに配置する前に配色も確認できます。

私はハンバーガーメニューに使用される三角形を疑似要素で作成する時に使用するので、生成される「display: inline-block;」は削除することが多いかもしれません。
実際に生成したものは以下になります。

See the Pen
WNxbprb by Erina Shima (@Erinatto)
on CodePen.

ストライプを自動生成「CSS STRIPE GENERATOR」

CSS STRIPE GENERATOR
https://css-stripe-generator.firebaseapp.com/

Webサイトの背景がストライプの場合に使用するのが「CSS STRIPE GENERATOR」です。角度や線の幅、間隔などを指定することができます。
あまり使用する頻度は高くないかもしれませんが、突然必要になることもあるので覚えておいても良いでしょう。

CSSだけでなくSassでも生成してくれるのでとても便利です。

See the Pen
KKMwWXg by Erina Shima (@Erinatto)
on CodePen.

Flexboxを生成「FLEX LAYOUT GENERATOR」

FLEX LAYOUT GENERATOR
https://suiq.jp/flex-layout-generator/

横並びのボックスをfloatしていたけど、もっと自由に並べたい、Flexboxを覚えたい！という人向けです。
Flexboxのプロパティの組み合わせを確認したいときにとても便利です。
親要素、子要素でタブが分かれていて、ボタンもそれぞれどのようなレイアウトになるか、わかりやすくなっています。
なかなか覚えづらいFlexboxですが、このサイトで勉強すれば覚えることができそうです。
ちなみに、ベンダープレフィックスも追加できます。

まとめ

コーディング初心者の方も、同じようなタグを複製することが大変に感じている方にもおすすめです。
便利なジェネレータを使用して、速度をあげて快適にコーディングできるようにしてみませんか。