HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw

TL;DR リニューアルを行った時に、CSS3 で気づいたことや次回もまた使いそうなものなどを備忘録として書いておきます。基本的なものから見慣れないものまで。 CSS3 オートフィルの背景色を解除 chrome にて、テキストボックスのオートコンプリートした際、背景色が黄色になります。これを消したかったので を追記。色指定の箇所に任意の色を指定できますが、とりあえず白色で。 無事消えました。 Coderwall | Change background color for autocompleted inputs in Google Chromeでinputがオートフィルされてると背景色が黄色になるのを回避 – CSS | ごろつきめも backface-visibility で Chrome のチラつきを解決 fadeIn などのアニメーションを取り入れると Chrome でヘッダーやサイ

私的（あるいはテンマド社の）CSS/SCSSコーディングについてのルールまとめです。 自分自身の整理/備忘録と、自分の書いたコードを引き継ぐなどしていじることになった人に見せる用。随時更新。 最終更新：2019/09/25 （→ 変更内容 ） ルール設計の指針 覚えるべきことは必要最小限に メンテナンス性の高さを最重要視 開発時に「迷う」「考える」部分を極力減らして余計な事を考えずに済むように 前提 Sassを使う 素のCSSを使うような苦行は避けます。 ほとんど好みの問題ですが、Lessは記法がちょっとよくないので、Sassを使います。 処理速度やツールセットの関係で、本家RubyのSassではなく、node-sassのほうを、大抵はgulp-sassで走らせて使います。 ※そろそろSassを捨ててPostCSSのみで済ませるのも現実的になってきているので、プロジェクト参加者のCSS知識

(2016/05/23 追記) 記事内で取り扱っている技術で、はてぶコメント等で質問の多かった「webpack」についての解説記事を書きました。 最新版で学ぶwebpack入門 – JS開発のモジュールバンドラ - ICS MEDIA Web技術はよく技術の進化が早いと言われます。多くの技術が現れては消える中で、どの技術を学ぶべきかを選択するのは重要です。選択するポイントの1つに「技術の将来性・人気があるかどうか？」があります。今回は基本的なフロントエンド技術である「CSSコーディング」「JavaScriptプログラミング」「タスクランナーとビルドツール」の3つについて、それぞれの人気をGoogleトレンドで調べてみました。 CSSコーディングの流行り CSSは、SassやLESSに代表される「CSSプリプロセッサー」を使ってプログラミングすることで、品質と効率を大きく向上させることが可能

2. クリエイティブコーディングで数学？ • パーティクルを自由に飛ばしたい →速度の計算、ベクトル、移動量計算 • 色を自由に変化させたい →周期角度の計算、濃淡の連続的変化 • 大量のオブジェクトにダンスしてもらいたい →時間制御（タイムラプス）、高度な変形計算 • ジェネレイティブアートを作りたい →数学アルゴリズムの理解 3. 目標 ① 三角関数と行列で表現に活用できる部分を知る • 全部は知らんでも何とかなるわよ ② 数学式→JavaScript へ移植できるようになる • 画像、音声処理の wikipedia や論文が活用でき るようになりますぞ 一部意訳があります正確性は他の文献を参考にしてね 4. アジェンダ ① 関数とは (2m) ② 三角関数とは (5m) ③ 三角関数を使ったコーディング体験(10m) ④ 行列とは (5m) ⑤ 行列を実装するコーディング体験 (10

みなさんはウェブサイト制作で、どのテキストエディターを使用していますか？　弊社ではHTMLやCSS、JavaScriptを扱うウェブ制作ソフトとして「WebStorm（ウェブストーム）」を全スタッフが利用しています。WebStormは有料のソフトウェアですが、日本語に対応しており、ウェブ制作に役立つ機能が豊富に搭載されていて値段以上の価値があります。 今回はWebStormの魅力について、「WebStormの概要」、「ウェブ制作に便利な使い方」、「コードリーディングに重宝する機能」、「コーディングの助けになる機能」の4点から紹介します。 ※本記事はWebStormの内容ですが、開発元のJetBrains社が提供しているIntelliJ IDEAやPhpStorm、その他のIDE（統合開発ソフト）で同様のショートカットや機能を使用できます。 本記事は初心者向けの内容ですが、続編記事「使用歴5

みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？　入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ

Web制作で以前から気になっていたことについて、Twitter のアンケート機能でアンケートを取ってみました。 アンケートの実施期間は2016年1月〜2月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100件以上で、普通に考えれば私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジー、Webデザイン、コンピュータープログラミングなどとなっています。 性別（推定）は 73% が男性、27% が女性となっています。 DOCTYPE宣言

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

先週末の三連休のさなかに、人気プラグイン「Advanced Custom Fields(以降、ACF…

それでは、みんなが15分という短い間でどのようにコーディングしたのか見ていきましょう！ SMACSSで汎用性を意識した、店長のモジュール化コーディング See the Pen gPPpOJ by yusuke omi (@Im0-3) on CodePen. まずは手前味噌ですが、私、店長のコードから紹介したいと思います。ポイントは、SMACSSでのCSS設計を意識したコーディングです。 グリッドレイアウトはSMACSSのレイアウトルールに沿った命名にし、使い回しがしやすいようにパーセントで、グリッド幅を指定しました。また、カテゴリの部分やNEWのパーツはモジュール化して、他のところでも使い回しをしやすいように計算をしています。 意味のあるコードだけを書きたい。まろCのエモコーディング See the Pen xZZNey by maroc (@maroc) on CodePen. CTO

Sublime Text3 公式サイト Sublime Text3は、Windows、Mac、Linuxで動作します。 http://www.sublimetext.com/3 Emmetって何ができるの？ 続いて、「Emmet」について説明しましょう。 「Emmet」とはテキストエディタの拡張機能として利用できる、HTMLやCSSのコーディングの入力をサポートするプラグインとなります。 SublimeTextなどのテキストエディタでは、「p」などと入力してtabキーなどを押すと「 」のように、簡単に展開してくれる機能があります。 簡単に言うと、Emmetはそれの高機能版だと思ってもらえればよいです。 EmmetのHTML、CSS展開例 例えば、Emmetを導入した環境下で下記のように入力します。 div.header>div.header__inner>ul.header__inner_

作成：2015/11/16 更新：2016/08/01 Web制作 > 初心者の生徒さんに「どうやったらプログラミングできるようになりますか、コーディングする上で最初に何を準備するとよいですか」と漠然と質問されることが多いので「一番最初は何を使って、どう設定するとよいのか」簡単にメモしておきます。 また「プログラミングの時は何を使う、これで練習する」といった感じで決めておけば、プログラミングも楽になるかと思います。今回は「最初はコレ！」といった感じで選抜してみました。初心者の方向けの記事となります。 エンジニア速報は Twitter の@commteで配信しています。 学んだプログラミングやソースコードを管理・反復練習する プログラミングに関する書籍を何冊も読みこんで理解しても、何回ノートを見返しても、普段検索とコピペで済ませていると、いざとなったら全然プログラミングできないです。筆者は泣

コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ

2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas

内容について 本書は以下のような構成になっています。 CHAPTER1　目的に合わせたコーディングの環境整備 CHAPTER2　HTMLコーディング CHAPTER3　CSSコーディング CHAPTER4　最適化・検証 CHAPTER5　そのほかよく利用される技術・ツール CHAPTER1　目的に合わせたコーディングの環境整備 CHAPTER1ではNode.jsやRubyを用いた開発環境の作り方などが紹介されています。制作に入る前段階の開発環境を作るのって、大変ですよね。少なくとも私にとっては最もハードルが高い作業に感じます。 案件に何か新しい技術を取り入れる時は、Googleで検索しながら手探りで導入していただけだったので、ここでまとめて基本的なことを学べるのは助かりました。 例えば、私は仕事ではNode.js上で動作するgulpを使ってコーディング作業をしているのですが、導入する際には

いままで、WordPress、カラーミーショップ、他CMSなどへコーディングする時、実際には複数の工程が存在していますが、一気に考えがちでした。 その方法も大事だと今も思っていますが、見方を変えて、集中できるようにする考え方、つくり方を考えてみました。 CMS系のコーディングで必要な工程は以下の様なものかとおもいます。 ・カンプ画像から素材を書き出す ・HTML（html4.01/html5）＋CSS（CSS3）コーディング ・jquery系のフロントエンド的な動き ・CMS側のプログラムに合わせた独自タグへの対応 ・CMSにあるDB内のデータを足したり引いたりといった簡単なプログラミング ・CMS側のプラグインファイルを微調整したりといったPHP+HTML+CSSな操作（←WPのみ） ※静的HTMLファイルとするのか、CMS側に入れ込むのか、という課題もありますが 事前の工程や打ち合わせ

こんにちは、haruです。 今回はコーダーさん（マークアップエンジニア）に PSDを渡す際に留意したい点についてネタにしました。 コーディングのしやすいPSDとはいったいどんなものなのか？ これからWEBデザイナーを目指す方、必見です！ それではどうぞご覧ください。 Vol.04 デザインして終わりじゃない！コーダーに優しいPSDファイルをつくろう！ 次回は6月末頃に更新です！お楽しみに…。

立て続けにリンクに変わったスタイル当てることについての記事を二つ読んだ。ひとつはサムネイルにオンマウスすると暗くなったりしてサムネイルが見えなくなるスタイルについての記事で、もうひとつはオンマウス時や他の場所のリンクのスタイルとの食い違いについての記事。納得できるところもあり、納得できないところもあり。 両方の記事共に「どうなっているとユーザーがわかりやすいか」という視点として読んだ。もちろんウェブサイトはユーザーに見てもらってなんぼなので、そういう視点を忘れてはいけない。しかし、それと同じくらいどうコンテンツを伝えるかということも大事なはずだ。 サムネイルにオンマウスで暗くなったり、オーバーレイで補助的な情報を出したりするのは、確かにユーザーを混乱させやすい。オンマウスする時はそのサムネイルに注目するからなので、それが見づらくなったり隠れたりすることに煩わしさを感じても不思議ではない。