(佐賀→熊本)マークアップエンジニアのググる生活

地方のWEB制作会社で働く、フロントエンドエンジニア。
HTML、CSS、JavaScript(jQuery)、PHP、Smary、EC-CUBE、WordPress、Movable Type等々で解らない時に、Googleで検索したら解決した話や、「閃いた!」などをほとんど自分用にメモとして残すブログです。

※URLがあったら元記事を参照推奨です!
※ほとんどの事は検証はしていますが、あくまでも参考程度にお願い致します!
※記載が不正確であったことにより生じたいかなる損害に関しても、当ブログは責任を負いかねます。自己責任でよろしくおねがいいたします。

カテゴリ: CSS

css の box-shadow は inset を指定すると、内側に影を付けれる便利なものだが、
子要素に background-color などで背景色を指定すると、
その背景に重なり順で負けてしまい、影が途切れる問題に直面しました。

そこで子要素の疑似要素を活用してみたところ、うまく問題を回避できました。

サンプル(parent-elements-box-shadow-inset-in-child-elements-background.html)

min-height - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/min-height

min-height の初期値は「0」ですが、
最近のブラウザでは「auto」でもなるようです。

私のwindows10のfirefox、chrome、IE11、Microsoft Edgeでは、
「auto」でも有効でしたが、
iPadで確認したときに値が認めてもらえず無効になっていました。

やはりきちんと仕様通りに書かねばなりませんね。

下記の様な場合、
親要素にclearfixのbefore、afterがあったらmac環境だとカラム落ちが発生しました…。
単純にfloatやinline-blockからflexへの移行の際に消し忘れたのですが、
はまってしまったのでメモ!


赤色の所がいらない。

<!DOCTYPE html>
<head>
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      clear: both;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      list-style: none;
    }
    ul:before,
    ul:after {
      content: "";
      display: table;
    }
    ul:after {
      clear: both;
    }
    li {
      background-color: #f0f0f0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      width: 50%;
    }
    li span {
      display: block;
    }
    li:nth-child(1) span {
      background-color: red;
    }
    li:nth-child(2) span {
      background-color: blue;
    }
    li:nth-child(3) span {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
    <li><span>html</span></li>
    <li><span>PUBLIC<br>PUBLIC</span></li>
  </ul>
</body>
</html>

stackoverflow にも何件もスレッドがありましたが、
中々良さそうな答えに巡り合えずに断念しそうになりましたが、
下記のスレッドで解決出来ました!

http://stackoverflow.com/questions/29149904/display-flex-in-chrome-with-100-height-of-child-elements

子要素にも display: flex; が必要とのこと。

<!DOCTYPE html>
<head>
  <title>test</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      list-style: none;
    }
    li {
      background-color: #f0f0f0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      width: 50%;
    }
    li span {
      display: block;
    }
    li:nth-child(1) span {
      background-color: red;
    }
    li:nth-child(2) span {
      background-color: blue;
    }
    li:nth-child(3) span {
      background-color: green;
    }
  </style>
</head>
<body>
  <ul>
    <li><span>DOCTYPE<br>DOCTYPE<br>DOCTYPE</span></li>
    <li><span>html</span></li>
    <li><span>PUBLIC<br>PUBLIC</span></li>
  </ul>
</body>
</html>

table-header-groupを使用しているところに、
opacityを0にしてふわっとさせたかったけど、
IEだと上手くtransitionしてくれずにdisplay none/blockの様に一瞬で表示非表示の状態になってしまったので、
table-header-groupを諦めたところ、きちんと変化してくれました。

また table-header-group の中に子要素を作ってそこで変化の指定をする方法でも
上手く行ったのでメモしておきます。

初めてタイトル通りなバグに遭遇して、ググッても出てこなかった。

このバグの条件として
・position指定の親(<nav/>)relative 子(<ul/>)fixedのヘッダー固定式
・子fixedの中にドロップダウンメニュー
・同ページにvideo要素かgoogleマップがある
・1ページ程スクロールさせる

上記のようなページをchromeで閲覧すると、
ドロップダウンメニューの中身が消えたり、hover cssが無効になったりの
現象が起こった。

解決策として
親(<nav/>)relativeも fixedにしてみると直った。

毎回悩むんです。
本当に、何年やってんだ!!って自分で思いながら。

また次の案件で悲しみに包まれないように、
今からでも殴り書きでいいので書いていこうと思います。
(気が向いたら更新するつもり)

昔はキャメルケースだの、アンダーバーだの色々試してましたが、
先月あたりから単語と単語はハイフンで繋ぐ形式に移行しました!
ので、以下の記述はハイフンさん大登場です。
理由はCSSのプロパティ名とか値とかもハイフンですし、data属性とかもハイフン、最近のjavascriptフレームワークも独自属性にハイフン使っているので、統一してみました。
統一感があるとすごいね、とても見やすくなりました!我ながら単純である。

ではでは、あまり期待をせずに参りましょう ┌(・。・)┘ ドドドドドド
※あくまでも一例です。
※改善したいけどとりあえずってのが結構あります。助けてくれ!


■site-(そのサイトの揺るぎないclass、またはid)

site-wrapper

site-header
site-logo
site-nav-global
site-nav-language

site-contents
site-main

site-footer
site-nav-footer


■ico-(アイコン、連番が良いのか名前つけた方が良いのか教えてほしい)

ico-arrow-red-top(この辺汚いので何とかしたいぞ!)
ico-arrow-red-right
ico-arrow-red-bottom
ico-arrow-red-left


■btn-(ボタン)

-背景画像
btn-nav-add
btn-nav-remove
btn-nav-success
btn-nav-failure

-テキスト
btn-txt-red(色の名前ってダメかな???)
btn-txt-white
btn-txt-black


■group-(グループ)
group-about
group-product
group-cart
group-contact
group-form
group-form


■grid-(グリッド)
CSSフレームワークで良くあるやつ!
最近は Pure がお気に入りです。
grid-u-1
grid-u-2
grid-u-3
grid-u-4
grid-u-5


■ttl-(タイトル)
他のノードの入れ子になっていたら文字が、
小さくなるなどの処理を入れると扱いやすさアップすると思います!
ttl-cool
ttl-primary
ttl-h1
ttl-h2


■txt-(テキスト)
txt-note
txt-decoration
txt-attention


■form-(フォーム)
input-text-normal(inputの時はtxtにせずに、textにした方が良いのか悩み中...)
input-text-mail
input-text-password
input-text-tel

input-check-normal
input-check-cool

input-radio-normal
input-radio-cool




書いた日:2014年10月20日(月)18時55分
記事と関係の無いただのメモ:hero > section > group > team > unit

最近 float での横並びをあまり使用せずに、
inline-block を使って横並びを実装するのが私の中で話題に!

float では高さの違う横並びをする時は、親要素で囲ってあげないと行が増えた場合に上下が揃わなくなったりするので、今まで面倒でしたが、inline-block を使用することで快適に。

ただその際に要素と要素の間に空白が出来てしまいます。
html を工夫して消すことも出来ますが、可読性が著しく低下するので、
css をもっと工夫して消しましょう!

親要素 {
display: table;
letter-spacing: -1em;
width: 100%;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}


こんな感じで。

だがしかし! 親要素に display: table; が使えない時には

親要素 {
letter-spacing: -0.285529em;
}
子要素 {
display: inline-block;
letter-spacing: 0;
vertical-align: top;
}

な感じでも対応できます!

-0.285529em; は割と細かく検証してみました。

スマートフォンサイト構築中にて。

フリック操作を

$(this).animate({left : this.slideX}, 300);

から

$(this).css('-webkit-transform','translate(' + this.slideX + ',0)');

に変更したんです。

ん、んん~・・・うごかない・・・。



悩む事しばし、

・・・あ!

$(this).css('-webkit-transform','translate(' + this.slideX + 'px,0)');

px書いたら動いた・・・。

2時間・。・;

cssだもん。そうだよねぇそうだよねえ。

モー ダメ サァ。

Tableがどうしても親要素をはみ出す。
ぐぬぬ・・・。どうするんだ、と調べました。



今回は
table-layout: fixed;
ってcssのプロパティを使います。



先日、↓↓↓な感じで半角英数字が折り返されずに、テーブルが親要素をはみ出す場合がありました。

20110908_01


とりあえずまず思いつくのが word-wrap: break-word; や white-space: pre-wrap; ですが、
うーん。tableの中だとなかなか思うようにならず・・・。

そこで、table-layout: fixed; を適用します!




プロパティの詳しい解説は HTMLクイックリファレンス 様にて!

このページのトップヘ