CSSでグラデーションを作成する方法
今日はCSSでHTML要素にグラデーションを描く方法です。 グラデーションをうまく活用するとサイトのデザインがぐっと良くなると思います! 画像に透明のグラデーションをかぶせたりするのも最高です! CSSでグラデーションを…
プログラマーの技術や経験の暴露ブログです。何か聞きたいことがあれば遠慮なくご連絡ください。
今日はCSSでHTML要素にグラデーションを描く方法です。 グラデーションをうまく活用するとサイトのデザインがぐっと良くなると思います! 画像に透明のグラデーションをかぶせたりするのも最高です! CSSでグラデーションを…
今回は非常に地味ですが、CSSで台形を描く方法です(笑) だいぶ前ですが、フッターの上に同じ色で台形のページトップへ戻るボタンをつけてくれと依頼されました。 同じ色で台形の画像を作成して配置すれば簡単ですが、ブラウザで表…
通常はHTML要素は左上から順に構築されます。 文章を書いても画像を貼り付けても、左上を基準に配置されます。 でも時には真ん中に表示させたいときもあると思います。 今回は、上下左右の中央、つまりど真ん中に画像やブロック要…
基本的にHTMLは四角のエリアや画像などを組み合わせて構築するのでどこか刺々しく感じます。 角を取り丸くすることによってサイト全体が柔らかい雰囲気になるのではないでしょうか。 例えば、下のような画像がありま…
前回の記事でjQueryを使ってサイドバーを追従する方法をご紹介しました。 jQueryでサイドバーを追従させる方法 フッターやコンテンツエリアの位置情報を取得したり、面倒ですよね。 スクロールする度に起動されるので環境…
結論を言えば、transparent をカラーに指定すれば透明になります。 部分によりますが、背景色だったら透明(transparent)が初期値だと思います。 背景色を無しにする場合はこのように書きます。…
YouTubeやGoogleMapをホームページに埋め込んだ場合、スマホで表示すると画面からはみ出したり縦長になってしまいます。 PCで表示すると横長の長方形で見やすくてちょうどいいんですけどね。 下の画像は縦長表示の例…
レスポンシブ対応を行うとどうしても画面が崩れてしまう部分が出てきます。 僕が作ったサンプルページでもメニューやテーブル、サイドバーなどはまだまだ調整が必要です。 メニューはCSSだけでは対応出来ないので今回はテーブルをレ…
サイトによりますが、最近はスマホからのアクセスが8割ほどあります。 そのためスマホ対策は必須だと言えるでしょう。 レスポンシブとは、例えばスマホで開くとスマホ用のデザイン、PCで開くとPCのデザインでページが表示される仕…
HTMLやCSSを修正しようとしたとき、特にCSSを修正しようとしたとき、どのCSSが最終的に適用されているか見つけづらいときありませんか? 僕は10年以上プログラマーをやっていますが、恥ずかしながら未だにテキストエディ…