Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
![[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7ef0650ca2366040c7e9131e9a9453ac3ae7dcc/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120601.png)
[CSS]順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し
Webで調べると、ol要素を丸数字で実装する時はspanとか①②③とかを使うしかないように思えますが、クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニックを紹介します。 対応ブラウザはすべてのモダンブラウザで、IEは8+です。
制作者はなんと15歳のイケメン！今風の美しいCSSグラデーションがコピペで簡単に利用できる -Gradient Hunt
Webサイトやスマホアプリで人気が高い、色相を変化させた美しいグラデーションがCSSのコード・デザイン素材で利用できるオープンソースの無料サイトを紹介します。 制作者（@fmaldonadoy）は15歳のデザイナー兼Webデベロッパーで、この美しいグラデーションは日々更新され、どんどん増えています。
「Reboot.css」の特徴と使い方を解説
Bootstrapは既に多くの人が知っていると思います。 では、Bootstrapで採用されているCSSのリセットは知っていますか？ Reset CSSやNormalize.cssよりも使いやすく、これからのWebサイトやスマホアプリのCSSリセットとして設計された「Reboot.css」の特徴と使い方を紹介します。 A Look at Bootstrap 4's New Reset: Reboot.css 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Reboot.cssとは Reboot.cssの使い方 「box-sizing: border-box;」がどのように定義されているか remを使用したサイズとスペースの指定 ネイティブのフォントファミリー margin-topは死んでいる 共通要素はクリーンなスタイル タッチ
[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説
ボックスの内部に配置したテキストなどの子要素はそのままで、背景の色相やコントラストやぼかしを変更して、ガラス板のような美しいエフェクトを与えるCSSの新しいプロパティ「backdrop-filter」を紹介します。 今までは非常に長いCSSが必要でしたが、たった一行で簡単に実装できます。 The backdrop-filter CSS property 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 アップデート 2020/6/8: サポートブラウザを現在の状況に変更しました。 「backdrop-filter」だと、一行のコードで実装できる ガラス効果のさまざまなスタイル backdrop-filterののサポートブラウザ 「backdrop-filter」だと、一行のコードで実装できる 私はbackdrop-filterとい
![[CSS]たった一行でガラス板の美しいエフェクトが実装できる、backdrop-filterプロパティの使い方を解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7ef7a471fc9cc3dadd100b1fcf89855ae665c80/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018060803-01.jpg)
Webデザイン初心者がランクアップするためのCSSのコツ10選
ブログを始めたりホームページを自作したりするために勉強しはじめると、さらにデザインを凝ったものにしたくなります。 また、ある程度カスタマイズが進めば、表示速度をもっと早くしたり、より短いコードでコーディングしたりしたくなります。 そこで必ず話題に上るのが、CSSです。 もちろん、LessやSassのようなCSSプリプロセッサー(関数を使ったりしてプログラミングコードのように書くことができるCSS)が誕生したことで、より複雑なデザインをできるだけ少ないコードで書くことができるようになりました。 しかし、フロントエンドエンジニアとしてレベルアップするためには、どのように書けばレイアウトが改善されたり表示速度が速くなるのかをしっかりと理解しておいたほうがよいでしょう。 今回は、Webデザイン初心者がランクアップするためのCSSのコツをご紹介します。 これから紹介する、多くの初心者を泣かせたCSS
HTML5・CSS3のブラウザ対応チェックサイト3選 | Webデザイン・Webデザイナースクール
Web業界で仕事をしていくにあたって、もっとも重要なことのひとつは、最新技術を追い続けるということです。しかし、そこで困るのが、最新技術を試してみたいけど、どのブラウザだったら対応しているのか、ということだと思います。 そこで、ブラウザごとの技術対応状況が一覧で分かるWebサイトをご紹介していきたいと思います。 Can I Use... HTML5、CSS3、JavaScriptまで、幅広く対応していて、Web技術者にとって欠かせないWebサイトといっても良いくらい有名なサイトです。調べたい技術を検索ボックスに入力することで、ブラウザごと、さらにバージョンごとにも詳しく対応状況を一覧することができます。 MOBILE HTML5 その名のとおり、モバイルブラウザに特化してHTML5やCSS3の対応状況を確認することができます。Can I Use... よりもモバイルブラウザに多く対応してい
[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル
レスポンシブ対応のパンくずとマルチステップのナビゲーションを紹介します。 HTMLもCSSも非常にシンプルで、カスタマイズ性にも優れた有用なスニペットとしても利用できます。 デモページ HTML HTMLの基本構造です。 <nav> <ol class="cd-breadcrumb"> <li><a href="#0">Home</a></li> <li><a href="#0">Gallery</a></li> <li><a href="#0">Web</a></li> <li class="current"><em>Project</em></li> </ol> </nav> nav要素で実装し、各アイテムはol要素に「.cd-breadcrumb」で基本のスタイルを適用します。 基本のスタイル 基本のスタイルでは各アイテムを並らべるために「display: inline-block;
![[CSS]スニペットとしてストックしておきたい、レスポンシブ対応のパンくずとステップを実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/dba8baab2483c01e8847e7d49e2ec8f98db95ffb/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015072501.png)
CSS：フローチャートをCSSで作成 | design-cubits
ul.flow_list{ list-style: none; padding: 0; margin: 0; } ul.flow_list li{ border: 5px solid #ccc; border-radius: 10px; margin-bottom: 35px; padding: 4px 10px; position: relative; } ul.flow_list li::after{bottom: -34px; color:#ccc; content: "▼"; font-size: 24px !important; left: 48%; position: absolute;} ul.flow_list li.last::after{/*最後の▼を外す*/ content: ""; } ul.flow_list li h3::first-letter{/*1文字めを
CSSで作る！吹き出しデザインのサンプル19選
今回は、画像を使わずにHTMLとCSSだけで作るで吹き出しのデザインサンプルを紹介します。シンプルなものから、円形、会話形式、LINE風のものまで一挙にまとめました。HTMLとCSSはコピペして使うことができます。 レスポンシブ対応 以下で紹介する吹き出しデザインは（円形のものを除き）、文字が右端まで達すると、次の行へ折り返すようなレスポンシブ対応になっています。 使い方（初心者向け） CSSが反映されないときはこちら シンプルな四角い吹き出し4つ 最もシンプルな形です。三角形の位置を上下左右に配置したサンプルをそれぞれ紹介します。コードを見てもらうと「#e9edff」と書かれた部分が2カ所あると思いますが、これが背景色を指定するコードです。お好みで変えて頂ければと思います。 ちなみに下から伸びる三角形は疑似要素（before）で表現しています。興味のある方は下の記事に目を通してみてくださ
CSSで三角形を作る＆使用例（スマホ編）｜クロノドライブ
皆さんは、CSSだけで三角形のような図形を表現出来ることを知っていますか？ 調べてみると、三角形の作り方を解説している記事が沢山あります。 普通の三角形を作る方法は多くありますが、実際どのような場面で使うのかを解説しているものは、少ないような気がしました。 そのため、私が個人的にこんな場面で使えるのでは？といったものをまとめてみましたので、ご紹介したいと思います。 ～この記事の対象ブラウザ～ iOS5、iOS6、iOS7 Safari Android OS 2.3.3、Android OS 4.0.4、Android OS 4.1.1 標準ブラウザ ※PCでも表示はされていますが、動作検証は不十分なのでPCで使用する際は注意してください。 CSSだけで作ると何がいいの？ CSSだけで作ると、 色やサイズの調整が簡単に出来る。 画像分の容量を削減出来る。 スライスの手間が減る。 などのメリッ
コピペで簡単！CSSで作る装飾アイディア14個
モバイルファーストやらフラットデザインやらで、画像で装飾するよりも、チャチャッとCSSで装飾することが多くなりましたよね！というわけで、よく使いそうなもの（じゃないのも混じってますが）をいつでも簡単にコピペできるようにまとめてみました。 目次 CSSで飾りを作るポイント 見出し系の装飾 クラシック系二重線 クラシック系飾り罫 丸付き罫線 マルチボーダー風 パワポ風装飾 リスト系の装飾 チェックマーク プラスマーク 矢印 矢印付きリンク 矢印１ 矢印２ アイコン風 そのほかの装飾 NEW!リボン 紙を重ねた風の表現 ふきだし色々 CSSで飾りを作るポイント CSSで飾りを作るのに欠かせないのは、疑似要素とposition、transformの扱い。逆にココさえ押さえておけば、自分なりに色々な飾りが作れると思います！ 疑似要素:before & :after CSS装飾にとっても便利な疑似要素
box-shadowはもう古い？CSS新時代の「影の落とし方」
長い間Webデザイナーが愛してやまないものの1つに*「box-shadow（ボックスシャドウ）」*があります。 Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。 box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。 しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。 そこで本稿では、CSS新時代の影の落とし方につい
CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
一工夫でページのクオリティをアップするCSSとJavaScriptのソリューション集
Silverback Giveaway 一見、背景画像をCSSかJavaScriptで配置したように見えますが、CSSで普通に配置されたソリューションです。 テキストやリストが画像に重ならないように、marginを設定します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <h3>Contest Details</h3> <div class="imagery""> <img src="imagery.png" width="205" height="400" alt="Imagery" /> </div> <p>...the introductory paragraph...</p> <ol> <li>...various bullet points went here...</li> </ol> </textar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bodhi SEO
http://ideahacker.net/2013/07/26/5962/
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法
[CSS]実用的なものをはじめ、ちょっと使ってみたくなるCSS3の14のテクニック%26utm_content%3DGoogle%2520Reader)
css-lecture.com
超初心者のためのホームページ作成講座 - HTML - CSS - Mozilla Composer