現在のGoogle HTML/CSS Guide コーディング規約/日本語訳
コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにGoogle HTML/CSS Guideの翻訳記事を書きました。（2024年02月29日更新） 色んな方のコーディングを見ていると実に様々。情報や知識が古いままで、今では推奨されない書き方も散見されます。 特に仕事で使っていると、誰かに指摘されない限り自分のコーディングを見直す事は無いかもしれません。 ですがW3Cの定めたHTML5の廃止など、変化の速い業界では定期的な見直しは勿論、何か指標となる物があると安心です。 そこで今回はGoogleが用意しているgoogle html/css style guideのドキュメントを元に、Googleコーディング規約と要点を解説。このコーディングガイドラインが絶対的な正解では無いかも知れませんが、参考になれば嬉しいです。 Google
PugでHTMLコーディングを効率化・メリットと使い方を知る
古いサイトのヘッダー改修で全ページを修正したり、微妙にことなるHTMLを繰り返し大量に書いたり（エディタがどんどん重くなる）、閉じタグ忘れを血眼になって探したことはないだろうか。 EmmetとSassでコーディングはかなり楽になったけれど、僕の作業を一番効率化してくれたのは、同時期に覚えたPugという技術だった。ここでは、Pugの概要とメリットを簡単に紹介したい。 Getting Started – Pug PugとはPug（パグ）は、HTMLを効率的に書くためのテンプレートエンジン。使い方はCSSで言うSassみたいなもの。拡張子 .pug のファイルを書いてHTMLに変換する。 もともとはJade（ジェード）という名前で開発されていたものの、商標の関係で2016年あたりにPugとして再リリースされた。新しいPug（2018年3月12日現在v2.0.1）は繰り返しや属性などの書き方が若干
CSSも軽量化の時代！コーダーが押さえるべきCSSコーディング5つのポイント
SassやLESSなどのCSSプリプロセッサーを使わずにCSSを書いているひとは未だに多いのではないでしょうか。 日常の業務でCSSを記述していると、どうしてもCSSはセレクタやプロパティの繰り返しが多くなってしまい、冗長になりがちです。 CSSだけでなく、あらゆる要素には軽量化が求められます。 ページ速度が遅くなれば、それだけ直帰率が多くなり、また検索エンジンもそのことをマイナスに評価して、結果的にページ全体のアクセス減につながってしまいます。 最近では、idセレクターやHTMLタグのセレクターを取り除く動きもあります。 効率よくCSSを書いていくには、どのようにして書いていけばいいのでしょうか。 今回は、コーダーが押さえるべきCSSコーディング5つのポイントをご紹介します。 シンプルに書くことを意識すれば、ファイル容量が軽量化するだけでなく、だれもが読みやすいファイルになります。 具体
【HTML5.1勧告】セクション要素内見出しレベル仕様の変更について
2016年11月1日付でW3CがHTML5.1を勧告しました。 HTML5からの変更差分はこちらにまとめられていますので、詳細はこちらを見ていただくとして、 今回はその中で「removed」つまり削除された仕様の一覧の中にあった次の項目に注目したいと思います。 ・The use of nested section elements each with an h1 to create an outline. （・アウトラインを生成するためにそれぞれh1を持つネストされたセクションを使用すること） HTML5でのアウトラインと見出しのルール 2014年勧告のHTML5では、「セクショニング・コンテンツの入れ子によって正しく階層構造がマークアップされている場合、その中で使用される見出しレベルは問わない」という仕様がありました。 このことはHTML4.01からHTML5になったときの大きな仕様変更
本当に使えるコーディングチェックサイト厳選3選
コーディングの正確性について、不安を持つWeb制作担当者は少なくないのではないでしょうか。 コーディング後に、ミスが発覚すると修正作業のために時間を大幅にロスしてしまう可能性があります。 できるだけミスを防ぐためにも、適切なコーディングができているかどうかをチェックできるツールはストックしておいた方がいいでしょう。 今回は、コーディングを担当しているものの自信が無いという方にオススメのコーディングチェックツールをご紹介します。 コーディングで気を付けなくてはいけないこと 制作するにあたって、コーディングレベルがありますが、HTML・CSSを利用する際に気を付けなくてはいけないことは単純に「正確に動作し、ブラウザによってサイト崩れが発生しない」ことなのではないでしょうか。 例えば、「リンクページをクリックしたが、正確にページが表示されない」や「PCでサイトを見たときには正常に動くのにスマホで
セマンティックSEOを考慮したhタグとliタグの上手な使い方
[対象: 中級] この記事では、意味的な繋がりをGoogleに確実に伝える（ことに役立つかもしれない）「hタグ」と「liタグ」の上手な使い方を解説します。 見出しを意味するhタグと項目を列挙するためのliタグに関する特許をGoogleは2010年5月に取得しています。 その継続出願となる特許が先日承認されました。 この件に関して、Googleの特許研究の第一人者であるBill Slawski（ビル・スロースキ）がGoogle+で共有した投稿が情報元になります。 hタグの下に出てくるliタグは意味的に等しく近い 見出しとしての「hタグ」の下に、リスト形式で列挙する項目に「liタグ」が設定されている場合、あとに出てくる項目ほど見た目の距離が見出しから遠くなります。 しかし、見た目の距離が離れていたとしても見出しとの意味的な関係は先頭に出てきた項目と等しい扱いになります。 言葉だけだとわかりづら
正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ
[HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉しいかという話ですので）、3と6はただのエゴですし、4の標準化っていうのはセマンティック云々の文脈でいうならばruleの話ではなくstandardの話をすべきではないでしょうか。カタチの想像もできないような未来を夢見る暇があるのなら、まずWebガバナンスからどうにかする努力をしたほうが何倍も有益でしょう。 2013/3/22 09:56追記：「セマンティックで正しいコードを書く6つの目的」のような構成であると読み取ってしまって（理由の箇条書きだと思って）上
[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方
http://www.hamashun.com/ で、お会いしたときにここぞとばかりに私が気にしているコーディングのしかたなどを聞いてもらったりしたのですが、いくつか気になるコメントをもらえたのでじっくり考えてみました。 今まで考えていた根拠の薄いコーディングルール 私は普段からかなり文書構造に気をつけてコーディングを行っていますが、仕様の中で理解できない部分についてはわりと独自の解釈も用いています。そのひとつに、「入れ子の同じ階層にブロック要素とインライン要素を置かない」というものがありました。 入れ子の同じ階層にブロック要素とインライン要素を置かない 具体的に説明すると、body要素等のブロック要素の直下にdiv要素等が置かれていた場合、それの外側の同じ階層状にspan要素等を置かないという事です。 <body> <div id="container"> <header id="top
![[HTML5 入門]HTML5におけるブロック要素とインライン要素の考え方](https://cdn-ak-scissors.b.st-hatena.com/image/square/913d9625c96461318e055dbb38b3d26c92683092/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F10%2Fintroduction-to-html5-150x150.png)
CSSのcounter-incrementを使ってリスト以外に番号を付ける方法
あまり使っているのを見たことがないマイナーなCSSプロパティ「counter-increment」を使ったサンプルを紹介します。 「counter-increment」というプロパティを初めて聞いたという方も多いかもしれません。「counter-increment」は、サンプルのように番号を自動的に付けるときに使われます。リスト（list-style-type: decimal）のような感じですね。「counter-increment」で番号を付ける対象を指定して、疑似要素を使って表示することになります。 疑似要素を使っているため、IE7以下は非対応ですのでご注意ください。 今回サンプルを２つ用意しました。 ではHTMLから順番に解説していきます。 HTML HTMLはどちらのサンプルも同じで以下のようになっています。 <div class="divCount"> <h4><a href=
[HTML5 入門]実制作で迷わない為のマークアップ例：会話文
文書構造を意識したマークアップ例 今回から始める不定期連載です。HTMLのコーディングのやり方はリファレンスサイト等で例文を用いて行われることが多いですが、どうも抽象的だったり、実際の運用に即していない印象のものが多く見られるように感じています。 仕様に関する解説やコードの書き方も、遠まわしだったり、「だから結局どう書けばいいの？」という感は拭えません。また、ドキュメント自体が書かれた地域の文化を基準にしており、我々日本のweb制作現場の実際にそぐわない場合もありますよね。 こういったことについて、一つ一つ実際の事例や具体的な使われ方を挙げながらHTML、CSSのコーディングについて解説したいと思います。 また、この連載にはブログの記事と同じく私個人のHTML5のマークアップに対する考え方が強く織り交ぜられることと思います。もし見解の相違などありましたらご意見頂きたいと考えています。 シン
![[HTML5 入門]実制作で迷わない為のマークアップ例：会話文](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ad9c1f78cd469d6befc307d0ea1a7cddb12ebc2/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fhtml5-semantic-dialogue-01-150x150.png)
【Mac向け】完全無料で使える！便利で快適なおすすめテキストエディタまとめ
Web制作でhtmlやCSSを書いたり、ブログの執筆、文書作成をするにあたってテキストエディタはとても重要になってきます。 しかし、テキストエディタは、有償無償問わずたくさんの種類があり、どれが自分に合っているのかわからない人も多いことと思います。 今回は、「完全無料」で使うことのできるエディタに限定し、高機能であったり、シンプルで使いやすいテキストエディタをまとめてみました。 尚、筆者がMacユーザーの為、Macでしか使えないものが多いです。 [Mac限定]オススメのMacテキストエディタ13選 CotEditor CotEditerは様々なエンジニアやライターの方が使っている言わずと知れた超有名エディタです。CotEditerは日本で開発されたため、日本語で使用することが可能です。 シンプルで、動作も軽快です。オープンソースで提供されていることもあり、日々機能が進化しています。 主な対
IE8から始めるテーブルレイアウト と IE10からのFlexible Box
IE8から始めるテーブルレイアウト と IE10からのFlexible Box 2012-11-08 テーブルレイアウトと聞くと<table>タグを使い、入れ子で<tr>, <td>タグのオンパレードを連想する人も多いと思いますが、今回の内容はCSSの display display: table; はCSS2.0からある仕様です。 要素をCSSでテーブルのようにあしらうことができるため、多くの利点があります。 display: table; display: table;はIE8以降のtable要素に、デフォルトスタイルシートで定義されているものです。 IE8からサポートされているのでIE7以下を切り捨てれば、今からでも使うことができます。 display: table;以外にも多くの値が存在し、tableを形作る要素に振り分けられています。 以下は、tableに振り分けられているCSS
HTML のタグを一度覚えたら一生忘れないようにするためのコツ | TM Life
IT の世界は, よく省略名が使われます. そもそも IT ってのが Information Tecnorogy の略ですしねw HTML(HyperText Markup Language) も例外ではありません. HTML で使われるタグは, ほぼ省略形で記述します. 例えばテーブル. テーブル系の要素は tr, th, td ってのがありますね. これらの要素を単純にそのまま覚えてしまうとふとコーディングをするときに最初に書くのって tr だっけ？ td だっけ?? 中に書くのは th だっけ? tr だっけ?? なんてことになります. HTML 学びたてのかたは経験したことがあるのではないでしょうか？ そこで今回は, HTML のタグを一度覚えたら一生忘れないようにするためのコツを紹介します. 紹介するコツをマスターすればそんなことは一切なくなります. コツといってもやりかたは簡単
CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる
WEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。 CSSのbefore/after擬似要素の説明で吹き出しのサンプル紹介してるんですけど、今回はそれについてもうちょっと詳しく書いておこうかな、と。 吹き出しの矢はボックスのボーダーで描画します ベースとなるHTMLは以下の1行のみです。 <p class="balloon">ゴロドクさんイケメン過ぎて泣けた！</p> クラス指定なので１つCSS定義しておくと同じ演出を繰り返し使えますね。 divタグネストとかでも同様のこと出来るんですが、HTMLソースがスッキリするのでbefore/after擬似要素を利用します。ご存じない方は事前に 劇的！（でもない）before after 擬似要素の使い方まとめ | 56docブログ を読んでおくと分かり良いと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
HTML・CSS・Sassのコーディング環境 2012 | Webデザインのタネ