文字下げを考慮したリストマークはflexと疑似要素で作るのが良いと思う | q-Az

2017/10/29 30 users Flex text-indent q-Az CSS 疑似要素

CSS の li 要素にあるリストマークプロパティは現状使いにくいのですが、リストマーク的なものを疑似要素とflexを使って作る方法です。 text-indent を駆使して昔はやってましたが使わずとも文字下げ可能です。 flexと疑似要素を用いたリストマークのサンプル まずはサンプルです サンプル1 テスト文章 テスト文章 テスト文章 テスト文章 HTML <ul class="markList... 続きを読む

[JS]タッチデバイス対応、ミニマルなデザインながら高機能なスライダーを実装するスクリプト -Iory | コリス

2015/04/09 78 users コリス イージング ミニマル スライダー スクリプト

デモページ：Custom Easings イージングのエフェクトをカスタマイズしたデモ。 Ioryの使い方 Step 1: HTML HTMLはシンプルで、各パネルをリスト要素で実装し、divで内包します。 <div class="slider js_simple simple"> <div class="frame js_frame"> <ul class="slides js_slides">... 続きを読む

擬似要素とCSS3を使ってリストメニューを楽しくデザイン｜Webpark

2013/07/22 121 users Webpark Ｔｒａｎｓｉｔｉｏｎ jQuery 擬似要素

画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a... 続きを読む

[CSS]画像無しで、両端にいくにつれ薄くなるラインを描くテクニック | コリス

2012/03/22 328 users コリス Container 両端 item CSS

実装 全コードはデモページに記載されているので、ここではラインのスタイルをピックアップします。 HTML マークアップはシンプルなリストで、ul要素にclassを指定するだけです。 <ul class="container"> <li>First list item</li> <li>Second list item</li> <li>Third list item, etc.</li> </ul... 続きを読む

jQueryでスクロールすると上部に固定されるナビゲーション | webOpixel

2012/02/21 649 users jQuery webOpixel NAV clearfix

グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HO... 続きを読む

[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル | コリス

2012/01/12 375 users コリス lorem Ipsum Opera チュートリアル

下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="s... 続きを読む

[CSS]シンプルなHTMLでタブを角丸にするチュートリアル（イラスト付き） | コリス

2011/09/06 113 users active コリス TWO チュートリアル CSS

シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。 HTML HTMLは非常にシンプルで、リスト要素で実装しています。 <ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a ... 続きを読む

[CSS]画像を使用しないでApple風のパンくずを作成するチュートリアル | コリス

2010/11/03 601 users コリス 色相 class チュートリアル CSS

階層を区切る三角のデザインが特徴的なApple風のパンくずを同一の色相でカラーリングしたものを実装するチュートリアルを紹介します。 三角の箇所は画像を使用しないで、CSSで実装されています。 HTML -マークアップ パンくずはリスト要素で実装します。 シンプルでクリーンに実装するために、各アイテムにはclassを使用しません。 HTML <ul class="breadcrumb"> <li><... 続きを読む

[使えるCSSテクニックVol.2] CSS を使った見栄えの良いページャー | バシャログ。

2008/11/10 617 users バシャログ 見栄え CSS pager Prev

第 3 回目は「見栄えの良いページャー」です。 シンプルなコーディングで見栄えの良いページャーを実現します。 XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li class="prev"><a href="hoge">« PREV</a></li> <li><a href="hoge">1</a></li> <li><em>2</em></li> ... 続きを読む

CSSでよく使う装飾定義をclass名でまとめることについて - 徒書

2007/01/26 97 users CSS 徒書 class名 inline TAB

2xup.orgのCSS でよく使う装飾定義をコンポーネントとしてまとめるという記事を読んだのですが、挙げられているHTMLの例を見てみて、「いやいやその方向性は無しでしょう」と思ったのでした。何故かといえば、 リストをインラインで表示するために <ul class="inline"> ナビゲーションリストをタブのように表示するために <ul class="tab"> という書き方をしていたので。... 続きを読む