熊本のウェブ制作会社のエンジニアのググる生活

地方のウェブ制作会社（元：佐賀・今：熊本）で働く、エンジニア。
HTML、CSS、JavaScript、PHP、Smary、Twig、EC-CUBE、WordPress、Movable Type 等でお仕事してます。
ググって解決した話や、自分で考えて分かったことなどを、自分用にメモとして残すブログです。

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

カテゴリ： CSS

will-change や transform なども試してみてもダメな場合、
position: fixed; が足を引っ張っている可能性があります。

position: fixed; の使用の頻度を減らすか、
必要ない場合は display: none; で隠すかなどの処理をすることで、
負荷が軽減して改善することがあります。

または、アニメーションさせている要素の親要素を
overflow: hidden; すると解決することも。

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 の中に子要素を作ってそこで変化の指定をする方法でも
上手く行ったのでメモしておきます。
タグ ：
css3

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

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

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

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

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

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

昔はキャメルケースだの、アンダーバーだの色々試してましたが、
先月あたりから単語と単語はハイフンで繋ぐ形式に移行しました！
ので、以下の記述はハイフンさん大登場です。
理由は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
タグ ：
html
css

最近 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だもん。そうだよねぇそうだよねえ。

ﾓｰ ﾀﾞﾒ ｻｧ。
タグ ：
css3
JS

このページのトップヘ