【企業サイト構築用】Webページコーディングガイドライン
参考 Device Metrics レスポンシブ対応時に知っていると得する（かもしれない）知識 アニメーション指定 アニメーションがどのように動くかの指示を具体的に行ってください。よくコーダーになんとなく任せてしまうケースがありますが、仕様を明確に伝えることで、良い成果物が生まれます。 指示・指定が必要な例 メインビジュアルなどのキーとなるエリア、スライダーの動き パララックス効果を入れるか ページスクロール時 メニュー表示時 ページ遷移時 アニメーション参考 アニメーション指示を行う上で役立つ参考サイト集です。 Hover States Use Your Interface Best Animation Websites | Web Design Inspiration 開発情報の確認 今でも極稀に「PHPが動かないサーバで、納品直前までPHPで作っていた」など、「？」とリアクションして
対象ブラウザを見直してみる（2018年1月版） ｜ Tips Note by TAM
以前の記事から、約1年経ちましたので、PCやスマホの対象ブラウザを改めて見直してみました。 ［参照］ 対象ブラウザを見直してみる（2017年3月版） 対象ブラウザを見直してみる（2017年3月版） IE はさらに減少傾向 現在、Microsoftが公式サポートしている IE は 11 のみですが、シェアはこの1年弱で 11.51% から 9.45% まで下がりました。 下記参照サイトで行われた「サイト制作者向けアンケート」では、「既にサポート外」「今年中にサポート終了」としている割合も多くありました。（母数が少ないので、あくまでも“参考”ですが...） 生活に必要な公共性の高い企業・サービスのサイト以外は、あと数年でサポート外とする流れになるかもしれません。 ［参照］ HTMLコーディングの人気のスタイルは？ アンケート結果から分析するイマドキのウェブ制作事情 - ICS MEDIA ht
マークアップのガイドライン整備をしたお話 | スペースマーケットブログ
こんにちは。 先日夏期休暇をいただいて丹沢にキャンプに行って来ました。ギラつく太陽の中、川に飛び込むと最高に夏を感じられますね。 夏が大好きな荒田です。 今回はマークアップのガイドラインを整備したお話です。 マークアップのガイドラインは以前からありましたが、新しい技術を取り入れたり、開発環境が変わったこともあり、今の環境に沿ったガイドラインを整備しようとなりました。 まだまだ作成途中段階でブラッシュアップしていくものと思いますが、現段階でのものを公開したいと思います。 ガイドライン整備の背景 マークアップの担当が一人だったため頭の中でルールをつくる => 作業するごとに悩みルール変更をすることもちらほら プロジェクトを進めることを優先し、ルールを決める時間がとれなかった 話し合ったメモをまとめる場所を特に決めていなかったため話し合い後に「あの時にメモしたあれどこに格納したっけ？」ということ
パスワード認証
シンクゼロマガジン・ライト版 Creative Edge School Books の宣伝用マイクロブログギング。 企画・制作・販売している学習コンテンツのリリースやキャンペーンなどの情報をお知らせしています。 URL: http://design-zero.tv/ 公式サイトをご覧ください。 現在、ブログを公式サイト（ http://design-zero.tv/ ）に移行中です。 公式サイト（ http://design-zero.tv/ ）には活動報告や学習コンテンツの情報を掲載しています。
グラフィックデザイナーやディレクターがhtmlコーディングの指示に関して注意すべきこと / Shiro Kuro Inc.
友人の広告企画制作会社で、Webサイトのコーディング指示に関する注意すべきことを話しました。
「HTML5/CSS3モダンコーディング」読んだ - $shibayu36->blog;
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 作者:吉田真麻翔泳社Amazon 最近自分のプロジェクトのデザイナが、JavaScriptで実装しないといけないと思っていたことをどんどんCSSで実装していくのを見かけた。この出来事から、JSで実装したほうが良いか、デザイナにやってもらったほうが良いか、どちらが良いかを自分で判断できてないと感じたので、最近のCSS事情を知りたいと思って読んだ。サラッと流し読みするだけで、CSS3で利用できるようになったよく使うプロパティの概要を把握できたので、今の自分の知りたいことが分かって非常に良かった。 例えば以下のことを学ぶことが出来た。 reset.css, normalize.cssとはなにか beforeやafter擬似要素を使ったいろんな技
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積
HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由 | Adobe Blog
Web制作に欠かせないツールである「Emmet」というものを、知っていますか？ この連載では、お使いのエディタの機能を拡張するEmmetのインストールから、HTML・CSSの展開、あまり知られていない便利な機能などを解説しま す。初回は、Emmetの概要と、BracketsとDreamweaverにEmmetをインストール方法についてです。 Emmetとは何か？ Emmetは、主にHTMLやCSSの記述・編集を強力にサポートするプラグインです。Dreamweaverをはじめ、様々なIDEやエディタに対応しており、CodePenのようなコードを公開するオンラインサービスなどでも採用されています。 元々はZen-Codingという名前でしたが、2012年9月ごろから「Emmet」という名前で開発が進められ、正式リリースされた現在も機能の拡張が行われています。 Emmetの主な特徴は、独自の省
コーディングがラクになる！？ “自分仕様”のさくさくコーディング法
It has been said that one should code as if the person maintaining the code is a violent psychopath who knows where you live. But why do we work with psychopaths? That question unfortunately cannot be answered in this presentation. However, we can shed some light on how to code for readability hopefully avoiding the problem altogether. Readable code is about a lot more than producing beautiful cod
WEBコーダーがデザインを受け取った時に嬉しい8つのこと - 世界を変えるのはブルペンキャッチャー
2013-06-17 WEBコーダーがデザインを受け取った時に嬉しい8つのこと WEB制作 author：ゆっき １つのwebサイトを作るのに、多くの人が関わり、協力してカタチにしていくのって、いいですよね。ひと通りのことを一人でできることも大切だと思いますが、それぞれの役割ごとのプロがいるのってすごいことだと思います。 プロデューサーがプロデュースして、ディレクターがディレクションをして、デザイナーがデザインを作り、コーダーがコーディングし、プログラマーがプログラミングする。 なんかかっこいい！ 今日は、WEBコーダーとして、デザイナーさんの作ったデザインが「こうなってると嬉しい！」と思うことをご紹介したいと思います。 1. ガイドがバッチリ引かれている 私が最初にすることは、サイトのあらゆる部分の採寸です。 サイト全体の横幅 ヘッダーの高さ グローバルナビのパーツの横幅、高さ 左右カ
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
H2O Space.HTML/CSSコーディングルールブック
画像基本はPNG8とJPEG、必要に応じてGIFを利用画像ファイルは基本的に、イラストなどはファイル容量が軽いためPNG8、写真はJPEGファイルを利用します。ただし、IE6以前で透過PNGが利用できないため、必要に応じてGIFを使い分けます。 HTML<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="keywords" content="ホームページ制作,東京" /> <meta name="description" content="東京世田谷のホームページ制作会社。「声」をテーマに、御社の顧客満足向上に貢献するWebサイト制作をお手伝いします。" /> <title>エイチツーオー・スペース[H2O Space.] | ちゃんとWebなホームページ制作会社（東京・世田谷）</title> <link
HTML+CSSコーディング ベストプラクティス 高速かつ堅牢なコードを効率よく書くために
HTML＋CSSコーディングの場数を多く経験してきたプロのマークアップエンジニアが次に目指すのは、「Webサイトの高速性を実現し、堅牢で無駄がなく、美しく更新のしやすいコードを効率的に書く」こと。本書は、プロの現場で本当に求められているこれらの「ベストプラクティス」を、第一線で活躍する著者陣が余すことなく披露します。クロスブラウザやスマートフォン、HTML5、CSS3など最新の話題にも言及。HTML＋CSS上級者に贈る現場のテクニック集の決定版！ 目次 【HTML＋CSSコーディング ベストプラクティス】 ■1 ［基礎］ basic 1.1 ｜ はじめに 本当のプロに求められるフロントエンド実装 1.1.1 ｜ クオリティとコストバランスの両立を考える 1.1.2 ｜ メンテナンス性を高めた設計 1.1.3 ｜ 情報へのアクセシビリティの確保 1.2 ｜ そもそもHTMLとは何なのか？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hanarenoheya
コーディングなんかこわくない！ アレルギー克服講座
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
Webデザインとコーディングの実務レベルの知識を基礎から独学で身につけることができるオススメの本
イマドキのスライス事情
コンポーネント単位で考えるWeb制作
webamb.com
