HTML&CSS

appearanceプロパティについて〜CSS

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

Sublime Text3の便利な使い方

*2017/5/7追記しました。 Sublime Text3のソースフォーマット Sublime Text3のソースフォーマットはデフォルトで用意されています。 フォーマットしたい部分を選択するか、全選択してメニューから Edit → Line → Reindent 日本語化したメニューなら 編集   >>続きを読む

Flexboxを使ったECサイト向けパーツ

ECサイトなどで見かける商品別のブロックをFlexboxを使って作成するサンプルです。 参考にしたのはこちらのページです。Some Inspiration for Pricing Tables 折角Flexboxを使っているので、少し応用してみました。 サンプル1 3カラムになったブロックの中央がお  >>続きを読む

Sublime Text3にColorPickerの導入

しばらくatomを使っていたのですが、起動時間が遅いので再びSublime Textに戻ってきました。 Sublime Text3にColorPickerを導入したのでその方法です。 atomはColorPickerのプラグインを入れると右クリックで簡単に呼び出せていたのですが、Sublime Te  >>続きを読む

疑似要素で下線を引く

テキストに下線を引く方法としては「text-decoration: underline」を使用しますが、装飾的な下線としては使い勝手が悪いです。そのため「border-bottom」を使用したりします。けれども、これも決して使い勝手の良いものではありません。 今回は疑似要素を使用して下線を引く方法で  >>続きを読む

text-indentで文字を非表示にする

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

font-sizeにvwを使用して文字を画面サイズに応じて拡大縮小

ビューポートに応じた割合を指定できる単位vwは以前紹介しましたが、今回はvwをフォントサイズに設定して画面のサイズに応じて文字を拡大縮小する方法を解説します。 この方法の一番のメリットはスマートフォンを縦向き(ポートレイト)にしても横向き(ランドスケープ)にしても1行あたりの文字数が変わらないことで  >>続きを読む

CSSで計算する〜calc()

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

Adobe Typekitの使い方

TypekitとはAdobeが提供するFontを自分のパソコンで同期したり、Webフォントとして使ったりできるものです。 このサービスを使用するにはAdobeのCreative Cloudに契約するか、Typekit単体で契約するなどします。 2015年10月6日からモリサワが使えるようになったとい  >>続きを読む

Font AwesomeのCSSには.pull-leftと.pull-rightの設定がある

アイコンフォントを使用するときにFont Awesomeを使う時の注意点です。 Bootstrapを使い慣れるとBootstrap以外のコードでもフロート対象にpull-leftやpull-rightのクラス名を使ってフロートを設定することもあると思います。 Font AwesomeのCSSにはこれ  >>続きを読む