gridに関するohbaryeのブックマーク (3)
-
はじめに こんにちは、白川です。 Webアプリケーションは概ね、複数のブラウザに対応する必要があります。 Internet Explorer、Firefox、ChromeなどのPCブラウザだけでなく、 iPhoneやAndroidなどのモバイル/タブレットのブラウザにも対応しないといけなかったり、 同じブラウザでも複数のバージョンに対応する必要があったり、OSのバージョンの違いにも対応する必要があったりします。 そうなってくると、テストが大変です。 検証が必要なOSとブラウザとバージョンの組合せが増えれば増えるほど、手動でテストを行なうことが大変になっていきます。 しかし、Selenium Gridを使えば、 一つのテストスクリプトで複数の実機のブラウザで自動にテストを実施することが可能となります。 Selenium Gridについて テストスクリプトを実行するサーバからSelenium
-
子要素を親要素の左右の中央寄せに配置するのは、簡単です。 インライン要素は﹁text-align: center;﹂で、ブロック要素であれば﹁margin: 0 auto;﹂で中央に配置できます。 難しいのは天地、上下の中央です。 CSS Hackはなしで、要素を上下左右の中央寄せに配置する実装方法を紹介します。 Absolute Centering withCSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 positionプロパティを使って、要素を上下左右の中央寄せに配置 単位vhを使って、要素を上下左右の中央寄せに配置 Flexboxを使って、要素を上下左右の中央寄せに配置 CSS Gridを使って、要素を上下左右の中央寄せに配置 positionプロパティを使って、要素を上下左右の中央寄せに配置 ﹁position
-
これからのCSSはmargin禁止!?CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた! 白石 俊平︵HTML5 Experts.jp編集長︶ こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション﹁まあまあ最近のCSSとつらくならないための書き方﹂に関するスライド資料は、こちらで公開されています。 インパクト大!CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか? 矢倉: 昨年︵2
-
1