HTML5.1で変更された見出し要素の使い方、レスポンシブイメージの要素などが分かりやすく解説されたコーダ−必読のリファレンス本 | コリス

2017/03/24 44 users リファ コーダ コリス 階層 見出し

2016年11月1日に勧告化されたHTML5.1ではレスポンシブイメージの要素などが追加され、定義されている要素が108個から113個に増えました。また、HTML5では見出しをすべてh1要素で統一することも可能でしたが、HTML5.1では見出しの階層を無視した使い方され、見出しの階層は合わせるべきと定義されています。 今持っているHTMLのリファレンス本は、HTML5対応ですか？ 現役の人はリファ... 続きを読む

編集段階である程度装飾してくれるのでプレビューする必要がないMarkdownエディタ『Writed』 - Macの手書き説明書

2015/04/03 15 users プレビュー Markdownエディタ 背景 見た目 Mac

カテゴリ：仕事効率化ユーティリティ 現在の価格： 無料 販売元：Joacim Ståhl 対応OS：10.9以降 $7.99の所、期間限定で無料。基本はシンプルなMarkdownエディタ。編集段階でも見出し要素は大きく、引用は背景が白く、リンクはクリックできるように装飾してくれるのでHTMLプレビューを見ずともある程度結果が想像でき、プレビューと編集をいったりきたりする必要がなくなります。見た目は... 続きを読む

[CSS]画像置換「-9999px」のパフォーマンスを改善した新しいテクニック | コリス

2012/04/16 970 users コリス 見出し HTML テクニック テキスト

テキストで実装した見出しなどを画像に置換するテクニックで「-9999px」が有名ですが、そのパフォーマンスを改善するテクニックを紹介します。 画像置換：-9999px 改善したテクニック 画像置換：-9999px -9999pxを使った画像置換のテクニックは、下記のようになります。 HTMLは見出し要素で実装します。 HTML <h3 id="sample06">見出しのテキスト</h3> 「te... 続きを読む

[CSS]見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ | コリス

2012/01/16 353 users コリス CSS HTML テクニック まとめ

デモページ: Headline 1 最初のデモはシンプルで、borderのプロパティのみでスタイルしています。 .headline1 { border-bottom: 1px dashed #aaa; border-left: 7px solid #aaa; border-left: 7px solid rgba(0,0,0,.2); margin: 0 -15px 15px -22px; pad... 続きを読む

[JS]自動でページ内の見出し要素を抽出しアンカーを生成するスクリプト -AutoAnchors | コリス

2011/06/08 57 users コリス パラグラフ jQuery エレメント スクリプト

指定した範囲内から特定のエレメント（h2要素など）を自動的に抽出し、ページ内アンカーの一覧を自動で生成するjQueryのプラグインを紹介します。 デモでは、div要素内にh3要素を三つ配置しており、コンテンツの右側に各見出しのページ内アンカーのナビゲーションを自動で生成しています。 AutoAnchorsの実装 HTML HTMLはシンプルで、各見出しとパラグラフをdiv要素で内包するだけです。 ... 続きを読む

[CSS]テキストにグラデーション効果をつけるスタイルシート | コリス

2008/01/17 387 users span コリス グラデーション CSS テキスト

Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectの... 続きを読む