ど素人から毛を生やす。<延>

css

selectタグ、中身が半角と全角の場合で位置がズレる問題。

どもです。
些細なことですが、ハマったので備忘。

... 全文を読む »

select要素を「できれば」右揃えしたかったメモ。

どもです。

中身が数字のプルダウン。できれば右揃えにしたいところです。
しかし、select要素はtext-alignが効きません。

HTMLやCSSを駆使して無理やり作る方法はggると色々紹介されていますが、本件はそこまで頑張りたくない。
できれば、くらいの心持ち案件なのです。... 全文を読む »

CSSで円錐台を作りたい。

どもです。

CSSで台形を作るのは、borderを使えば簡単です。
原理は以前に書きましたCSSで三角形を作るのと同じで、borderの一辺のみを表示させればOK。... 全文を読む »

CSSだけで要素を裏返すアニメーションを実装する

どもです。
所用でツールを作っていたときに、コインが裏返るようなアニメーションが欲しかった。

というわけで実装してみました。

シンプルに裏返す


<div 
... 全文を読む »

floatなボタンを下揃えしようとしたら思いのほか苦戦した話。

どもです。
フォームのCSSは永遠の課題感あります。

インラインブロック要素であるボタンが2つ以上並んでいて、サイズが違うものがある。... 全文を読む »

tableのwidthを定めても、中の要素に押し広げられてしまう件

どもです。

テーブル要素を使うとき、多くはcolgroupを使用して、セル幅を指定します。

例:


<table>
	<colgroup>
		
... 全文を読む »

:nth-of-typeとクラス等の属性

どもです。
ちょっと:nth-of-typeが思った挙動と違うことになったので、
:nth-of-typeとクラス等の属性の関係について、検証です。

基本

div#box0-1 
... 全文を読む »

レスポンシブだけどiPadはPCサイト幅980pxで表示したいときのviewport

どもです。

レスポンシブサイトをコーディングするとき、
PCとiPadとスマホでそれぞれブレイクポイントを用意するのが理想です。
が、予算やデザインの関係でiPadはPCサイトを表示にすることも多くあります。

このとき、... 全文を読む »

CSSで文字に蛍光マーカーを引く技術を考える

どもです。

お客から貰ったデザインにて、文字にマーカーが引いてあるところがありました。
擬似要素使って色をずらし敷く必要があるかな?と思いましたが、
調べてみると、background:linear-gradient を使ってマーカー風に背景を引く技術が紹介されていました。... 全文を読む »

win10やAndroidを踏まえながら2015年版font-familyを考える

どもです。

Windows10から「游」フォントがデフォルトに追加されたそうですね。

メイリオと游ゴシックの比較をしてくださっているサイト様がありました
個人の所感としては、小さいフォントは不便そう。標準サイズ以降なら軍配が上がる感じですね。... 全文を読む »

レスポンシブのCSSがIEでだけ効かないとき

どもです。

PC優先のメディアクエリでレスポンシブサイトのコーディングをしていたのですが、
ChromeやFirefoxではスマホ状態にしても万全に表示されるのに、IEだけ画面を縮めてもPCの表示になってしまう事件がありました。

この原因ですが、メディアクエリの書き方ひとつだったので忘備録がてら。

 ... 全文を読む »

擬似要素を使って三角形をつくるまとめ。

どもです。
今更感漂う、擬似要素で三角形まとめ。

そもそもどうして擬似要素で三角形が作れるのか

A. 高さ・幅が0の要素にborderをつけると、それぞれが三角形になるから。... 全文を読む »

iPadでブラウザの高さ100%が100%にならない件

新年明けましてどもです。

最近ナゾノクサ系が愛しい餅。です。
キレイハナも慣れると可愛いなぁ。
但しクサイハナ、おめーはダメだ(´・ω・`)

 ... 全文を読む »

display:table-cellでwidth:100%に設定したいとき

どもです。
久々の連続更新(゚∀゚)

要素を手っ取り早く上下中央揃えにしたいとき、親要素のdisplayをtable-cellにするのが楽ちん。
でも、display:table-cellはwidth:xx%が効かない罠。

親要素のwidthが決まっている場合、width:inherit;(親の数値を引き継ぐ)でイケる。... 全文を読む »

画像の上下左右中央揃えができないときの最終手段

どもです。

この仕事始めて一年半弱。またコーディングで詰まりました。

従来の方法

さて、画像の上下中央揃えをしたいのですが、これにハマりました。
HTMLの方を自由に調整できるなら、... 全文を読む »

list-styleが表示されないときに確認すること

どもです。
ポケモンΩルビー、草タイプ縛り中の餅。です。

マグマ団も怖いけど、飛行タイプがこれまた怖い。

今回はコーディング中にちと蹴躓いた点をば。

僕はlist-styleでulを使うのがあまり好きではありません。... 全文を読む »

新規コーディングのとき、CSSは大体これだけ設定しておけば良い気がする。

どもです。
新規コーディングの際、取り敢えず設定するCSSは何でしょうか。

リセットCSSとかありますが、僕は使わない派。
いちいちアップしてリンク繋ぐのが面倒なのと、要素を虱潰しにリセットするせいで親子関係が殺されることがあるのが嫌なので。

とはいえ、リセットCSSを使わないなら自前でリセットしなければなりません。... 全文を読む »

サイトコンテンツの幅よりブラウザ最小サイズの方が小さく設定されたサイト

どもです。
近頃めっきり肌寒い餅。です。

今日はCSSについて。

サイトトップのコーディングを依頼されたので、渡されたPSD通りに作りました。
ただ、サイト幅が1400pxって少々広すぎやしないかと思っていたのですが…... 全文を読む »

text-shadowについて考える

どもです。
今回は、文字に影をつけるCSS「text-shadow」について、ちょっと考えてみます。

まずは基本から。

 

text-shadow:
... 全文を読む »

フェイスブックのサイト貼り付けで幅100%にする方法

2015.05.22追記
Facebookのサイト貼り付けの仕様が変わり、幅100%が正攻法ではできなくなってしまいました。詳しくはこちら

 ... 全文を読む »