最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
濁りなし！美しいグラデーションの基本ルールとCSSオンラインツール
デザイントレンドは変わっていますが、グラデーションはとてもナチュラルな見た目と多様性に富んでおり、いつの時代も愛されるデザインスタイルです。 この記事では、美しいグラデーションを作成する基本ルールと、手軽に利用できるグラデーション作成オンラインツールをご紹介します。 全シリーズはこちら。 しっかりマスター！美しいグラデーション作成徹底ガイド【Illustratorグルーバルカラー編】 しっかりマスター！美しいグラデーション作成徹底ガイド【Illustrator実践デザイン編】 美しいグラデーションって、なんだろう？ グラデーションには良くて美しいものもあれば、悪くてひどいものもあるでしょう。 良いグラデーションとは、ナチュラルで調和のとれた美しいなめらかな色の変化のことを指します。 プリント印刷でグラデーションを表現するときの技術的な問題を防ぐのにも役立ち、画面スクリーン状で見たときにも魅
SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]
多くのホームページが活用している「SVG（エスブイジー）ファイル」。具体的にどの様なフォーマットなのかご存知でしょうか。 SVGファイルのメリットは、拡大縮小しやすく編集性・汎用性が高いこと。でも「何となく使っている」「実はあんまりどのようなものか知らない」「なぜSVGなの？」と感じている方も少なくないでしょう。 そこで本記事では、SVGの特徴やその他のフォーマットとの違い、作成方法などについて詳しく解説します。 SVG（エスブイジー）ファイルとはなにか？ 「SVGファイル（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）」はの歴史は意外にも古く、2001年頃に勧告された技術です。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。 引用元：今こそ取り組むS
![SVGファイルとは？基礎知識と作成・変換方法を解説｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c1044997c38f72020170dae282a443ce6cd7864c/height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F8445%2Fog_image%2Fdefault-d8edf2f9b5b2b651d90216773c15980f.png)
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
スマホ対策に！CSS3追加セレクタと疑似クラスの書き方サンプル | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
九州ライターの村上です、皆さんこんにちは。最近最も嬉しかったことは筋肉痛がすぐに来たことです。そんな微妙なお年ごろ。 仕事でHTML/CSSの講師をしておりますが、近年スマートフォンの普及によりCSS3.0の導入も随分と浸透してきたように思います。あわせてセレクタの書き方が複雑になってきたので、今回はCSS3.0で追加されたセレクタと擬似クラスをまとめておきます。 実務でもよく使われるものには記述例を載せていますので、参考にしてください。 CSS3で追加されたセレクタと擬似クラスまとめ 属性セレクタ 構造疑似クラス ターゲット疑似クラス UI要素状態疑似クラス 否定擬似クラス 属性セレクタ 属性で設定した値に関するセレクタです。 E[Attr^=”val”] セレクタ［属性＾＝”値”］ Attr属性の値がvalで始まるセレクタに適用する。 【例】リンクの属性がhttpを含む（外部リンク）場
CSSの汎用クラスのつかいどころ | inkdesign
OOCSSをはじめとするCSS設計におけるモジュール指向のアプローチの話になると、下記のような単一プロパティで定義されたルールを組み合わせたものを指す、というような説明がされる場合がある。 .size1of4 { width: 25%; } .mrs { margin-right: 10px; } .font-small { font-size: 10px; } .text-left { text-align: left; } これらはUtilityとか、Helperとか、汎用クラスというように呼ばれ、あれば何かと便利なルールだ。 どういうときに便利かというのは、唐突なデザイン変更要求などに、都度そのためのルールを定義するよりも、これらの汎用クラスの組み合わせで対応できるということが挙げられるだろう。 <div class="mts text-center"> <img src="ban
An image format for the Web | WebP | Google for Developers
An image format for the Web Stay organized with collections Save and categorize content based on your preferences. WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy im
[CSS]hr要素をおしゃれにスタイリングする8つのテクニック
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
Placehold.jp
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
dzone.com
You Can Shape Trend Reports: Participate in DZone Original Research + Enter the Prize Drawings! Hello, DZone Community! We have a survey in progress as part of our original research for the upcoming Trend Report. We would love for you to join us by sharing your experiences and insights (anonymously if you choose) — readers just like you drive the content that we cover in our Trend Reports. check o
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://gradientfinder.com/