みなさんこんにちは。Misocaのトヨシです。 8月29日に開催されたWord Fes Nagoya 2015(http://2015.wordfes.org/ )というWordPressのイベントで「WordPressを用いたWeb制作の見積ワークショップ」を開催しました。とても好評なワークショップになりましたので今回はそのレポートをお届けします。 25人ほどの方に参加して頂き、こちらが用意した架空の案件についてWordPressを使った場合の見積を作って皆で発表しました。 このワークショップの目的 Web制作の見積は難しいです。 同じページ数の案件でも、相手の予算や納期、利用者数などで大きく変わってきます。 Web制作の見積で金額に関する正解は一つではありません。しかし、ワークショップを通じて、他の人からやり方や考え方を学ぶことができるのではないかと思い企画をしました。 また、Miso

Sublime Textのショートカットを利用し始めてから、開発が今まで以上に楽しくなってきました。 この記事は、sublimetextのショートカットをもっといろいろ知ってみたいという人にお勧めです！！ まだ全然わからないよという方は、以前、qiitaで書いた「最速でコードを書こう！本当に便利なsublime textのショートカット６選！」という記事のほうが、よりよく使われるショートカットが載っているので、この記事から読むことをお勧めします！！ 1. 終了タグの挿入★★★ Windows:　Alt＋. Mac:　command＋option＋. なんで今まで知らなかったのか。いつも簡単に終了タグ挿入できたらいいのに、と思いながらも地道に書いてました。これで、htmlのコーディングも2倍速！！ 2. 親要素をたどる★★☆ Windows:Ctrl+Shift+A Mac:Command+

新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ

バージョンごとに進化するIEのバグ 備忘録も兼ねて記事にまとめました。 バグについての解決策と補足も併せて記載してますが、 記事に記載されていない遭遇率高めのバグやより良い解決策などがあれば、是非フィードバックをお願いします。 まとめてみた所感としては、IE6の頃から根本的な部分は変わってない気がします。 （ただし、パフォーマンスが大幅にアップしたのは認める。） IE11はWindows10の場合、2025年までサポートが続きます。 https://support.microsoft.com/ja-jp/lifecycle/search/18165 ﾅﾝﾃ／(^o^)＼＼(^o^)／／(^o^)＼＼(^o^)／／(^o^)＼ｺｯﾀｲ もうね...アボカドまるごとバナナかと。 ちなみに今年の4月でVistaがサポート終了するので、1ヶ月後にはIE9を窓から放り投げてOKです。 https:/

注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f

県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ

普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 作者: 吉田真麻出版社/メーカー: 翔泳社発売日: 2015/11/03メディア: 大型本この商品を含むブログを見る どんな本なの？ HTMLとCSSの初心者〜中級者向けの本です。HTML・CSSの基本的な文法と一般的なタグ・プロパティ（a要素とかmarginプロパティとか）を多少知っている方であれば読めます。 イメージ的には、超初心者本の次に読むような感じ。既にHTML/CSSの最低限の知識はあって既存コードの修正やコピペはできる、けどまだいちから何か作るようなコーディングは難しい・・・というようなレベル感の方が、いちからサイトを作る経験をしながらもっと知識や理解を深めていく、というような内容

現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か？　自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp（ガルプ）について、導入から使い方など、基本的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

Qiita上の内容を集約し、大幅に修正・加筆したものを本として出版しました。 →ブログ：Bracketsの解説書を出版しました 基本的な使い方 こちらにて別途紹介しています。 →Bracketsの機能紹介、使い方解説 →Bracketsショートカット集 カテゴリ一覧 必ず入れておきたいもの ソースコード関連-全般 ソースコード関連-HTML/CSS ソースコード関連-JS/PHP、その他 画像・デザインデータ連携系 挙動改善系 機能拡張系 という形でカテゴリ分けをしています。 ※各エクステンションまだまだ機能をフルに使い切れてないところもありますので、何卒ご容赦ください。。。 必ず入れておきたいもの Extensions Rating 拡張機能一覧画面において、ソート可能にしたり各エクステンションの作者のアイコン・DL数・スター数等の情報を表示してくれます。 これにより、拡張機能がとても探

今から1年前ぐらいにメインエディタをSublime Textに切り替えた際にもとにかく高機能で使いやすかったので今後も使い続けると思っていたんですが、いろいろと比較した結果メインエディタをBracketsに切り替えることにしました。 まだ使い始めたばかりなので気になる拡張機能を片っ端から試してみたり自分が使いやすいようにいろいろといじろうとは思いますが、取り急ぎインストールしてみた拡張機能のメモや切り替える要因となったポイントなどを書き残しておこうと思います。 Bracketsとは ご存知の方も多いと思いますが、BracketsとはAdobeが提供しているエディタです。 Bracketsは、HTML／CSS／JavaScriptで開発されている、HTML／CSS／JavaScript用の新しいオープンソースコードエディターです。 新機能や機能拡張の開発を通じてプロジェクトに参加することをご

PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 こんにちは、デザイナーの佐藤タカアキ（@sato_tkaaki）です。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDreamweaverのExtract機能を使って、PSDファイルから効率よくデザインする方法」をご紹介させていただきます。 そもそもExtract機能とは？ Dreamweaverは聞いたことあるけど、Extract機能ってなんぞ？！と、Extract機能を初めて

Web制作に使えるエディターAtom、Brackets、Coda、Sublime Textの現状まとめ：新人Webデザイナー／開発者も知っておきたい Web制作に長年携わる筆者が数あるテキストエディターの中から代表的な4つをピックアップ。機能別に違いをまとめてみたので、エディター選びの参考にしてほしい。 皆さんは普段、Web制作にどのエディター（テキストエディター）を使っているだろうか？ この記事を読んでいる方の中には、Webデザイナー／開発者になったばかりで常用しているエディターが決まっておらず、どれがいいのか探している方もいるかもしれない。また、今使っているエディターに不満があり、乗り換えを検討している方もいるかもしれない。 最近は、さまざまなエディターが登場しており好みに合わせて利用できるが、それぞれの特徴を把握し、自分に最適なものを選ぶためには、ある程度使ってみなければ分からない。

2017年9月22日 Webサイト制作, 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！ ↑私が10年以上利用している会計ソフト！ ファビコンをデザインする ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。 多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、A

CSS Digとは、Webページの解析用拡張機能で、使用されているプロパティ一覧や使われ方などをひと目で確認できるものです。 Chromeの拡張機能として使えます。 インストール こちらから→ CSS Dig 中央にある「ADD TO CHROME」をクリックし、ChromeのWeb storeにいきます。 「＋ ADD TO CHROME」をクリックして、拡張機能をインストールしましょう。 ツールバーに↑このように表示されるはずです（ｄって書かれているやつです） さっそく使ってみる universionsのページでやってみました。 ツールバーの「ｄ」をクリックすると、上記のようなスタイルシートの一覧がでてきます。styleblockと書かれているのは、インラインで書かれたStyleです。 「START DIGGING」で進みましょう。（ちなみにDIGGINGは採掘・掘ることです。なんかそ

つい数記事前にCSS DigというCSSデバッグツールをご紹介したのですが、やはりChromeのデベロッパーツールは充実していますね。本日は基本的な使い方ではなく、もっと便利に使うためのTipsをご紹介します。 （CSS Digに関するページはこちら） ※ キーはMacとなっています。Windowsユーザーの方CommandをCtrlに読み替えてください。 1. Command＋Pで開きたいファイルをサーチブラウジング 2. Command + Opt + Fでソースコード内検索 3. Ctrl + G で行番号指定したところまでいく 4. Sublime Textみたいに複数行にカーソルを置いて編集 commandを押しながらカーソルを複数箇所におけます！ （ちなみにcommand+Dで同じ文字列を選択していくこともできる！） 5. minifyされても整形できる このようなJSでも。

近年、プロトタイプやフレームワークと言った言葉をよく耳にします。 どのような変化が起きていて、それに至るまでの考え方や、個人的な見解を書きたいと思います。 閲覧環境と利用者の変化 Webサイトの役割の変化について スマートフォンやタブレットの登場によってWebサイトの閲覧環境は大きく変化しました。 PCの前にわざわざ座り、電源を入れて「さぁ、Webサイトでも見るか〜」から、リビングのソファに座りスマートフォン閲覧するようなスタイルが当たり前になってきました。 Web制作者は常時PCをたちあげてると思いますが、Web業界に関わっていない方はわざわざPCのある部屋に行って見るなんて事は少なくなっていると思います。 コミュニケーション的視点の重要性 Webサイトの価値観や利用状況は変化しているのに、実際にそれらをふまえて制作されている場合は少ないように思います。 利用者の見方が変わって来ているの