HTMLコーディング

社内勉強会を行いました。

こんにちわ、入社2ヶ月のともさんです。

さて、去る9月16日(金)19:00~社内勉強会を行いました。
テイクフォーでは初の勉強会となります。

テーマ「私のおすすめツール群」
目次
・デザインツール
・コーディングツール
・Chrome拡張機能
・他ツール
・Bracketsについて
・Emmetについて

ちまたではもうかみ砕かれすぎた話題になりつつある、個人的おすすめツール群です。

でも!
それでも!
おすすめしたい!

という私のワガママにより実現した今回の勉強会テーマ。
さくさくいきます。

今回の勉強会にあたって、パワポで資料作成しました。
準備としてはそれだけですね。

そして、はじまった勉強会。

勉強会風景。緊張のゴングが鳴る。

今回特に発表したかったのは、Bracketsについて。
Adobeから提供されている無料の開発エディターですね。
Dreamweaverベータ版にもシステムとして搭載されていて、今後のDreamweaverがさらに使いやすくなるだろうと予測しますが。

現状、私の場合はBracketsでコーディングを行ってます。
なによりも動作が軽快!
あとは、自宅がMacで、会社がWindowsの私ですが、Mac、Win両対応てのがいいです。なにげに。

他にも、標準で日本語対応とか、コードを折りたためる(cssはもちろん、htmlやphpなども)とか、開始タグ、終了タグのハイライトとか、CSSや色のクイック編集とか、ライブプレビュー機能とか。
まあ語りだしたらキリがないですね。

Bracketsについては、おすすめしたい拡張機能とかまたどこかで記事にできたらなーと思ってます。
ここで拡張機能まで語りだすと、まあページの縦の長さが半端なくなるので。

今回はインストール方法のみを。

Bracketsからファイルをダウンロード
Brackets、ダウンローーーーード!
Brackets

ダウンロードしたファイルをダブルクリックしてインストール
英語のインストーラですが、特に考えず「Next」押してけばインストール終わります。

Brackets起動
Brackets、起動!

起動した瞬間から日本語環境。
ほらもう使えちゃう。

Bracketsについて熱く語るワタクシ。
Bracketsについて熱く語るワタクシ。

みんなまじめに聞いてくれてる。ありがたい…
みんなまじめに聞いてくれてます。

おまけとして、Emmetにも触れました。
これもちまたでは有名な「みんな大好き」Emmetです。

社内では私しかまだ存在を知らなかったようで、変換したときのみんなの食いつきが気持ちよかったです( ´艸`)

Emmet変換!

社長はさすがですが、Zen-codingのころからご存じでした。|д゚)

まとめ

テイクフォーでは初となる社内勉強会。
まさか、入社2ヶ月私が最初の講師になるとは思ってなかったのでビビりました。

今回の勉強会については、パワポで資料作成も行いました。
もし見たい方がいれば以下からダウンロードしてください。
たいしたことは書いてないですが。

パワポ資料をどうぞ。

勉強会準備については次回の記事にしたいと思います。

ではではー(/・ω・)/

ピックアップ記事

  1. 【お客様インタビュー】サンキョウプラテック株式会社様

関連記事

  1. HTMLコーディング

    EC-CUBE3で自動返信メールが文字化けし、そしてタイトルが途中で切れたときの対処法

    大阪はすっきりしない天気が続いてロードバイクに乗れずテンション下がりまくりのともさんですこんにちは。さて、前回に引き続き今回もEC-CUBE関…

  2. HTMLコーディング

    便利すぎるWebフォント「Font Awesome」でサイトの見栄えをワンランクUP!

    今回はWebフォント「Font Awesome」の使い方を紹介します。Font Awesomeとは、Web上でアイコンをフォントとして利用できるW…

  3. HTMLコーディング

    【WordPressでGO!】WordPressの子テーマを作ってみよう

    前回の記事から1週間も経っていないことに軽く衝撃を感じているともさんです、こんにちわ。もう正月気分も抜けて、いよいよ体重が気になりだしたころでしょ…

  4. HTMLコーディング

    最近流行りの静的サイトジェネレータについて掘り下げてみる【Movable Type編】

    最近、耳をふさがないイヤホンを見つけて衝動買いしてしまったワタクシ、ともさんです。こんにちわ。Bluetoothではないのに、まあまあ高め…

  5. HTMLコーディング

    ホームページもインスタ映えの時代!?classを付けるだけで画像をインスタグラム風にできるcss

    こんにちは、ほぼ毎日朝7時からジムに通ってます。徳永です。今更ながらあけましておめでとうございます。作業がひと段落したので重い腰を上げて201…

  6. HTMLコーディング

    css3だけで立体的でアニメーション付きのボタンを作ろう

    はじめまして、制作チームキャップの徳永です。今年でテイクフォーも4期目に突入し、そろそろ自社サイトでまじめに記事を書いていみようという事になったの…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WEBデザイン

    「いらすとや」の素材を使ってマンガを作成しよう!
  2. レポート

    HARIO V60がきた!
  3. 【Photoshop】レイヤーを上手く使い回そう Vol.1スマートオブジェクト編

    WEBデザイン

    【Photoshop】レイヤーを上手く使い回そう Vo.1スマートオブジェクト編…
  4. WEBデザイン

    よく見る方眼紙のようなパターンの作り方
  5. WEBデザイン

    問い合わせフォームを追加しよう!Contact Form 7の使い方!
PAGE TOP