» これからコーダー・マークアップエンジニアを目指す人達へ|ホームページ制作・運営からWEBデザイン、ウェブサイト企画作成を行っている名古屋市のホームページ制作会社「ABABAI」

これからコーダー・マークアップエンジニアを目指す人達へ

スタッフブログ

  • 2019.04.17

    これからコーダー・マークアップエンジニアを目指す人達へ

    顔アイコン

    売れずに腐ってしまった果物のような男、はかせことはだです、こんばんは。

    私はコーダーになって約3年になります。

    今回はこれからこのweb業界へ足を踏み入れる方々、または初心者へ向けての内容になっております。
    オススメしたいことを綴っていきたいと思います。

    私的な意見もあるので、参考までにどうぞ。

     

    まず、コードを書くためのテキストエディッタについて

    そもそもテキストエディッタってなんぞ?

    という方もいるかもしれません。

    ペンで文字を書くためには紙が必要になります。

    その時の紙をテキストエディッタと考えるとわかりやすいと思います。

    テキストエディッタにネット上で表示できるようにコードを書いていく。

    それがコーディングというものだと思います。

    そんなエディッタを3つご紹介させて頂きたいと思います。

    ▼ATOM

    「無料」で使えて、簡単にインストールができ、自分の使いやすいように自由にカスタマイズできるエディッタ。
    いろんなパッケージがあり、個人的に一番お世話になっているエディッタです。
    Atom cheatsheetから必要に応じてショートカットキーを覚えたり、スニペットを登録するとだいぶ早くコーディングができるようになると思います。
    Github社が開発している為、githubと連動もでき、バージョンアップが速い。
    個人的によく使うエディッタです。

     

    ▼Sublime Text

    自分の使いやすいように自由にカスタマイズできるパッケージ機能があります。
    ちょっと日本語検索ができない為、人を選ぶかもしれません。
    パッケージ量の豊富さ、挙動が軽い為、非常に使いやすいエディッタです。

     

    ▼Adobe Dreamweaver(アドビ ドリームウィーバー)

    Adobeからでているエディッタです。有料になるのですが、使いやすく便利な機能が揃っています。

    ブラウザ上で確認しなくても見れる「ライブビュー」や、「photoshop」と連動して使えるExtractという機能があり、
    psdで作られたデザインデータからcssを抽出する機能があります。

     

    その他にもエディッタはたくさんあるのですが、触ったことがあるのがこの3つです。

    いろんなエディッタを使ってみて使いやすいのを選ぶことをおススメします。

    個人的にはATOMをメインに使ってます。

     

    ▼スニペット

    スニペットとは、あらかじめ登録しておいたコードを一発で出すものになります。
    トリガーキー+tabなどで出るように設定できます。
    エディッターによっては、トリガーキー+ctrl+eとかだったりすることもあります。
    お使いのエディッタのスニペットについて調べると、より早くコーディングができるようになると思います。

     

    ATOMの例になってしまいますが、ファイル→スニペットから登録できます。

    snippets.csnへの書き方(ATOM)

    
     '.text.html.php':/* html・phpに適用 */
       '':/* 説明 */
         'prefix': ''/* トリガーキー */
         'body': ''/* 実際にでるコード */
    

    ”の中へよく使うであろうコードを入れて、トリガーキーと組み合わせてコーディングを行うと、さらに速度アップ!

    たくさん作れば作るほど、どんどん早くなっていくと思いますので、是非スニペットを活用してみてはいかがでしょう。

    ※/* ~ */はわかりやすく説明してるだけなので実際にはつけるとエラーがでます。

    
    '.text.html.php':/* html・phpに適用 */
       '':/* 説明 */
         'prefix': ''/* トリガーキー */
         'body': ''/* 実際にでるコード */
      '':/* 説明 */
         'prefix': ''/* トリガーキー */
         'body': ''/* 実際にでるコード */
    

     

    追加していく際には、このようにして追加していけます。

    ATOMのスニペットは何故かエラーがでまくって難しかった想い出です。
    タブ位置がずれているとすぐエラーを吐きますのでご注意を。

     

    Emmet (ex-Zen-Coding)

    短縮して書いた内容をhtml用にコーディングできるものになります。

    ul.jump.clearfix>li*3>a[href=#anchor0$]>{ジャンプ0$}

     

    ATOMなら ctrl+E、Dreamweaverなら tabを押すと・・・。

     

    See the Pen oOoJPj by hada (@hakase-kiwam) on CodePen.

     

    このような形で同じページ内のジャンプするリストが作れました。

     

    「▲>〇」 ▲の中の要素に〇
    「.〇〇」 クラス名
    「#〇〇」 id名
    「$」 ナンバリング
    と、いった内容になります。

    慣れるまでに時間がかかるかもしれませんが、書けるようになってくると、だいぶ早くなってくると思います。

     

     

    先日、「2019 SPRING「WEB TOUCH MEETING」」へ参加させて頂いたのですが、そこでクリエイターボックスのmanaさんがおっしゃっていたのですが、

    「得た情報をブログなどでまとめると、より脳にインプットできる!」

    これはブログの順が回ってきたのでいいチャンスと思い、このような記事を書かせて頂きました。

    また初心者向けの記事などを書いていけたらなぁと思います。

    長々とお付き合いありがとうございました。

    フェイスブックシェアボタン

名古屋で1番真面目なウェブ会社!! ABABAI お電話でのお問い合わせはこちら

メールでのお問い合わせ リンクボタン

資料請求 リンクボタン

カレンダー

2019年10月
« 9月    
 123456
78910111213
14151617181920
21222324252627
28293031  

MENU

求人情報本社・広島オフィス

お問い合わせ

資料請求

ページの先頭へ

お問い合わせ

  • メールでのお問合せ リンクボタン
  • 資料請求 リンクボタン

閉じる

アババイめちゃ凄いこと

建築会社に選ばれる5.5の理由

制作実績

お客様の声

スタッフ紹介

代表挨拶

新着情報

会社概要&アクセス