擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
:before, :after擬似要素 の使い方を基本からマスターするためのチュートリアル | コリス
擬似要素はCSS1から存在するもので、ここで解説する「:before, :after擬似要素」はCSS2.1でリリースされたものです。 CSS1では「:first-letter, :first-line」です。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3ではコロンを二つにした「::before, ::after」などがあります。 サポートブラウザブラウザ 「:before, :after擬似要素」をサポートするブラウザは下記の通りです。 IE8+ Firefox3.5+ Chrome Safari4+ Opera6+ IE8+とすべてのモダンブラウザと言ってよいでしょう。 非サポートブラウザへの対応 IE7にも「:before, :after擬似要素」を利
CSSの content プロパティーを使いこなそう！
2015年4月8日 CSS CSSの小技やスニペット集なんかを見ていると、ちょくちょく見かける content プロパティー。「そういえば、こいつ一体何者…！？」と思った方もいるかもしれないので、今更ながら改めて content プロパティーの紹介をしようと思います。 ↑私が10年以上利用している会計ソフト！ content プロパティーって何？ content プロパティーは、要素の前後に、:before または :after という擬似要素を使ってテキストや画像などのコンテンツを挿入する際に使用します。擬似要素とは、HTMLなどの文書には記述されていない要素をCSSによって新たに作り出された架空の要素です。Webクリエイターボックスでも、過去記事「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」や「経歴や会社の沿革ページに！簡単なCSSで実装す
職人技！CSSだけでつくったアイコンまとめサイト（コピペで使える） | バシャログ。
こんにちは。 今更ながら、朝スムージー始めました。mackyです。どうせすりつぶされて少なくなるんだろうと思い、目分量でいろいろ突っ込んでみた結果、 5人前くらいできてしまいました。…野菜ってすごい。 さて今日は、気分転換もかねてcssだけでつくったアイコンがいろいろ紹介されているサイトを集めてみました。 One div - The single element HTML/CSS icon database One div - The single element HTML/CSS icon database アイコンの数はそこまで多くないですが、必要最低限の情報がシンプルに整理されているUIで使いやすいなと思います。 使いたいアイコンのソースコードをzipファイルでダウンロードできるのもうれしいです。 また、表示可能なブラウザをマウスオーバーで表示してくれるのも特徴。 CSS3 Mono
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
Bootstrapで日本語をより美しく表示させることにこだわった無料のテーマ -Honoka
Bootstrapは人気のフレームワークですが、日本語のコンテンツを表示するために最適化されているとは言えません。フォント指定・文字サイズをはじめ、日本語をより美しく表示するためのさまざまなアプローチを取り入れたテーマ「Honoka」を紹介します。 単に使用するだけでなく、他のものでも日本語を美しく表示させるのに役立ちます。 Honoka Honoka -GitHub 日本語フォントは、たくさんのフリーフォントがあります。 2017年用、日本語のフリーフォント 259種類のまとめ Honokaの特徴 Honokaのデモ Honokaのアプローチ -Bootstrapでの日本語表示最適化 Honokaの利用方法 Honokaの特徴 Honokaは、Bootstrapでより美しく日本語を表示させることにこだわったオープンソースのテーマファイルで、これをベースにWebサイトを作成したり、既にBo
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ) | UNORTHODOX WORKBOOK | Blog
jQueryを利用したものしか作ったことがなくて、今後、使いそうな機運があったので、今さら感は半端ないですけどCSSだけで実装するドロップダウンメニューを作ってみました。 こういうのは使い回しすることが多いので、自分用にHTMLとCSSのコードを載せておきます。使いたい方がいらっしゃいましたら、ご自由にお使いください。 作ったのは、普通のドロップダウンメニュー(シングル)、多階層、メガドロップダウンメニューの3種類で、1つのグローバルナビに全てを詰め込んでいます。1種類だけ使いたいという場合もあると思うので、コード自体は種類によって個別に記載しています。そのために、非常に冗長となっていますがご了承ください。 デモと共通の部分 このドロップダウンメニューのデモは以下のリンクから見れます。 DEMO ドロップダウンメニュー自体は、ul要素でマークアップしています。 各種(シングル・多階層・メガ
CSSのtable-cellでmarginが効かないので代わりに隙間を空ける方法 - ディレイマニア
以前にtable-cellを使ってfloatを使わずに要素を横に並べる方法をご紹介しました。 この方法便利なんですが、marginを使って隙間を空けることができないんですよね。 というわけで、margin以外の方法で隙間を作る方法をご紹介します。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
[CSS]box-shadowを使って、紙がふわりと浮かんだようなエフェクトをつけるスタイルシートのまとめ
Creating Different CSS3 Box Shadows Effects [ad#ad-2] デモ 実装 デモ デモはbox-shadowに対応した下記のブラウザでご覧ください。 対応ブラウザ Internet Explorer 9.0+ Firefox 3.5+ Chrome 1+ Safari 3+ Opera 10.5+ デモページ [ad#ad-2] 実装 基本となるHTML 8つの各デモのHTMLの基本は同じで、class名が異なるだけです。 <div class="box effect"> <h3>Effect</h3> </div> 基本となるCSS div要素とh3要素の基本となるスタイルです。 .box h3{ text-align:center; position:relative; top:80px; } .box { width:70%; height
【40個】CSS3ボタン集 – 3Dアニメーションで動くボタン等、40種類の色々なボタンを作ってみたよ。 | Stronghold Archive
【40個】CSS3ボタン集 – 3Dアニメーションで動くボタン等、40種類の色々なボタンを作ってみたよ。 どうもこんにちは！Toshikuraです。今回のTipsは【【40個】CSS3ボタン – 3Dアニメーションで動くボタン等、40種類の色々なボタンを作ってみたよ。】です。今回の為に作ってみたというより、つどつど書いたり真似てみて集めたボタンのまとめになります。個人的に毎回書くのも面倒ですし…やはりコピー&ペーストしたいので記事化してみました。 対応ブラウザ Chrome,Firefox,Opera(一部除き),Safari デモページ まずはデモページで動作を確認していただくのが解りやすいかもしれません。基本的な実装方法に関しましては下記【実装方法】をご参照ください。 実装方法 最初に基本となるCSSを記述します。あとは好きな動きに併せてコードを貼付けるだけです。動きのサンプルはデモに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
まるでPhotoshop?! CSSフィルタを使った美しい写真加工エフェクト - PhotoshopVIP
http://11neko.com/menu-style-inspiration/
