CSS Transformによるセンタリングのベスト・プラクティス
上下左右のセンタリングには様々な手法が編み出されてきた。最近はCSS Transformを使う方法がメジャーになりつつある。コンテナーとセンタリングしたい要素のサイズが共に不明でもうまくいくところなど、そこそこ万能感があるのがポイントだろうか。このCSS Transformによるセンタリングは左下に動かしてから右上に戻すパターンと、その逆の右上に動かしてから左下に動かすパターンがある。どちらでも理論的には上手くいくが、ベスト・プラクティスとなりうるのは後者だけだろう。 Demo: Centering Unknown with CSS Transform (top/left) このデモは実際に不具合が起こりうるパターンになっている。センタリングする要素をtopとleftプロパティーで動かした後、transform: translate(-50%, -50%)で元に戻しているわけだが、Inte
印刷したら崩れてた！？印刷用CSSのスタイル確認と修正に便利なChrome DevToolsのエミュレータ機能
いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能 以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。 以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I） スマホ（device mode）アイコンをクリック drawerアイコンをクリックする （Emu
高速かつ直感的にGitリポジトリ操作できるMac用Gitクライアント「GitUp」 | ソフトアンテナ
Gitのリポジトリを分かりやすく可視化し、高速かつ直感的にGitリポジトリを操作できる、Mac用のGitクライアント「GitUp」が公開されています。現在プレリリース中につき無料で利用可能で、ユーザー登録すると、全機能がアンロックされるシステムとなっています。 分かりやすくかつ高速 GitUpの第1の特徴は、わかりづらくなりがちなGitリポジトリの迷宮的な履歴を分かりやすく表示できることで、GitUp外部で行った操作がリアルタイムに反映されることで、混乱を招かないように工夫されています。 また、プロが使うためのツールとして高速性にも配慮されており、Gitバイナリツールをバイパスし、リポジトリのデータベースに直接アクセスすることで、40,000コミットを超える、公式Gitリポジトリ全体を1秒以内にロードし、描画することが可能になっています。 値段は不明 GitUpは現在プレリリース期間なので
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
