frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

親要素のコンテンツ幅を超えて100%の子要素ボックスを作る

レスポンシブデザインを作る上で時として無理をしなければいけない時があります。

先日どうしてもコンテンツ幅を超えて100%のボックスを作る必要があり、そんなことできないかと思いきや調べてみたら発見することができました。

ボックスにネガティブマージンを当てればその分幅が広がります。
その特性を利用してmarign-left,margin-rightにそれぞれウィンドウ幅である100vhそこからコンテンツ幅である100%を引いて2で割ります

margin-left: calc(((100vw - 100%) / 2) * -1);
margin-right: calc(((100vw - 100%) / 2) * -1);

See the Pen awLNOW by funclur (@funclur) on CodePen.

ただこれだとなぜかボックスのボーダーが表示されないんですよね。
bodyの横スクロールを消さなければいけなかったりといずれにせよ苦肉の策ではあるようです。

overflow-x: hidden;

参考:
コンテナーの幅より広がったエリアをcalcでつくる - Qiita

display:flexでよく使う8つのプロパティ

display flexはとても便利ですが、プロパティが多く、単語も長いので覚えずらいプロパティかなと思います。

そんな覚えたての方に向けてよく使うと思われるプロパティに絞って下記に例を挙げました。



通常

  • display:flex

折り返しあり

  • display:flex
  • flex-wrap: wrap

両端に合わせて均等間隔に配置

  • display:flex
  • justify-content: space-between

終端に寄せる

  • display:flex
  • justify-content: flex-end

中央に寄せる

  • display:flex
  • justify-content: center

逆にする

  • display:flex
  • flex-direction: column-reverse

1
2
3

順番を変える

  • display:flex
  • order: 1

1
2
3

高さを中央にする

  • display:flex
  • align-items: center

See the Pen OgjYJq by funclur (@funclur) on CodePen.

レスポンシブデザインでは、順序を変えるorderやcolumn-reverseも重宝します。

ソースコード共有サイト4選

正式名称はわかりませんが、ソースコード共有サイトはとても便利ですよね。
必要なのは、ネットにつながってる環境のみ。エディタもサーバー環境も必要なしで、コーディングができて共有ができます。

勉強の為や、デバッグ、作品公開などいろんな用途があり重宝しますね。

そんなソースコード共有サイトを4つ挙げてみました。

codepen

恐らく自分の感覚では、一番人気のあるソースコード共有サイトではないでしょうか。
ライブラリの読み込みやカスタマイズ性、手軽さが人気の秘訣です。

codepen.io

CSSDeck

シンプルにコーディングしたい方は、こちらも良いのではないでしょうか。

cssdeck.com

JSFiddle

長期にわたって愛され続けているソースコード共有サイトですね。

jsfiddle.net

jsdoit

紹介した中で唯一の日本製です。
面白法人カヤックが運営していましたが、現在はjsdoit株式会社として独立しました。

「jsdo.it」はオープンソースの概念のもと、有益なコードを公開できるサイトとして2010年7月7日にリリース。Web制作の開発言語「HTML5」と、「CSS」「JavaScript」のソースコードを投稿してユーザー間で共有することができます。

また、投稿されたソースコード(作品)を別のユーザーが書き換えるFork機能も実装しており、ひとつのソースコードを使って幾通りにも別の作品へと発展させることも可能です。Webデザイナー、マークアップエンジニア、Webプログラマーがサイト上で知識と技術を共有できる場として、現在、約9万人のフロントエンドエンジニアが参加しています。およそ28万作品以上のコードが投稿・共有されています。

jsdo.it

firefoxでbutton要素がクリック時に動くのを防ぐ

button要素って結構厄介でデフォルトのスタイルが当たっています。
button要素の中に画像を指定した場合

  background: none;
  border: none;
  cursor: pointer;

で十分かと思いますが、その場合firefoxでクリックしたとき動きます。
下記お試しください。

See the Pen RgpgGj by funclur (@funclur) on CodePen.

左のボタンがchromeで問題ないですがfirefoxで数px動きます。

これを解消するために

  padding: 0;

を追加します。
それが右のボタンです。

しかし、IEでは解消されませんでした。
ん~IE...。

【コーディング】デザイン再現性のチェック項目5つ

コーディングした後にデザインを再現できているか確認していることと思います。
PSDと見比べてチェックするべき項目を5つほど挙げてみました・

マージン

マージンは完全にピッタリ同じにすることは行間、前後の要素に依存するため難しい場合もありますが、
どのくらいずれているかは知っておきたいものです。

perfectpixel

perfectpixelはchrome,firefoxのアドオンでブラウザに画像を重ね合わせることができます。
しかも開発ツールも同時に使用できるため、そのまま開発ツールで調整してマージン等のサイズを合わせることができます。
firefox
PerfectPixel :: Add-ons for Firefox

chrome
PerfectPixel by WellDoneCode - Chrome ウェブストア

定規ツール

全体ではなくブラウザ上の一部のサイズを図りたい時は、定規ツールで十分です。
fireifox
MeasureIt :: Add-ons for Firefox
chrome
Edge: The Web Ruler - Chrome ウェブストア

カラーチェック

カラーのチェックは、大事ですね。テキストカラーなど微妙に#333など変化してる場合もあります。

  • ホバー、機能(クリッカブル領域など)

デザインからはパッと見、マウスオーバーになっていなくても、レイヤーが隠れているかもしれません。

しっかり探しましょう。どこからどこまでがクリッカブルなのか確認することが必要です。

  • 要素の増減時のチェック

テキスト量、カラムなど要素の量が増えたことを見越してコーディングする必要があります。

デザインではそれが考慮されてないこともありますが、コーディングでそれを賄うとよいでしょう。

  • リサイズ時

レスポンシブデザイン案件では、全てのwindowサイズが対象となるためどのサイズでも崩れがあってはなりません。
また、不必要な横スクロールバーは出ないように気をつけましょう。

まとめ

コーディングが終わった後のデザイン再現性のチェック項目を5つ書きました。
完璧にデザイン通りにすることは難しいですが、できるだけ再現性を上げることでデザイナーさんが喜んでくれるでしょう笑

【CSS】gridLayoutで使えるminmax()の新単位frとは

frはFlexible Lengthを表し

fr単位を使用するこの長さは、グリッドコンテナ内の空きスペース領域の一部を表します。例えば、2つのセルを持つ100px幅のグリッドがあるとします。1つは20pxの固定幅で指定し、もう1つは1frで指定します。この場合、空きスペースは100-20=80pxになるため、もう1つの幅は80pxで表示されます。

http://coliss.com/articles/build-websites/operation/css/how-to-use-minmax.html
ということらしいのですが、文章だとちょっとわかりづらいですね。

codepenに分かりやすいように表示してみました。

See the Pen rwMPKO by funclur (@funclur) on CodePen.


最小値はすべて100pxですが、左のボックスから順に1fr、2fr、3frとしています。
こうすることでどうなるかというと最大値の比率が1:2:3になってます。つまり、最大値で設定されてる幅がpxのボックスがあれば、frはそのサイズを引いた分の空きスペースを占領し、fr同士のボックスは数値が比率になるようです。

https://developer.mozilla.org/en-US/docs/Web/CSS/minmax