タグ : CSS
[CSS]ボックス内でテキストを垂直方向に中央揃えする方法
2013年9月26日Webデザイン
久しぶりの投稿となってしまいました。 お仕事が忙しすぎて更新が滞ってしまっていました。そのおかげ(?)もあり、更新を一時的に中断した場合にどのような傾向で検索順位が落ちてくるのかという貴重なデータも取ることができました。 …
[CSS]backgoundでグラデーションと背景画像を同時に指定する方法
2013年9月9日Webデザイン
スタイルシートのbackgroundは「見出しタグを画像でリッチに表現する方法」でも利用しましたが、使用する機会の多い便利なプロパティです。 今回、背景色をグラデーションにして、背景上にアイコンを表示するというデザインを …
[CSS]見出しの角を丸くして丸角にする方法
2013年8月6日Webデザイン
最近、Web制作ばかりしているのでめっきりPHP関連の投稿がありません。その代わり、WordPressやら、スタイルシートやらが増えています。 今回は基本的なことですが、スタイルシートで丸角を表現する方法です。 bord …
[CSS]ボックスを中央揃えにする方法
2013年8月5日Webデザイン
画像や文字列を中央揃えにする方法としては、HTMLでCENTERタグを使えば中央揃えになりますが、今回はスタイルシートを使って背景に画像があるボックスを中央揃えにしてみたいと思います。 HTMLはシンプルにこれだけ 中央 …
[CSS]見出しタグを画像でリッチに表現する方法
2013年8月1日Webデザイン
HTMLの見出しタグ(H1、H2、H3・・・)はよく使われるタグですし、見出しを付けてサイトを構成することは見やすいサイト作りの基本です。 今回はそんな見出しタグの背景に画像を表示して、リッチな見出しにする方法をご紹介し …
[CSS]文字に影を付ける方法
2013年7月16日Webデザイン
今回はスタイルシートを使って文字に影を付ける方法をご紹介します。 HTMLで文字を表示する時、画像(ボタンなど)の文字にはドロップシャドウの効果が付いているので読みやすかったり、少しリッチな感じがしたりするのですが、テキ …
[CSS]ウインドウサイズに合わせて画像を拡大縮小する方法
2013年7月4日プログラミング
サイトに画像を表示した時に、画像サイズが大きかったりするとウインドウからはみ出て表示されてしまいます。 最近流行りのレスポンシブデザイン(1つのサイトが大きな画面でも小さな画面でもキレイに配置されるのでスマホ用に作りなお …
[CSS]floatの回りこみを解除する簡単な方法
2013年7月3日プログラミング
スタイルシートでfloatを利用すると要素が横並びになるのは良いのですが、次の要素まで横並びになってしまいます。これを解除する方法をご紹介します。 解除するためにはclear:both;を使うだけです。 floatを使っ …
[CSS]先頭に戻るボタンを常に右下に表示する方法
2013年5月24日プログラミング
データを表などを使って表示すると縦に長いページになってしまったりすることがあります。データを下にスクロールしながら閲覧している時に、先頭に戻りたい場合はパソコンのブラウザであれば、スクロールバーを移動させることで高速に移 …
[CSS]AndroidのChromeブラウザでCSSを使ってチェックボックスを大きく表示する
HTMLでcheckboxを表示するように作ったサイトをAndroidのChoromeブラウザで閲覧すると、checkboxが異常に小さいという問題がありました。 CSSのheight、widthを指定しても何の変化もあ …
[CSS]スタイルシートでスマホの縦横切替に対応する
2013年4月10日スマホ
Webアプリを作っていると、スマホの縦横切替時にCSSの設定を変えたい場合などがあると思います。 縦横切替時(実際には縦長、横長)の切り替わりの時にCSSの設定値を自動的に切り替える方法をご紹介します。 記述方法はとても …