超実践的!知っておきたいWebデザインテクニック【保存版】
Webデザイン・DTPデザイン
-
- 公開日
-
- 最終更新日
エンプロススタッフ
本記事のテーマ
Webデザインの初心者から中級者まで実務で役に立つWeb制作に関わる情報を掲載していきます。
- コーディング編
- デザイン編
- 写真撮影・素材編
コーディング編
HTMLエディター
代表的なエディター
- DreamWeaver
- Atom
- Sublime Text
- Brackets
ホームページ制作を始めたい。コーディングを覚えたい。
コーディングをするのに代表的なソフトといえばAdobeのDreamWeaver。このソフトは多くの方に使われている一方で、とにかく高い。気軽にコーディング始めるにはなかなか初期投資が必要で、困ったという方も多いはず。
実はこのAdobe、DreamWeaverまでのいかないにしても、かなり優秀なBracketsというソフトを出しています。今回は初心者の方がコーディングをするのに気軽に始めれるBracketsというソフトを紹介します。
HTMLテクニック
Emmet
コーディングの速度がとにかく速くなりたい。そんなあなたにおすすめなのがEmmet!
実際の制作会社では、Emmetなしで仕事は考えられません。
htmlやCSSを十分に理解ができて余裕ができたら、Emmetを覚えていると有利になります。
FontAwesome
アイコンをJPEGやPNG、SVGで作るのは結構手間がかかります。
その手間を楽にしたのがFontAwesome!よく使われるアイコンが網羅されています。
エンプロスの職業訓練ではFontAwesomeも授業で解説いたします。(2020年12月11日現在)
CSSテクニック
flexbox
CSSのfloatプロパティでデザインのレイアウトをしていたのは、もう過去のこと。今は便利なflexboxというプロパティがあります。
レイアウトするには必須のスキルで、覚えるのにはちょっとコツがあります。
エンプロスの職業訓練ではflexboxも徹底的に授業でこなします。
jQuery・JavaScriptテクニック
jQueryやJavaScriptは覚えているにこしたことはございませんが、職業訓練で覚えるべきステップとしては、優先順位が低いです。職業訓練レベルでは、jQueryやJavaScriptをガリガリ記述できなくても問題ないです。実際、jQueryやJavaScriptを1から記述することは時間がかかるため、予算があまり取れない案件ではjQuery・JavaScriptのプラグインを使用する場合が多いです。まずはしっかりとHTMLやCSSを問題なくこなせるようになってください。
ただし、以下の簡単なjQuery・JavaScriptのプラグインは覚えていると役に立ちます。
- スライダー
- ライトボックス
- スムーススクロール
- ハンバーガーメニュー
- アコーディオン