SHU BLOG

BLOG NEWS ブログ

TITLE

【WEB】コーディングに役立つツールついて解説

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!

サーバーとドメインの同時取得で.jpが無料

シュウ
シュウ
今回は【WEB】コーディングに役立つツールついて
の解説になります!

こんな方に読んでほしい

  • WEBデザインを学び始めた方へ
  • 今回はWEBデザインに関する(コーディング)役立つツールについて解説しております。

WEBデザインに役立つツールについて

WEBデザインに役立つツールについて

今回は、WEBデザインに役立つツール(コーディング編)について解説していきます。

私自身も、WEBデザイン1年目の時に多くの悩み、知識不足がありました。
そんな時に役立ったツールをご紹介していきます。

役立つツールの内容
  • 複雑なテーブル(table)を簡単に生成してくれる、Table Tag Generatorについて
  • 三角形を簡単に作成してくれる、CSS三角形作成ツールについて
  • グラデーションを生成してくれる、Blendについて
  • 徐々に不透明度のグラデーションを生成してくれる、CSS Gradientについて
  • ボタンやボックスに影をつけてくれる、box-shadowジェネレーターについて
  • 100種類近くのカード型のサンプルが見れる、Beautiful CSS box-shadow examplesについて
  • ゲーム感覚で学べる、FLEXBOX FROGGYについて

Table Tag Generatorについて

Table Tag Generatorについて

Table Tag Generatorについて
複雑なテーブルも「行×列」を選択し、結合や分割がクリックひとつで簡単にできます。
詳しい使い方は以下の記事にまとめております。

Table Tag Generatorについて

Table Tag Generatorの使い方を更に詳しく解説してます。

CSS三角形作成ツールについて

CSS三角形作成ツールについて

CSS三角形作成ツールについて
矢印は、デザインをする際に使うことが多くあります。
この「CSS三角形作成ツール」では、方向、タイプ、サイズ、色と全てをひとつのサイトで完結してくれます。

Blendグラデーションツールについて

Blendグラデーションツールについて

Blendについて
グラデーションのコードは長く、覚えるのが大変です。
私も記述方法を忘れることがあります、そのようなときはツールを使用するようにしてます。
Blendでは、線形、円形を選択し、自由に角度の調整もできコードも自動で生成してくれます。

【CSS】gradientグラデーションについて

CSSで記述した場合の指定方法をまとめております。

CSS Gradientツールについて

CSS Gradientツールについて

CSS Gradientについて
上記のBlendとは違い徐々に不透明度になっていくグラデーションを生成してくれます。
コードも自動生成なのでコピーして貼り付けるだけで完了します。

box-shadowジェネレーターツールについて

box-shadowジェネレーターツールについて

box-shadowジェネレーターについて
CSSで影(box-shadow)を指定する際に中々イメージができないとおもいます。
box-shadowジェネレーターでは、影のサイズ、位置、色の指定もできます。
また、「ボタン型」、「カード型」の2から選択できます。

【CSS】 box-shadowの使い方ついて

box-shadowの指定方法、エフェクトについてまとめています。

Beautiful CSS box-shadow examplesについて

Beautiful CSS box-shadow examplesについて

Beautiful CSS box-shadow examplesについて
CSSで影(box-shadow)を指定する際に中々イメージができないとおもいます。
Beautiful CSS box-shadow examplesでは、100種類近くのカード型のイメージがあります。
コードをコピーしてカスタマイズもしやすいです。

FLEXBOX FROGGYについて

FLEXBOX FROGGYについて

FLEXBOX FROGGYについて
今回はツールではないですが「Flexbox」を学ぶ最適なサイトになっております。
FLEXBOX FROGGYでは、折り返しや順番、配置する位置など学べます。
「Flexbox」は、ブログでもまとめております。

【CSS】 Flexboxの使い方について

Flexboxの指定方法、折り返しや配置する位置ついてまとめています。

まとめ

今回はこれで以上です。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

最新記事

関連記事

オススメ記事

月別アーカイブ

page_top