by shigemk2

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

CSS

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

CSS

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

overflow hiddenでマスキングっぽいことをしてみる

CSS

overflow は、要素からはみ出た部分をスクロールさせるようにするか、 表示しないようにするか決めることが出来る。 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="out"> <div class="in" style="left: 50px;"></div> </div></body></html>

カラーサークルをCSSで作ろうとしたけど挫折した 完結篇

CSS

前回 カラーサークルをCSSで作ろうとしたけど挫折した 後篇 改め カラーサークルをJavaScriptで作った - by shigemk2なんか、このエントリーにコメントが来ていたので、読んでみると、 これ http://www.webcyou.com/?p=974 を使って三角形を円状に並べた上で…

カラーサークルをCSSで作ろうとしたけど挫折した 後篇 改め カラーサークルをJavaScriptで作った

前回で、CSSでカラーサークルを作るのは不可能、というか面倒すぎるということが判明したので、JavaScriptで作成することにしました。というか、もうタイトルは「カラーサークルをJavaScriptで作った」でいいんじゃね?という気分だ。*1JavaScriptでカラーサ…

カラーサークルをCSSで作ろうとしたけど挫折した 前篇

CSS

カラーサークルというのがあります。 Colors.appのスクリーンショットこんな感じじゃなくって、もっとはっきりした、例えて言うなら「とてもカラフルな円グラフ」をCSSのみで作ろうと思ったんです。 簡単に言うと、こんな感じのカラーサークルをCSSだけで作…

CSSで円を描こう

CSS

HTMLはこう書いて、 <html lang="ja"> <head> <meta charset="utf-8"> <title>Circle</title> <link rel="stylesheet" type="text/css" href="./css/circle.css"> </head> <body> <div class="circle"><div class="inner-circle"></div></div> </body> </html> CSSはこう書くと、 .circle { border: solid 1px black; bor…

vertical-align

CSS

vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用する。縦に中央揃え。 #hoge { vertical-align: middle; } 画像の下にスキマが出来るときの対策 h1 img { vertical-align: bottom; } なお、デフォルトはba…

hoverのバリエーション

CSS

css-cheet/hover-with-big-image at master · shigemk2/css-cheet · GitHubこんな感じの画像を用意し、 CSSで、 「通常時は左半分、ホバー時は右半分のみを表示させる」ように出来る。CSSはこのように書いたらいいね。 div.container a{ display: block; wid…

display

CSS

displayプロパティは、ブロックレベル・インラインレベル等の、要素の表示形式を指定する際に使用します。 例えば、インライン要素のなどに display:block を指定すると、ブロック要素として表示されるようになります。 display: blockすると、タグとかのイ…

特定の子要素をピンポイントで適用する

CSS

:nth-of-type()疑似クラス (E:nth-of-type(n))|セレクタ|CSS HappyLife ZERO :nth-of-type()疑似クラスは、ある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルをあてる。他にも :nth-child(1) で1番目の子要素 :nth-of-type(1) でこれま…

HTMLを作成しつつ、CSSを書くための手順

HTMLを書くにあたっての大まかな注意 HTMLがあって、CSSがあたり、webページになる そのため、まずHTMLから書く。本来レイアウトはどうでもよくて、HTMLが本当に正しいものになっているかが重要である。 CSSのあたっていないHTMLを上から読んで意味が通じる…

CSSのデバッグテクニック

CSS

CSSを修正しているわけですが、 どこのCSSを修正してるのか分からなくなるときがあるよね。たとえば、要素Aを修正しようとしたら、見当違いの場所を修正してしまったということが たまにあるよ。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Hoge</title> <link rel="stylesheet" type="text/css" href="./example2.css" /> </head> <body> <article class="hoge"></article> </body></html>

olを使わずに要素に通し番号を振る

CSS

counter-increment CSS 生成内容要素に連番を振るにはolを使うことが多いと思われますが、 counter-incrementプロパティは contentプロパティで、追加されたカウンタ(連番)の値を進めることができます。 CSS2.1から使えるようになりました。カウンタは、「…

複数の方向にtext-shadowしてみる

CSS

基本的なtext-shadowの使い方はこちらに譲るとして… text-shadow-CSS3リファレンス基本的にtext-shadowは一方向にしか使えません。 ぼかしまくってごまかすという手もありますが。結局こういう風にしかならないので、根本的な解決にはなっていません。 実を…

>

CSS

意外と知らない!?CSSセレクタ20個のおさらい|WebparkE > F (子要素にのみ適用) セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用する。 (孫には適用されない) div.sample > a { font-size:18px; font-weight:bold; } <div class="sample"> <a href="#">リンク1<a/> <ul></ul></a/></a></div>…

複数のddとかliに別々にCSSを当てる

CSS

そんなに難しい話じゃないけど、 とりあえずのメモ。liやclassに、別々の名前のclass(もしくはid)を当てたら、 CSSでも別々のものを当てることができるよね。

less.watch();

Less.js Will Obsolete CSS · Dmitry FadeyevlessコードをHTMLページに反映させる。 <script src="./js/less-1.3.0.min.js"></script> <script type="text/javascript"> less.watch(); </script>

CSSで三角形を作ってみよう

CSS

ポイントは、borderの各辺の形。 <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="./ex5.css" /> <title>Hoge</title> </head> <body> <div class="ochi"> </div> </body> </html> たとえば、以下のようなcssを設定すると、各辺のborderがどのような形となっているかが分かる。 div.ochi { width: 100px; height:…

CSSで吹き出しを作ってみよう

CSS

普通に画像を仕込んでもよさそうなものですが、 敢えてCSSで吹き出しを作ることに挑戦してみた。こんな感じのHTMLがあったとしましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="example2.css"> <title>Hoge</title> </head> <body> <article class="hoge"> <p>おはぎ</p> </article> </body> </html> そしてこのようなCSSを…

display: inlineで余白が出来る

CSS

Fighting the Space Between Inline Block Elements | CSS-Tricks <ul> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul> 横並びにしたいときはdisplay: inlineをやると、 li同士に空白が出来るときがある。これの対策として、 li同士で改行しない を改行する li…

Homebrewを使ってLESSを導入してみよう

Emacsユーザーのための LESS 導入。 - 日々、とんは語る。 Page not found · GitHub Pages LESSとは LESSとは、CSSメタ言語と呼ばれるもので、LESS の他に Sass(SCSS) と呼ばれるものがあります (SassとSCSSはちょっとだけ文法の違う兄弟みたいなもの)。こ…

width のパーセンテージ

CSS

こんな感じのHTMLがあったとしましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>Ex2</title> </head> <link rel="stylesheet" href="./example2.css"> <body> <div class="e1">ゆ</div> <div class="e2">り</div> <div class="e3">し</div> <div class="e4">ー</div> <div class="e5">大</div> </body></link></html>

float: left でナナメになる怪

もうソースコードを見たら原因がまるわかりなんだけどね。 このようなコードを書いて、 <html lang="ja"> <head> <meta charset="utf-8"> <title>Ex2</title> </head> <link rel="stylesheet" href="./example2.css"> <body> <div class="e1">あ</div><br> <div class="e2">い</div><br> <div class="e3">う</div><br> </body> </html> このようなCSSを書きます。 …

アニメーションをCSSでやるかJavaScriptでやるか

指定したセレクタのアニメーションはCSSだけでよいが、 指定したセレクタをキーにして別のセレクタをアニメーションするときは JavaScriptを使う (子要素をhoverしてアニメーションすることは可能)なお、JavaScriptのアニメーションはCPUを使うが、 CSSのア…

overflow

CSS

はみだしたブロック(インライン)の処遇について扱うときは overflow: を使う隠すときはhidden スクロールさせるときはscrollなど。

外のブロックと内のブロックのサイズが違うとき

CSS

そんなときは、外のブロックが優先される。

セレクタをまとめられるところはまとめてしまったほうがメンテナンスしやすい

CSS

たとえばcssでこんな風に書かれていたら、 article.hoge h1 { border-left: 0 color: #333; font-size: 100%; margin-bottom: 77px; padding: 777px 777px; } article.hoge h2 { border-left: 0 color: #333; font-size: 100%; margin-bottom: 77px; padding…

CSSはコードを書く順番に寛容である

CSS

CSSはコードを書く順番に寛容なので、 書く側でルールを決めておかないと すごく読みづらくなる。

CSSの各部名称について(超基本)

CSS

指定された要素の部分をセレクタ、 括弧で囲まれた部分をブロック ダブルコロンの前をプロパティ ダブルコロンの後をバリューという。 セレクター (ブロック){ プロパティ:バリュー; } なお、cssのルールはあとから出たほうが優先され、 cssは上書きされる。

底辺に点線の罫線を描画する

はてなの **は小見出しで、属性はh4になります。 .h4 { border-bottom:dotted 2px #000000; } と書くと、 こんな感じ で表示されます。border-bottom: 底辺の罫線を取り扱うプロパティ dotted: 点線 #000000 黒ですね。