by shigemk2

当面は技術的なことしか書かない

CSS

font awesomeについて今更

CSS

fortawesome.github.io 本当に今更です。アイコン系のCSSのパッケージみたいなもの。

いろいろ悩む動的にlink追加

CSS

動的にlinkタグを追加したい。そんな話。jQueryを使わずに。 When is a stylesheet really loaded? / Stoyan's phpied.com link.onload link.addEventListener('load') link.onreadystatechange setTimeout and document.styleSheets などなど。ブラウザによ…

CSSの箇条書き部分カスタマイズ

CSS

スタイルシート[CSS]/リスト/マーカーの種類を指定する - TAG index Webサイト ul { list-style-type: square; } ol { list-style-type: upper-alpha; } これがnoneだったら、何も表示されない。

CSSで三角形を作りたい人生だった

CSS

諸々の詳細は割愛したい width: 0; height: 0; border-top: 80px solid black; border-right: 450px solid black; border-bottom: 80px solid transparent; border-left: 450px solid transparent; CSS3 text-shadow box-shadow の使い方 | CSS Lecturewww.c…

CSSまわりでpre codeとか等幅フォントとか

CSS

pre code 中でコードを書く。 <pre><code></code></pre> pre要素で折り返しをするためのCSSwww.koikikukan.com cssで等幅フォント font-familyあたり。 pre, code, var, samp, kbd, .mono { font-family: Consolas, 'Courier New', Courier, Monaco, monospace; font-size: 14px; lin…

CSSプリプロセッサとは

CSS

CSS拡張メタ言語とも呼ばれ、現在のネイティブなCSSが持たない機能を有する。 具体的には関数、演算、関数など。

CSSの文字コードについて

CSS

文字コード宣言は行いましょう(CSS) - Web標準普及プロジェクト CSS2 syntax and basic data types CSSは先頭に文字コードを指定する箇所があって、 @charset "EUC-JP"; 文字コード宣言がなかったり間違っていたりすると、CSS自体が読み込まれないという展開…

rainbow-modeでCSSに色付け

Emacsで #f95327 などの文字列に色を付けておく - Qiita package-installでrainbow-modeを入れる。 (require 'rainbow-mode) (add-hook 'css-mode-hook 'rainbow-mode) (add-hook 'scss-mode-hook 'rainbow-mode) (add-hook 'php-mode-hook 'rainbow-mode) (…

スプライト

CSS

CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス スプライトとは、複数の画像をひとつにまとめて、CSSでポジションを指定することにより表示させるCSSの技のひとつ メモ。

きれいに書くこと

CSS

section.point1 { } section.point3 { } section.point1 div.pattern li{ } section.point1 div.pattern ul{ } section.point4 { } section.point2 { } って書くと、読みづらいので、順番だてて書く section.point1 { } section.point1 div.pattern li{ } se…

textareaフォームのリサイズ機能をやめる

CSS

textarea のリサイズ機能を止めてみる - CSS HappyLife textarea#hoge { resize: none; } とするとよい。

border-radius1つだけ指定

CSS

border-radius-CSS3リファレンス border-radiusって最大8つの値を指定できるけども、ひとつだけ指定することもできる。下の画像を見てみると… 上はborder-radius: 6pxで、下はborder-radius: 20px 値が大きくなれば大きくなるほど、丸みを帯びていく。 ソー…

overflow のデフォルト値

CSS

visible。CSS Overflow | CSSPRO

opacity vs rgba 細かな違い

CSS

ええ、opacityとrgbaの大きな違いは、以下のエントリーに書いています。 CSSで半透明、opacityとrgbaの違い - ぼくはまちちゃん!(Hatena)opacity 画像も文字も透明にし、なおかつ子要素すらも透明にする(このカジュアルさが便利なときもあれば、致命的に不…

div > aみたいな使い方

CSS

意外と知らない!?CSSセレクタ20個のおさらい|Webpark セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。 と書かれております。 <html lang="ja"> <head> <meta charset="utf-8"> <title>hoge</title> <style type="text/css"> div.sample > a {color: red;} ul > li {font-size: 150%;} </style> </head> <body> <div class="sample"> <a>日本一…</a></div></body></html>

一つのCSSに背景画像を複数設定する

CSS

CSS3で一つのCSSに背景画像を複数設定するひとつのCSSに複数の画像を設定することが出来ます。 コンマ区切りでそれぞれの画像の位置やリピート、サイズを別々に指定することも出来ます。 なお、先に書いた方が上に表示されます。 background-image: url(../i…

疑似要素とz-index

CSS

疑似要素にz-indexをつけると、疑似要素を背面にしたり前面に出したりできる。HTML <html lang="ja"> <head> <meta charset="utf-8"> <title>HOGE</title> <link rel="stylesheet" type="text/css" href="./hoge.css"> </head> <body> <div class="hoge"> <div class="fuga"></div> </div> </body> </html> CSS body { background-color: rgb…

counterのちょっとアレンジされた使い方

CSS

隠れファンが全国7万人くらいはいるであろうcounterプロパティについて。 counter-reset−スタイルシートリファレンス上記サイトのサンプルコードはこんな感じです。 cssソース dt.sample1:before { counter-increment:sample; content:counter(sample) "位 "…

LESSファイルをリファクタリングしてみよう

たとえばこんな感じのあるページのCSSがこのように書かれていたならば、 p.out { ... } div.out { ... } div.in { ... } LESSならこんな風に書いてブロックで完結させることが可能だ。 body.one-page { div.out { ... } div.in { ... } } body.two-page { p.…

table-cellにおけるheight

CSS

table-cellの説明はこちらにお任せします CSS「display: table」と「display: table-cell」で出来ること | アイビーネットblogテーブルの構造を表現することの出来るプロパティで、 これを使ってテーブルや横並びを表現できるんDAそう、こんな風に。 ソース…

beforeやafterで背景画像を使うときは

CSS

a.hoge:before { content: ''; background:url(../img/img_hoge.png) 0 0 no-repeat transparent; position: absolute; top: 10px; left: 14px; /* width: 10%; */ /* height: 100%; */ background-size: 8px 9px; } contentの記述が必須のようです。 conten…

CSSが当てられる優先順位について知っておきたい3つのこと

CSS

「文法は間違っていないのに、書いたCSSがきちんと反映されないッッ」 ということはCSS使いにはよくあると思う。なんだか永遠の課題のような感じがするけども、たぶんそうでもない。よ。 3つのルールを知っておけば、CSSについてはOKさ。 数を比較してより多…

ページごとに同じ場所を違う色にする

たぶんwordpressあたりで使える技術なんじゃないだろうか。ナビゲーションのリンク部分をページによって違うようにする方法について。 body.happy header nav.global ul li a { background-color: #FF00FF; } body.sunny header nav.global ul li a { backgr…

a[href=""]

CSS

とほほのスタイルシート入門(基礎知識) a[href=$=".html"] { color: red; } // aタグのhref属性が.htmlで終わる要素にマッチする [href$=".html"] { color: red; } a[$=".html"] { color: red; } // aタグのhref属性が.htmlで終わる要素にマッチする a[href=…

マウスカーソルの形状を変える

CSS

普通imgタグの部分にカーソルをあわせてもマウスカーソルの形状は変わりませんね。 imgタグにカーソルを合わせてたらリンクにカーソルをあわせたように「手のかたち」にしたいときは、 以下のようにかきます。 img:hover { cursor: pointer; } なお、cursor…

ウィンドウ幅にかかわらずグローバルナビを改行しないようにしたい

CSS

ウィンドウ幅を小さくするとグローバルナビが改行されてなんかいやな思いをしたことがあるよね。 そういうときは、white-spaceを使うといいですよ。 white-space: nowrap; white-space−スタイルシートリファレンスもともとは、 white-spaceプロパティは、ソ…

相対値と絶対値

CSS

CSSで長さを指定するとき、相対指定と絶対指定がある。 %やemは相対指定で、pxやpointは絶対指定となる。ブラウザや拡大縮小などで見た目が変わるのが相対指定で、 ブラウザが変わっても拡大縮小しても見た目が変わらないのが絶対指定である。PCにはフォント…

css @import vs less @import

あのサイトが@ importを使わない理由|WEB Drawercssファイルで外部スタイルシートを読みこむ方法には以下の方法がある。 @importを使う方法ですね。たとえば、hoge.cssというファイルに @import "reset.css"; @import "fonts.css"; @import "default.css"; …

隣接する要素に適用するとおかしなことが起こった 後篇

CSS

そもそも前回何をしようとしたかを 全然説明していなかったが、3つ飛ばしとかで下線を表示させないようにしたかったのよ。こんなふうに。 でも前回の方法だと上手くいかなかったので、このようにCSSを書きました。 div.hoge:nth-of-type(3n) { border-bottom…

隣接する要素に適用するとおかしなことが起こった 前篇

CSS

意外と知らない!?CSSセレクタ20個のおさらい|Webpark 別におかしかねーだろっ気もするけど。隣接する要素に適用するときは + を使う。 h4 + p { color:red; font-weight:bold; } というわけで、こういう風に応用してみたわけですが、 body { width: 300px; …