CSS– tag –

今日はCSSでHTML要素にグラデーションを描く方法です。グラデーションをうまく活用するとサイトのデザインがぐっと良くなると思います！画像に透明のグラデーションをかぶせたりするのも最高です！CSSでグラデーションを設定する方法を解説します。【グラ...

今回は非常に地味ですが、CSSで台形を描く方法です(笑)だいぶ前ですが、フッターの上に同じ色で台形のページトップへ戻るボタンをつけてくれと依頼されました。同じ色で台形の画像を作成して配置すれば簡単ですが、ブラウザで表示される色とフォトショップ...

通常はHTML要素は左上から順に構築されます。文章を書いても画像を貼り付けても、左上を基準に配置されます。でも時には真ん中に表示させたいときもあると思います。今回は、上下左右の中央、つまりど真ん中に画像やブロック要素を表示するためのCSSの書き...

基本的にHTMLは四角のエリアや画像などを組み合わせて構築するのでどこか刺々しく感じます。角を取り丸くすることによってサイト全体が柔らかい雰囲気になるのではないでしょうか。 例えば、下のような画像があります。これをこんな風に出来ます。今...

前回の記事でjQueryを使ってサイドバーを追従する方法をご紹介しました。jQueryでサイドバーを追従させる方法フッターやコンテンツエリアの位置情報を取得したり、面倒ですよね。スクロールする度に起動されるので環境によっては重く感じることもあるかも...

結論を言えば、transparent をカラーに指定すれば透明になります。部分によりますが、背景色だったら透明(transparent)が初期値だと思います。 背景色を無しにする場合はこのように書きます。background-color: transparent;これで何色が指定されてい...

YouTubeやGoogleMapをホームページに埋め込んだ場合、スマホで表示すると画面からはみ出したり縦長になってしまいます。PCで表示すると横長の長方形で見やすくてちょうどいいんですけどね。下の画像は縦長表示の例です。これに対し、縦横比をそのままでス...

レスポンシブ対応を行うとどうしても画面が崩れてしまう部分が出てきます。僕が作ったサンプルページでもメニューやテーブル、サイドバーなどはまだまだ調整が必要です。メニューはCSSだけでは対応出来ないので今回はテーブルをレスポンシブにしていこうと...

サイトによりますが、最近はスマホからのアクセスが8割ほどあります。そのためスマホ対策は必須だと言えるでしょう。レスポンシブとは、例えばスマホで開くとスマホ用のデザイン、PCで開くとPCのデザインでページが表示される仕組みのことを言います。その...

HTMLやCSSを修正しようとしたとき、特にCSSを修正しようとしたとき、どのCSSが最終的に適用されているか見つけづらいときありませんか？僕は10年以上プログラマーをやっていますが、恥ずかしながら未だにテキストエディタだけでは見つけれないことが多々あ...