ソフトネクストのスタッフブログ

皆様に少しでもプラスになるIT情報を探して公開しています。


テーマ:

お客様各位

弊社の年末年始休業について
下記期間における業務を休業とさせていただきます。

>2013/12/30(金) 〜 2014/1/3(火)

上記期間内のお問い合わせにつきましては、
お問合せフォームからメールにてご連絡ください。
ご了承の程、何卒宜しくお願い申し上げます。

AD
いいね!した人  |  コメント(0)  |  リブログ(0)

テーマ:

拝啓 盛夏の候、皆様方におかれましては益々ご健勝のこととお慶び申し上げます。 

さて、誠に勝手ながら弊社では、

8月11日(木)〜8月16日(火)までを夏期休業期間とさせていただきます。

期間中ご用のお客様は、各営業担当までご連絡をお願いいたします。

皆様にはご迷惑をおかけしますが、何卒ご了承の程宜しくお願い申し上げます。

AD
いいね!した人  |  コメント(0)  |  リブログ(0)

テーマ:
弊社のような制作会社に求められるものは、何を取ってもまず第一に品質だと思います。
しかしながら最高の品質を求めるとどうしても時間はかかってしまうものです。

では、品質を落とすことなく時間を短縮するにはどうするか?という問題に常日頃頭を悩ませているエンジニアも多いはずです。
今回はコーディングの効率化に絞って少し綴っていきたいと思います。

コーディングしていく中で「どういう組み方にすれば想定通りの表示になるか」といった基礎的な部分は自然と分かってくるものであります。
そういった「思考」の部分は経験を積み重ねるごとに早くなっていくというのは言わずともお分かり頂けると思います。

では「経験」以外でどう高速化していくか。
それは「作業」そのものを変えていくしかありません。
実際にどう作業を変えていけばいいのか、前置きが長くなりましたが「ツールの機能を最大限に活かす」というのが作業効率に直結します。

弊社では基本的にコーディング時にはDreamweaverを使用して制作しております。
以前私もコーディングに不慣れな頃は普通に一つずつタグを入力して、cssも手動でひとつずつ打ち込んで、という文面から見て取れる原始的な方法で行っていました。

しかし手入力では当然時間がかかる、またスペルミスがあるとどこが間違っているのか、探す時間と直す時間を取られます。効率は最悪です。
コーディングに慣れ始めた頃に「どうすれば同じコードを短時間で間違いなく書けるようになるか」という疑問を抱きます。

既にバリバリコーディングされている方からすると「何を今更」とつつかれそうな感じもしますが、Emmetというものを使います。
旧バージョンのDreamweaverではプラグインとして導入が必要でしたが、CC2015あたりからはデフォルトで搭載されています。

ではEmmetとは一体何か、具体例を織り交ぜつつご紹介します。

リストタグを3つ記述するとします。Emmetを利用すると、
ul>li*3
と入力しTABキーを押すだけで、
<ul>
<li></li>
<li></li>
<li></li>
</ul>
が吐き出されます。あとはliタグの中に自由に記述していくだけ、簡単です。

もう一つ例として、クラス名を振ってその中に要素を二つ入れたい場合
div.clearfix>div.left+div.right
と入力しTABキーを押すと、
<div class="clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
が吐き出されます。ちなみにドットを#に変えるとidが振れます。
>や+を使い分ける事によって自由自在に組むことができます。
>で下の階層へ、+で同階層、^で上の階層へと指定することができます。
もっと詳しく知りたい方は他の細かく解説されているブログを一度ご覧くださいませ。

一気に色々と表示させようとすると段々とややこしくなってきがちですが、慣れてくるとプログラミング気分で楽しくコーディングする事ができますよ!
ちなみにcssにも対応しています。
w100
と記述しTABを押すと、
width: 100px;
と出たり、表記が面倒な!importantなんかも、!を付けるだけです。
poa!
と記述すると
position: absolute !important;
とばっちり出てくれます。

初めはめんどくさそうだなぁと思ったEmmetですが、記述時の凡ミスが格段に減り、今までと比べ物にならないほどコーディングの効率が変わったので、今ではこれがないとやっていける気がしません(笑)

最後に問題、これはどう表示されるでしょうか?
div#header>div.header_inner^div.content>div.box1.clearfix>p.text1+div.left+div.right^p.text2^div#footer>div.footer_inner
AD
いいね!した人  |  コメント(0)  |  リブログ(0)

AD

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。