仙台・宮城の皆さんこんにちは！ 今日は、フォーム関連のデフォルトのスタイルを削除する方法を解説します。 フォームで使用するinputやtextareaには、ブラウザやデバイスの「デフォルトスタイル」が適用されます。 そのためブラウザやデバイスによって違う見た目になってしまいます。 具体的には、ボーダーがついたり、角丸になってしまったりなど、普段使わないブラウザで確認すると「なんだこれ？」という経験はありませんか？ デフォルトスタイルを一括で削除する デフォルトスタイルを取り除きたいという時に便利なのがappearanceというプロパティで、以下のように記述することで削除されます。 input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } 一旦削除した上で、新しいスタイルを記述することで、ブラウザやディバイスに関係なく見た目を統一できることになります。 /*一旦リセットして*/ input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /*新しいスタイルを記述*/ input { border:1px solid #CCCCCC; } まとめ いかがでしたか？今回解説したappearanceをリセット関連のCSSとセットにしておくと忘れずに記述できて、便利かもしれません！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
CSSでフォーム関連のデフォルトのスタイルを削除する方法（appearance）
フォームでtextareaのリサイズ機能を制限する方法
仙台・宮城の皆さんこんにちは！ 今回はcssでtextareaのリサイズを制限する方法について解説します。 ChromeやFirefoxでは、textareaの大きさをユーザ側で自由に設定（右下の角をドラッグ）できるようになっています。 リサイズすることによって、レイアウトが大きく崩れたりすることもあります。崩れるといっても、そのユーザーだけに起こることなので、そんなに気にすることもないと思いますが、やはり作っている側としては気になってしまいますよね。 resizeプロパティで制限 そんな時は、resizeというプロパティを使うことによって制限することができます。 横のみリサイズ可 resizeにhorizontalを指定することによって、横方向のみリサイズ可にすることができます。 textarea { resize: horizontal; } 縦のみリサイズ可 縦方向のみリサイズ可にしたい場合は、resizeにverticalを指定します。 textarea { resize: vertical; } 縦横ともにリサイズ不可 縦横両方をリサイズ「不可」にしたい場合は、resizeにnoneを指定します。 textarea { resize: none; } 最小値と最大値を指定 縦と横の最小値、最大値をしていすることで、リサイズを制限することもできます。 textarea { min-width: 250px; max-width: 500px; min-height: 100px; max-height: 300px; } まとめ いろんなサイトを作っていると、上司やお客様からこういった細かい指示が来ることがあります。 「気にすることはない」と一蹴することもできますが、こういった指示にも丁寧に応えることがプロですよね！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！
本当に簡単！WEBフォントのちらつきをなくす方法！
仙台・宮城の皆さんこんにちは！ 皆さんは「WEBフォント」使っていますか？Googleが無料で提供していることもあって使用しているサイトも多く見かけるようになりました。 このWEBフォントは、CSSやJavascriptを数行追加するだけで使用できるので大変有難いものですが、欠点があります。 WEBフォントの欠点 それは、WEBフォントを読み込んで、ブラウザの表示に反映されるのにタイムラグがあるため「一瞬だけスタイルが適用されない状態で表示されてしまう」ということです。 body { font-family: "メイリオ" ; } h1 { font-family: heisei-kaku-gothic-std, sans-serif; //WEBフォント font-weight: 300; font-style: normal; } 上記のような感じでWEBフォントを指定していると、一瞬だけメイリオで表示され、画面が「ちらついている」ような感じになってしまうんです。 WEBフォント「ちらつき」の解決方法 というわけで、早速解決方法です。以下のCSSを追加するだけで解決してしまいます！ html { visibility: hidden; } html.wf-active { visibility: visible; } あっけないほど簡単ですね。 具体的に何をしているかというと「読み込みが完了するまで全体を表示させない」ということです。 ポイントは.wf-active .wf-activeはWEBフォントの読み込みが完了したら付加されるクラスです。とりあえずvisibility: hidden;でhtml全体を非表示にしておいて、読み込みが完了したらvisibility: visible;が反映されて表示されるという流れです。 本当に簡単なんですが、バッチリ解決してしまいますよ！ それではまた！仙台・宮城でのホームページ制作やサイトリニューアルならアンドシークまで！もちろん宮城県外の方も大歓迎です！