[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ
<hr class="style**"> <style> hr.style1{ border-top: 1px solid #8c8b8b; } hr.style2 { border-top: 3px double #8c8b8b; } hr.style3 { border-top: 1px dashed #8c8b8b; } hr.style4 { border-top: 1px dotted #8c8b8b; } hr.style5 { background-color: #fff; border-top: 2px dashed #8c8b8b; } hr.style6 { background-color: #fff; border-top: 2px dotted #8c8b8b; } </style>
![[CSS]コンテンツの区切り hr要素を素敵にデザインするスタイルシートのテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/f2cf8d2fa440a82f4d989af711914223cad329f6/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015121100.png)
CSS見出し-ジェネレーター | WEB道
あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ 見出しサンプル あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえお� あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ あいうえおかきくけこさしすせそ CSSコード .sample2 { position: relative; color: #ffffff ; background: #000000; font-size: 16pt ; line-height: 1; margin: 20px -10px 20px -10px; padding: 10px 5px 10px 20px; box-shadow:1px 3px 7px
webnonotes.com - webnonotes リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン / SQUEEZE - Web Design Studio -
HTMLはシンプルにCSSの「border」や「box-shadow」、擬似要素の「:before」や「:after」を使って実装する立体的な見出しデザインをご紹介します。 以下2つの記事にインスパイアされ、見出しデザインをいくつか作成しました。両記事を参考にしつつも、私なりの方法を説明していきたいと思います。 CSSの擬似要素を使った見出しデザイン｜Webpark[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート | コリス まずはサンプルをご覧ください。 サンプルページ » 「border」で三角形や台形を作る最初に、今回の大きなポイントでもある「border」で三角形や台形を作る方法をご紹介します。「border」は要素の周囲四辺それぞれを囲むものですが、隣接する二辺の「border」が設定された時に、境界線の内側と外側の頂点を結ぶ対角線で要素が分けられ
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
実装は超簡単！デザインがかわいく、アニメーションもかわいいCSSで実装された軽量スピナー
スピナーの実装 実装は、簡単です。 「弾むボール」を例に、説明します。 Step 1: 外部ファイル 各スピナーに用意されているCSSファイルを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="http://css-spinners.com/css/spinner/ball.css" type="text/css"> </head> CSSは個別用と全部用があり、全部用は「spinners.css」です。 <head> ... <link rel="stylesheet" href="http://css-spinners.com/css/spinners.css" type="text/css"> </head> Step 2: HTML あとは、各スピナーに用意されているHTMLをコピペするだけ。 他のスピナーもclassを
[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ
divやp、hrなどで実装された囲いや区切りのスタイルに、一手間加えた素敵なデザインにするスタイルシートのテクニックを紹介します。 かわいいデザインからスタイリッシュなものまで、実装のアイデアが素晴らしいものばかりです。
![[CSS]素晴らしいテクニックが満載！囲いや区切りなどのラインを実装するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a545d68e72312cfa64f79c7d1932afa3d3078686/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014120205-19.png)
装飾的なCSSギャラリー / ウェブデザインライブラリー
投稿日：2014年11月14日 このチュートリアルでは装飾的なCSSギャラリーを紹介します。 Step1 ： はじめに Step2 ： 基本スタイル Step3 ： :before要素 Step4 ： アートフレーム Step5 ： HTML5ギャラリー Step6 ： CSS3 変形 Step7 ： Nth-of-Type Step8 ： アップデート かなり前になりますが、<span>タグをひとつ追加で使って、装飾的なイメージギャラリーを作成するチュートリアル</a>を書きました。 その時はspanタグを加えるのにjQueryを使いましたが、あまりユーザーフレンドリーではありませんでした。 今日はJavascriptを使わない、より良い方法をご紹介します。 :beforeや:afterの疑似要素を使えば同じ結果が得られるのです。 :before要素はあまり使われませんが、追加の要素やコ
[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック
シンプルなHTMLで、シャドウを加えたギザギザのかわいいボーダーをつくるスタイルシートのテクニックを紹介します。 Jagged Border HTML まずは、デモのHTMLから。 デモは3つのギザギザがあるので、3つのdivを使用します。 <div class="jagged-wrap-inner"> <div class="offset"></div> <div class="lightgray-bg jagged-border"></div> <div class="white-bg jagged-border"></div> <div class="darkgray-bg jagged-border"></div> </div> ギザギザを一つにした最小限のセットは、こんな感じです。 <div class="jagged-wrap-inner"> <div class="offse
![[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c725ef9aa750bffbd7f88a5e9c7301be6838f4e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082706.png)
quusookagaku.com - quusookagaku リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
『SPピグで見るCSS3活用事例』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、森と申します。 スマートフォン版アメーバピグのWebアプリを担当しています。 「HTML5 Web Applicationのつくりかた」という記事が詳しいので、 この記事ではスマホ版ピグのCSSについてマイページを例にご紹介します。 とても長い記事になってしまいましたが、最後までご覧頂けると嬉しいです。 スクリーンショットで見るCSSプロパティやセレクタ2012年4月現在、SPピグ内のレイアウトはどのページも大体同じなので、マイページとフォーム要素を抜粋して使っているプロパティやセレクタの中から主要なものをざっと並べてみました。 HTML
jQuery UI Bootstrap
A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter
３ステップではじめるレスポンシブWEBデザイン:phpspot開発日誌
Responsive Design in 3 Steps ３ステップではじめるレスポンシブWEBデザイン。 今後新しくサイトを公開する時はスマホ対応なんていうのは当たり前になってきている時代で、デザイナーさんにとっては必須であるレスポンシブWEBデザインを３ステップで簡単に説明してくれています。 CSSが分かる人ならさほど難しいものではないのでサクッと理解しちゃえます。 METAタグを付与 IEでもMedia Queriesを使えるようにスクリプトをインクルード レイアウトを作る css3 media query を記述。ブラウザの幅によって要素を非表示にしたりしてCSSを切り替えられるというわけですね JavaScriptが不要っていうのは素晴らしいですね 関連エントリ 使うっきゃないレスポンシブWEBデザインなWordPressテーマ２５ レスポンシブWEBデザインのサンプル26 HT
[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート
Portraitモード（縦向き）のグリッド設計 グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> スタイルシート 比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。 /* Landscapeモード（横向き）用 */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* Portr
金融機関で借金をしていると就活に不利になるのでしょうか | 街金融よりお得？迷ってる方必見の街金よりお得な会社はこちら
私は現在、就活活動を行っている大学生です。メガバンクや地元の地方銀行に就職希望しているのですが、最近友人から親や自分が借金があると、金融機関には就職できないと聞きました。私の両親は金融機関から借金があります。この場合かなり不利なのでしょうか。 借金があるから銀行に就職できないことはない 借金といっても今やたいていの家庭で、車や住宅ローンはあるものです。家庭に借金があるから金融機関に就職できないということはないでしょう。 だって、ローンを組むことは悪いことをしているのではないですよね。むしろ社会的に信用があるからできることですよね。銀行から個人にお金を貸出すのは、与信行為ですので、信用されているということです。逆に言えば社会人として評価されているようなものです。そんな家庭の子供を選考から外す理由が見当たりません。また、大手の消費者金融の会社だってマガバンクの傘下だったりと関連がある時代ですの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Bootstrap has moved!
Chico UI
iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net
