【企業サイト構築用】Webページコーディングガイドライン
以前、社内共有と知見をメモするためにWordPressの設計ガイドラインを書きましたが、Webサイト（ページ）のコーディングガイドが必要となってきたので、改めてまとめてみました。 多くのWebサイトを構築した経験値に基づき、特に企業向けのWebページコーディングを、一から行う前提で記述しています。 はじめに 技術やブラウザサポートの進展にあわせて、よりモダンなフレームワークや開発環境が次々と発表されていますが、普通のWebサイト、特に企業向けのサイトに於いては、新しく革新的な技術や設計よりも、以下の方針が往々にしてマッチします。 担当者が変わっても編集・変更し易い技術選定 拡張・運用していく過程で破綻しない設計 本ガイドは、上記の方針を踏まえたコーディングガイドラインとなります。 本ガイドの最大テーマは、納品物（Webサイトデータ）に一定の品質を担保することです。よって、制作前の決め事・チ
対象ブラウザを見直してみる（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サイトのコーディング指示に関する注意すべきことを話しました。
［結果発表］コーディング苦手意識調査してみた
久々の更新になりますが、ひょんなことから職場の同僚へコーディングアレルギー克服のためのナレッジシェアをすることになったので、SNSで「コーディング苦手意識調査」をしてみました！ ご協力いただいたみなさま、ありがとうございました。あわせて、コードにアレルギーのある方向けのスライド資料も公開してみたいと思います。 調査はTypeformにて実施。Twitterとfacebookによるアンケート。 調査期間は2017年3月16日〜21日の5日間。 回答者は205人。 ウェブ制作クラスタを中心とした結果になっているため、「HTML&CSSが苦手！」という層は僕が期待していたよりは少なかったかもしれません。そして何より、思いつきでやり始めてしまったのでアンケートの設計が非常に悪く…ほとんどただのコメント収集となってますが、覗いてみてください。 プログラムはやはり敷居が高く、苦手意識は「とっつきにくい
「HTML5/CSS3モダンコーディング」読んだ - $shibayu36->blog;
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 作者:吉田真麻翔泳社Amazon 最近自分のプロジェクトのデザイナが、JavaScriptで実装しないといけないと思っていたことをどんどんCSSで実装していくのを見かけた。この出来事から、JSで実装したほうが良いか、デザイナにやってもらったほうが良いか、どちらが良いかを自分で判断できてないと感じたので、最近のCSS事情を知りたいと思って読んだ。サラッと流し読みするだけで、CSS3で利用できるようになったよく使うプロパティの概要を把握できたので、今の自分の知りたいことが分かって非常に良かった。 例えば以下のことを学ぶことが出来た。 reset.css, normalize.cssとはなにか beforeやafter擬似要素を使ったいろんな技
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積むとよりこの記事の内容への理解が深まるはずです。 HTML と CSS を書くときに大切なポイント2点 HTML と CSS を書くときに大切だと思うことを書きます。 1. 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の主な特徴は、独自の省
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ページを開く
コーディングなんかこわくない！ アレルギー克服講座
エンジニアからデザイナーに向けて、デザインカンプを作るときにしておいて欲しいこと。
Webデザインとコーディングの実務レベルの知識を基礎から独学で身につけることができるオススメの本
イマドキのスライス事情
コンポーネント単位で考えるWeb制作
コーディングがラクになる！？ “自分仕様”のさくさくコーディング法
https://repopgl.org/