現在のGoogle HTML/CSS Guide コーディング規約/日本語訳
コーディングを勉強している方や、普段当たり前のようにコーディングしているけれど、上手く使えているのか不安な方向けにGoogle HTML/CSS Guideの翻訳記事を書きました。（2024年02月29日更新） 色んな方のコーディングを見ていると実に様々。情報や知識が古いままで、今では推奨されない書き方も散見されます。 特に仕事で使っていると、誰かに指摘されない限り自分のコーディングを見直す事は無いかもしれません。 ですがW3Cの定めたHTML5の廃止など、変化の速い業界では定期的な見直しは勿論、何か指標となる物があると安心です。 そこで今回はGoogleが用意しているgoogle html/css style guideのドキュメントを元に、Googleコーディング規約と要点を解説。このコーディングガイドラインが絶対的な正解では無いかも知れませんが、参考になれば嬉しいです。 Google
「GoogleFonts」へディスプレイ書体など全8書体を提供しました | Fontworks
フォントワークスは、手書き風の楷書系硬筆体「クレー」やディスプレイ書体の「ロックンロール」「レゲエ」「ドットゴシック」など全8書体を、Google社の「GoogleFonts」にて提供を開始しました。 私たちは、「もじと もっと じゆうに」というタグラインを掲げ、文字の力を最大化し、すべての人の日常に新たな価値を生み出していきたい、と考えています。GoogleFontsが掲げる "Making the web more beautiful, fast, and open through great typography" にも共感し、一部書体ではありますが、GoogleFontsへ提供いたしました。制作環境に依存することなく、より多くの新しい作品が生み出されることへの貢献と、今後の更なるフォント市場の活性に繋がることを期待しています。 GoogleFontsは「SILオープンフォントライセ
CSSで簡単に導入できるカスタマイズも可能なSVGバックグランドセット「SVG Backgrounds」
近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。 シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。 詳しくは以下 ベーシックな縞模様から、グラデーションやポリゴングラフィック、3Dチックな立体的な背景まで全部で30種類ものSVGバックグランドが用意されております。すべての背景でパターンのカスタマイズが可能で、指定色を変更したり、模様の濃度やグラデーションの割合を調節したり、テンプレートをそのまま利用するだけでなく、デザインに合わせて調整することができます。これだけ多彩な背景をSVGで利用できるのは嬉しいですね。背景によっては
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
使えるとレスポンシブWebデザインに便利なCSS
デフォルトのボックスモデルではwidth、heightの値にはpaddingとborderの値を含みませんが、box-sizingプロパティの値にborder-boxを指定すると、widthとheightの値はpaddingとborderの幅を含むようになります。 #box-sizing{ -moz-box-sizing: border-box; box-sizing: border-box; } 特にコンテンツの幅を指定するときや、Fluid Grid Systemを作成するときに計算が簡単になります。 例えば以下の図のような4カラムのGrid Systemで2カラム分の相対幅を求めるとします。 デフォルトの場合2カラム分の幅は60px×2+20px=140px、全体の幅は320pxとなるので、140÷320×100=43.75%となります。これにmarginやpaddingでガターの幅
CSS3の「フレキシブルレイアウト」使い方まとめ フラップイズム
どうも、くーへいです。 今回は「レスポンシブデザイン」での使用が想定される、「フレキシブルボックス」についてまとめてみたいと思います。 なお、本記事は「CSS Flexible Box Layout Module Level 1」の2014年5月22日付けの編集者草案（Editor’s Draft）を基に作成しています。 また、「CSS Flexible Box Layout Module Level 1」は未だに策定中であり、現在は2014 年3月25日付の最終草案（Last Call Working Draft）が最新仕様です。 2014年5月22日付けの編集者草案は、2014 年3月25日付の最終草案に微修正を加えたものです。 最初にブラウザの対応状況について注意点 「フレキシブルボックス」で検索すると、いくつかの素晴らしい記事が出てきますが、中には古い記事が多く含まれています。 「
Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ
作成：2015/03/2 更新：2016/06/29 Web制作 > 今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄えをよくする ５．フルスクリーン 縦スライド３つ ６．全画面+オーバーレイ ７．フルスクリーン背景＋ローディング ８．写真から背景色を抽出 ９．background-size 対策 ドロワーメニュー １０．ドロワーメニュー３つ スクロールエフェクト １１．スクロ
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた
主要ブラウザで使うことの出来る「CSS3」ですが、IE8に対応していないためにCSS3の基本や使い方は知っていても実務等では使う機会が少なかった(クライアントワークではIE8が対応ブラウザに含まれていたため)方もいらっしゃると思います。そうするとふと「あれ、あのプロパティはどう使うんだっけ？」とか「この要素だけにスタイルを適応するCSS3は何だっけ…？」など忘れてしまうこともしばしば…。 最近ではIE8のシェアは低くなり、またスマホサイト制作の機会も増えたためクライアントワークでもCSS3を活用したWeb制作が増えてきました。そこで今回は、まず覚えておくと便利な機能の復習とそれを応用し「これCSS3だけで作れるの!?」というような驚きの作品の数々をまとめてみました！ CSS3とは そもそも「CSS3」とは何のことでしょうか。改めてその定義を確認してみましょう。 「CSS」は、ウェブページの
新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ
新人コーダーが迷いやすいと言われている、ファイル名、id・class名の付け方。 この記事では、それぞれの命名規則やコツについてまとめたいと思います。 少しでも皆様の参考となれば幸いです。 共通事項 ファイル名、id・class名を付ける際の注意点 まず始めに、ファイル名、id・class名を付ける際の注意点から確認していきます。 難しいことはありません。 下記に注意して名前を付けるようにましょう。 １．半角英数字のみを使用する。 「日本語」、「全角英数字・記号」、「半角カタカナ」は使用することが出来ません。 ２．記号は「-」（ハイフン）、「_」（アンダースコア）のみ使用する。 「\」（エンマーク）、「/」（スラッシュ）、「:」（コロン）、「*」（アスタリスク）、「?」（クエスチョン）、「”」（ダブルクォーテーション）、「<」（左アングルかっこ）、「>」（右アングルかっこ）、「|」（パイプ
![新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]｜クロノドライブ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c81495bec5cb3ed860ace323c97fffb85ea3e62c/height=288;version=1;width=512/http%3A%2F%2Fhtml-coding.co.jp%2Fogp_img.jpg)
[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ
TL;DR 前回（あのサイトでさりげなく使われていた CSS 小技集）の続きとなります。今回はマウス操作によりインタラクティブな動きを出したり、簡単にボックスを等間隔・等幅にしたりと CSS のみで実現できる方法を書いておきます。 インタラクティブ １．マウスオーバーで自動スクロールさせる 最近、マウスオーバーで縦長のページを部分的に見せる WordPress テーマが少しづつ出てきました。こちらは簡易的ながらマウスオーバーにて縦長の画像を見せるコードです。長めの画像を用意してはみ出した部分はoverflow: hidden;で隠しながらtransitionで遅延させ擬似的にスクロールしているように見せます。 html <div class="box-fixed"> <div class="field-wrap"> <div class="field-detail"></div> </di
![[続編] 効率的になった！最近のサイトで使われていたCSS小技集 - コムテブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/25fee8f1468dfd9f1f2b34b6da4ca43e4f44c4df/height=288;version=1;width=512/https%3A%2F%2Fcommte.net%2Fwp-content%2Fuploads%2Fai_css_interactive_trends.png)
小さな工夫が光る、テキストリンクのHoverアニメーション参考集 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのぺちこです。 近頃はいろいろな動きを取り入れたサイトが増えていて、「Webって楽しい」というワクワクが今まで以上に感じられます。 私が最近ちょっと気になっているのは、サイト全体の大きな動きではなく、いちパーツである「テキストリンク」のHoverアニメーションです。 大きな部分の動きや同じリンクでも目につきやすいボタンリンクには、いろいろなバリエーションの動きが取り入れられています。一方でテキストリンクについては、ありきたりなエフェクトになってしまっているサイトがまだまだ多いなぁ、と思われます。 そんな中で、そういった些細な部分も手を抜かず作り込まれているサイトを見ると、思わず「おっ！」と立ち止まってしまいます。 サイトコンセプトに沿った効果的なアニメーションを入れることができれば、ワンランク上のWebサイトになっていくはず。 というわけで今回は、テキストリンクのHo
知っておくと便利！あのサイトでさりげなく使われていたCSS小技集 - コムテブログ
TL;DR 2014/12/01：続編である「最近のサイトで使われていた CSS 小技集」を書きました。 今回は CSS のみで実現できるもの、動きあるエフェクトやこれから使用頻度が高くなりそうなものをメモしておきます。さり気なく使いたい CSS テクニックです。 画像 １．キュレーションサイト風のランキングボタン キュレーションサイトがサイドバーに「よくつけてる」ランキングボタンです。counter-incrementで数値を増加させ、content: counter()でカウンターを表示します。人気の記事を表示させる WP プラグイン等と組み合わせるといいですね。ざっくりとしたソースで申し訳ないです、微調整はお願いします。 html <ul class="sample"> <li><img src="xxx.png" /><span class="post-title">テストテストテ
非デザイナーエンジニアが一人でWebサービスを作るときに便利なツール32選 - Qiita
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr：http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ！って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの＋αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー＆デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index
これはスゴイぞ！Bootstrapのページ作成が積み木感覚で簡単にできてしまうジェネレーター -lollytin