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

css

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

Web > css 2017年10月17日(最終更新:1月前)

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

基本

div#box0-1 p:nth-of-type(3){
	color:#ff5555;
}
div#box0-2 p:nth-child(3){
	color:#5555ff;
}
div#box0-1

いと若うをかしげなる声の


なべての人とは聞こえぬ、

... 続きを読む »

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

Web > css 2016年3月22日(最終更新:1年前)

どもです。

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

このとき、サイトの幅を980pxにしておいて、
iPadで表示したときブラウザ幅980pxで表示されてくれると横スクロールが発生しない
ので良い。

のですが、このやり方がよくわかっていなかったというか、
僕はつい最近までできると知らなかったわけです。

やり方は、viewportの設定を

<meta name="viewport" content="width=device-width">

にするだけ。... 続きを読む »

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

Web > css 2015年12月9日(最終更新:2年前)

どもです。

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

参考サイト様
IT便利帳【蛍光ペン風にテキスト上をマーカーするCSSを設定してみた】

しかし、どうして蛍光ペンのように線が引けるのか、ぱっと見ただけではわからなかったので、
分析してみることにしました。

 

background:linear-gradient とは

そもそも僕は、linear-gradient というものに馴染みがありませんでした。
ので、調べてみると、どうやら線形のグラデーションを作るCSSということが判明。... 続きを読む »

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

Web > css 2015年11月11日(最終更新:2年前)

どもです。

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

メイリオと游ゴシックの比較をしてくださっているサイト様がありました
個人の所感としては、小さいフォントは不便そう。標準サイズ以降なら軍配が上がる感じですね。
メイリオには20px代の見栄えが悪いという致命的な弱点もあるので、基本的には游を使いたいなーと思いました。

しかも、游フォントには明朝体もあるんですね。
今までwinの明朝体にはHGS明朝Eを使ってましたが、確実性に自信が持てなかったんですよね。
webでキレイに見える明朝フォントが、基本導入されるというのは嬉しいです。かなり。

というわけで、font-familyも考え直す必要がありそうです。

この際なので、いまだかつて無く真面目にfont-familyを考えました。
なお、今回はWebフォントを使わない方向でやってます。

 

ゴシック編 -

... 続きを読む »

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

Web > css 2015年7月28日(最終更新:2年前)

どもです。

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

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

 

h270728-4

こっちがIEが反応してくれない書き方。

 

h270728-5

こっちがIEが反応してくれる書き方です。

 

正しいメディアクエリの書き方なんて今まで意識したことがなかったのですが、
二重括弧厳禁、必ずひとつごとに括弧を閉じることを以後は肝に銘じたいところです。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった 
... 続きを読む »

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

Web > css 2015年5月11日(最終更新:2年前)

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

 

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

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

h270511

普通の要素にborderを付ける場合、要素を囲む形でborderが配置される。
このとき、borderの切り口は隣接するborderの大きさとの比率に従って角度がつく(幅が同じなら45°)。
そのため、各borderの形状は台形になる。

要素の幅・高さが0になったとき、
h270511-2
台形の上辺が0になるので、borderの形状はそれぞれ三角形になる。

borderはそれぞれに大きさ・形状・色を指定できるため、1つを除いてborderを透明にする(transparent)ことも可能。
すると、
h270511-3
こうなる。三角形の完成。

要素のwidth、heightを0にするのが三角形の条件なので、擬似要素に限らず、空要素なら三角形は作れる。... 続きを読む »

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

Web > css 2015年1月6日(最終更新:2年前)

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

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

 

今回、iPad用Webシステムのコーディング修正を依頼されました。
自分で書いてないコーディングの修正は結構厄介ですが、概ね問題なく完了。

ただ一点、html,body:height:100%にしているのに僅かに縦スクロールしてしまう問題を除いて。

 

え、いや何故? Chromeで見たらちゃんと100%やん…

さぁて、躓いた。

PCのGoogleChromeで見ると、ちゃんと縦幅は100%です。... 続きを読む »

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

Web > css 2014年12月5日(最終更新:3年前)

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

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

親要素のwidthが決まっている場合、width:inherit;(親の数値を引き継ぐ)でイケる。
まぁ、親要素が決まってるならそのpx書けば良いだけだけど、その変動も考えるとinheritのが堅実。

しかし親要素もパーセンテージ指定だったら…。
width:想定される最大pxより大きな数値;でイケた。ちょっと驚いた。

どうやらtable-cellには親要素を絶対にはみ出ないという原則があるようだ。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (
... 続きを読む »

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

Web > css 2014年12月5日(最終更新:3年前)

どもです。

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

 

従来の方法

さて、画像の上下中央揃えをしたいのですが、これにハマりました。
HTMLの方を自由に調整できるなら、以前の記事で書いたやり方をすれば堅実です。

親要素{
display:table;
}
子要素{
display:table-cell;
vertial-align:middle;
}
... 続きを読む »

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

Web > css 2014年11月26日(最終更新:3年前)

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

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

 

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

僕はlist-styleでulを使うのがあまり好きではありません。
故に、普段はlist-style:noneにして、li:beforeで記号を入れているのですが、連番――つまりolを使いたいとなるとそうはいかなくなります。

仕方ないのでlist-style:decimalを設定したのですが、普段list-styleを指定したリストに慣れていなかったせいで躓いてしまいました。

list-styleで指定したハズの連番が表示されなかったのです。
要素を見る限りはきちんと表示されているハズなのに……

 

理由は親要素(ol)にありました。

ol:overflow:hiddenが設定されていたことが原因でした。... 続きを読む »