HTML&CSS

appearanceプロパティは、ボタンなどの見た目をコントロールするものです。特にスマホサイト作成の時には重宝されることが期待されましたが、主要ブラウザの対応はマチマチで、なおかつW3CのCSS3仕様書から削除されたりなど落ち着きません。...

＊2017/5/7追記しました。 Sublime Text3のソースフォーマット Sublime Text3のソースフォーマットはデフォルトで用意されています。 フォーマットしたい部分を選択するか、全選択してメニューから Edit →...

ECサイトなどで見かける商品別のブロックをFlexboxを使って作成するサンプルです。 参考にしたのはこちらのページです。Some Inspiration for Pricing Tables 折角Flexboxを使っているので、少し応...

しばらくatomを使っていたのですが、起動時間が遅いので再びSublime Textに戻ってきました。 Sublime Text3にColorPickerを導入したのでその方法です。 atomはColorPickerのプラグインを入...

テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いも...

h1要素などの背景にcssで画像を指定してh1のテキストを隠すための手法としてtext-indentが使われます。 かつて多く取られた方法は−9999pxの位置まで飛ばす方法でしたが、パフォーマンスの問題やサーチエンジン対策としてダークな...

ビューポートに応じた割合を指定できる単位vwは以前紹介しましたが、今回はvwをフォントサイズに設定して画面のサイズに応じて文字を拡大縮小する方法を解説します。 この方法の一番のメリットはスマートフォンを縦向き（ポートレイト）にしても横...

CSSの値を計算することができるcalc()ファンクションの紹介です。IE8は当然ダメで、それ以外はOpera Miniと一部Androidを除くと使えます。 使用可能なブラウザはこちらです。 CSSの幅や高さの計算やフォントサイズ...

TypekitとはAdobeが提供するFontを自分のパソコンで同期したり、Webフォントとして使ったりできるものです。 このサービスを使用するにはAdobeのCreative Cloudに契約するか、Typekit単体で契約するなどしま...