[B! 見出し] ddt2000のブックマーク

シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選

コーディング　Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ手書き風の見出しデザイン[01] このデザインのポイントは「border-radi

ddt2000 2017/07/11

リンク

CSSで簡単に作れる見出しデザイン40選｜オシャレ装飾で見出しに存在感を

ホームページで必ずと言っていいほど必要になる要素といえば「見出し」です。しかし、ホームページに合わせて1からデザインするのは作業工数がかかる上に、毎回同様のデザインになってしまいがちです。また、CSSについてあまり知らない人にとっては、デザインしたくても自ら実装するのはハードルが高いと言えるでしょう。そこで今回は、見出しをオシャレに装飾できるCSSのコードを紹介している記事をピックアップしました。オシャレな装飾ができるCSSの見出しまとめ 1. 見出しをお洒落に装飾するCSSを紹介 http://ideahacker.net/2015/05/26/10208/ 11とおりのオシャレな見出しデザインを紹介している記事です。左と下にボーダーがあるもの、1文字目だけが大きいもの、といった定番デザインの見出しが作れるコードを掲載しています。 2. CSSのコピペだけ！オシャレな見出しのデザイン

ddt2000 2017/04/27

リンク

HTMLとCSSのコピペですぐに実装できる見出しデザイン14選

WEB制作で必ずと言っていいほど登場するものの１つに「見出し」があります。そこで今回は、CSSだけで作られている見出しの中でも、実用性が高いものやCSSの最新要素を使ったものを厳選してご紹介します。コピペで簡単に実装できるので、是非使ってみてください。飾り付きの見出し擬似要素before、afterを使って飾りをつける見出しです。beforeとafterのcontentプロパティを変更すれば、☆や♡にすることもできます。同じくbefore、afterを使うパターンです。transf ormプロパティで斜めにした長方形と長方形を重ねることで三角形を作っています。 beforeとafterを使ったシンプルな見出しです。ボーダーを指定した擬似要素の位置をpositionプロパティで指定しています。ボーダーがある見出しキャプション付きの見出しです。シンプルなので使いやすいですが、レスポン

ddt2000 2016/09/14

リンク

[CSS]テキストの左右に水平ラインをすぅーーーっと引くスタイルシートのテクニック

hn, pなどの要素を使ったテキストの左右に、水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 HTMLは非常にシンプル、カラーやサイズの調整も簡単、背景画像も問題ありません。実装のポイントは5つ。画像は使用しない。 spanなど、余分なHTMLは使用しない。フォントのサイズを大きくしても自動で調整される。可変。背景が画像でも水平ラインが綺麗に描かれる。実際の動作は、下記ページで確認できます。デモは全てのモダンブラウザ、IE9+でご覧ください。 Heading Side Lines HTML HTMLは非常にシンプルで、hnやp要素のみで実装できます。 classを使用すれば水平ライン有り・無しの共存も可能です。 <body> <h2>テキストの左右に</h2> <h3 class="lines-on-sides">水平のラインを描く</h3> </bo

ddt2000 2014/04/21

リンク

jQueryでヘッダーに現在の見出し要素を表示する「DisplayHeadingプラグイン」

jQueryでヘッダー部分に現在の見出し要素を表示する「DisplayHeadingプラグイン」を公開します。このプラグインは以下のページの振舞いに触発されて作りました。 Phusion Passenger users guide, Apache version １．サンプルサンプルを用意しました。サンプルスクロールして見出し要素が通過するたびにページ上部のヘッダー部分に見出しのタイトルを表示します。逆スクロールしても、同じように見出しのタイトルを遡って表示します。２．プラグインのダウンロード下記のリンクからプラグインをダウンロードして、ファイル名を「jquery.displayheading.js」にリネームしてください。 jquery.displayheading_0.0.1.js 以下、設定方法です。３．HTML 見出しの内容を表示させたいHTMLを、body終了タグ

ddt2000 2013/10/01

リンク

H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transf orm」「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);