CSS

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆商用利用ＯＫの無料イラスト配布サイトまとめ１０選　（無料イラストIMT公式Blog 様）   ◆canvas ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆サブドメインとサブディレクトリのSEO対決、2014年の勝者はどちら？　（Web担当者Forum 様） サブディレクト ...

webデザイナー、フリーランス、社内web担当者の方などに役立つ記事をご紹介。 ◆jQueryでスクロールすると表示する系いろいろ　（webOpixel 様） 「スライドアニメーションして表示」は、「 ...

全角スペースを使ってインデントを付ける方法がありますが、CSSを使った方が後々文字数が増減しても修正の必要がないためおすすめです。 ◆HTML <ul class="textIndent"&gt ...

蛍光ペン・マーカーで引いたようなテキスト装飾をCSSで表現してみます。 ◆HTML マーカーで引いたようなテキスト装飾です。<br /> <span class="marker"&g ...

スマートフォンサイトで使えるアコーディオンを作ってみました。 ⇒ デモサンプルはこちら 「ul」と「li」タグで作っています。 cssのソースなど記載すると長くなるので、よろしければファイル一式を確認 ...

フッターのデザインで見かける、フッターエリアに「PAGETOP」ボタンを重ねるCSSを作りました。 ◆HTML <div id="footerWrap"> <div id="foot ...

CSSを使い、ラインの両端にグラデーションをかけます。 単純な線ではなく、端にいくにつれ徐々にフェードアウトしていく感じがちょっとおしゃれ。   ◆HTML <hr class=”li ...

全ての要素に対してスタイルを適用させるユニバーサルセレクタ(*)がありますが、これは使用を避けた方がよいと言われています。 理由としては元々のスタイルに対しても影響を与えてしまうようで、特にフォームに ...

「box-shadow」はCSS3のプロパティで、ボックスに影を付けられます。 指定方法は、水平方向・垂直方向・ぼかし・色の順になっています。 サンプルでは、paddingやborderなどもろもろ調 ...

通常、スクロールバーの表示は、ページの長さによって自動的に表示・非表示になります。 そのため、ページによってはスクロールバーの有無により、その分だけ画面の横幅がズレてしまいます。 これは、常にスクロー ...

「text-shadow」はCSS3のプロパティで、テキストに影を付けられます。 「text-shadow」の後のスペース区切りで横方向、縦方向、影のぼかし半径、影の色を指定できます。 また、カンマ（ ...

「:nth-child()」はCSS3のセレクタで、ある要素内で最初からn番目にスタイルを適用させることができます。 CSS3のためIE8まで対応していないようです。   例として、下記はリ ...

first-childとlast-childはCSS3のセレクタで、ある要素内の最初と最後にスタイルを適用させることができます。 特にリストを使用する場合に使えそうなのですが、CSS3のためIE8まで ...

ul liを使った、縦並びのメニューリストサンプルです。特徴としては下記になります。 ・メニューボタンはテキスト形式 ・ボタン領域全体にリンク設定（マウスオーバーで色を変える） ・テキストリンクの横に ...

dt ddの定義リストを横並びにするHTMLとCSSのサンプルです。   ◆HTML <dl class="sample"> <dt>テキスト</dt> ...

画像の横にテキストを表示した場合、テキストの量が多いと画像の下に文字が回り込んでしまいます。 それを回避するコーディングです。 このようなイメージです。   ◆HTML <div cl ...