目次
自己紹介
今月からシンス株式会社で社会人生活をスタートした福岡のちゃんけいです。
私は大学卒業後すぐにデジタルハリウッド福岡校(以下 デジハリ)のWebデザイナー専攻コースを受講し、コース終了した後にシンス株式会社に入りました。
私はデジハリのコースを終了したとはいえ特に優秀だったわけではなく、HTML・CSSで一通りWebサイトが制作できる程度で、Web制作会社での経験どころか社会人経験もありませんでした。
しかし、HTMLコーダーのアルバイトとしてシンス株式会社にやってきて2ヶ月でCMSを含んだWeb制作を任せてもらえるようになり、4月1日から正社員として働くことになりました。
Web業界は最初からある程度のスキルがないと会社に入ることができないとよく聞きますが、シンス株式会社は「やる気があるならうちで育てる！」という方針だったのでありがたい限りです。
今回から数回に渡って、私がこの2ヶ月で学んだことを書きたいと思います。
ツールの導入
最初に行ったのはホームページ制作に欠かせない、各種アプリやツールの導入です。
今まで使っていたツールを変えた理由は、「作業の効率化」です。 作業の効率化にこだわるという点は、この2ヶ月間でとても大切だと感じました。
テキストエディタ
Webスクールなどで使うテキストエディタはDreamweaverが多いと思いますが、シンス株式会社ではSublimeTextを使っています。
Sublime Textのメリット
- 動作が軽い
- プラグインが豊富でカスタマイズできる
- プラグインによりコーディングの効率化ができる
SublimeTextの導入を勉強した本はこちらです。
Web制作者のためのSublime Textの教科書 今すぐ最高のエディタを使いこなすプロのノウハウ
わからない部分は社内の方に教えてもらいましたが、基本的には自分で本を読んだりネットで記事を探して勉強しました。
私の使っているプラグインは、EmmetやHayakuなどです。
他にも便利なプラグインがたくさんあるので、検索で「sublimetext プラグイン」や「sublimetext 爆速」などで調べてみてください。
ショートカット
パソコンやソフトウェアには便利なショートカットがあります。作業の効率化する上で使わない選択肢はありません。
Sublume textにもたくさんのショートカットがあり、ショートカットを使うことで同じ作業をする間に1行でも多くコードを書くことができます。
私がよく使うSublimeTextのショートカット
- 文字列を選択する ⌘ + D
- 1行複製する ⌘ + shift + D
- 作業を1つ戻る ⌘ + Z
- 作業を1つ進める ⌘ + shift + Z
- 選択した行のインデントを増やす ⌘ + [
- 選択した行のインデントを減らす ⌘ + ]
ショートカットはこちらの記事を参考にさせていただきました。
コーディングを高速化！Sublime Text 3でよく使うショートカットキー – NO TITLE
Sass
シンス株式会社ではSassも導入されているため、私もSassの使い方を覚えました。
「Sassって何？？」というところから1日で導入できたので、比較的簡単に導入しやすいツールだと思います。
Sassのすべてを理解するのは大変なので、今自分に必要な部分のみを理解すれば十分だと思います。私がひとまず理解したのは、Sassの基本と言われているネストのみでした。
Sassの勉強をした本はこちらです。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
ツールの導入に関してはSublime textとSassの2点ですが、この時点で1週間が経っていたと思います。
参考にした本を読むペースは2~3日で1冊だったと思います。このペースで消化しないと仕事が進まないわけですし「早く学ばなくては！！！」と必死でした。
使い慣れたツールを変えることはハードルが高く感じますが、実際はそんなことありません。
よりよい仕事をするためにはどんどん便利なツールを取り入れるべきだと私は思います。
HTML5
「HTML5を書けます。」
入社する前は自信をもって言ってましたが、働いてみると全然通用しませんでした……。
仕事ではHTML5を「早く正確に」書くことが求められます。
「正確に」とは、要素の使い方はもちろんなのですが「セマンティックなマークアップを心がける」ということです。
私は「セマンティックなマークアップ」を、研究論文を書くようにHTMLを書くことだと思います。
特に論文の目次のように、見出しをつけて章だてすることがHTMLのh要素の使い方と同じだと思います。
HTMLファイルを見た時に目次をしっかりと書き出すことが出来れば一番良いと思います。
わかりにくい考え方かもしれませんが、これを理解してコーディングすると作業スピードは倍以上違いますし、SEOにもよいのでWeb制作に関わるなら必ず理解しておくべきことだと思います。
HTMLを書く時に迷うのがクラス名の命名ですが、これについてはまた今度、CSS設計にてお話しします。
HTMLの参考にした本はこちらです。
カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド (WEB PROFESSIONAL)
HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
今後読みたいのは次の本です。
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books)
勉強の参考にした記事はこちらです。
SEO対策として最低限押さえておきたいHTML/HTML5マークアップの大事な6つのポイント | Creive【クリーブ】
他にもたくさんあります。
CSS
HTMLを書く時に参考にした本は、CSSについても書かれています。
CSSはボックスモデルと包含ブロックの理解を深めることが大切だと思います。
ボックスモデルとは要素を箱に捉える考え方で、箱に対してmarginやborder、pafddingなどのCSSがどう影響するかを理解することが重要です。
backgroundはどこまで影響するか知っているか？
backgroundはurlと色を同時に指定できることを知っているか？
など、CSSはとにかく奥が深いです。
もっと書きたいのですが、それはCSS設計に関する回で書きたいと思います。
レスポンシブ対応
レスポンシブのコーディングは、どのサイズで見ても大丈夫なように見た目を整えることでMedia Queriesを使って対応します。
基本的にHTMLの書き換えはせず、CSSに例えば@media (max-width: 728px) {}というような、指定した横幅に対応したCSSを書きます。
シンス株式会社の業務ではレスポンシブ案件が当たり前になっているので、仕事をしていくうちに自然と覚えたような感覚でしたが、初めてレスポンシブに取り組む場合はギャラリーサイトで色々なサイトを見てみるのが一番参考になると思います。
まとめ
今回の記事はここまでになります。
ここまで書いた内容を学ぶのにおよそ1週間半が経っていたと思います。
何より意識したのは、正確さと作業スピードです。
シンス株式会社では作業スピードのアップを未だに求められますが、制作スピードを上げることで、次の仕事を任せてもらえて自分にはメリットしかありません。
最後まで読んでいただきありがとうございました。
次回の記事では「CSS設計」を学んだ過程を書きたいと思います。
企業や商品のブランディングを、ホームページ制作を通じて支援しております。
