クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

「 CSS 」 一覧

CSS 未加工の画像から丸いアイコンを作る(普通の画像だけでOK)

2018/09/08   -CSS

アイコンのような画像を表示させたいときがあります。 きれいな正円の中に画像が配置されているやつですね。   いちいち元画像から上記のような画像に加工するのは面倒ですよね。 画像データが増える …

CSS 画像の上に文字を重ねて表示させる(サンプル付き)

2018/04/28   -CSS, HTML

今回は画像の上に文字やタイトルを重ねて表示してみましょう! 少しオシャレで良い感じですよね。   こんな仕組みのものを作ります 画像をきっちりと囲む領域を作り「position:relati …

CSS 丸、正円の中に数字・文字を書く!(サンプル付き)

2018/04/21   -CSS

良くあるデザインで丸の中に数字や文字が入っているものがありますよね。 画像にしてしまうのも良いですが、汎用性も考えて出来ればCSSでやってしまいたいですね。 中の文字や大きさも自由に変更できるので、後 …

CSS テキストエリアのサイズ変更機能を無効にするには?サンプル付き

2018/01/15   -CSS

たいていのブラウザで、テキストエリアのサイズはユーザーが自由に変更できるようになっています。 ユーザーにとっては便利な機能ですが、テキストエリアのサイズを自由に変更されすぎるとレイアウトが崩れる原因に …

CSS liタグ の不要な行頭マークを削除する(サンプル付き)

2017/12/26   -CSS

liタグはよく利用しますがデザインによっては行頭のマーク「・」が邪魔になることがあります。 このマークはCSSで簡単に削除することができます。

CSS ブロック要素(div)の内側に枠線を引く(box-sizing)

2017/12/22   -CSS

きっちりとブロック要素の幅をしていしていたのに、枠線を引いたとたんレイアウトが崩れることがあります。 レイアウト崩れが起こる原因 これは、枠線はブロック要素の外側に引かれるためです。 例えば、横幅「1 …

CSS Animate.css の基本サンプル(通常・クリックされた・マウスオーバー)

2017/11/29   -jQuery, CSS

テキストだけのサイトだと「さびしい」「少しだけ動きが欲しい」という場合には「Animate.css」が便利です。 Animate.cssは、あらかじめ定義されているクラスを追加するだけで要素にアニメー …

CSS テキストボックスのフォーカス時の青枠を無効にする

2017/11/25   -CSS

もしかするとChromeだけかもしれませんが、テキストボックスや画像にフォーカスされた時に青い枠が出てしまいます。 ↓こんなのです。 違和感がありますので、解除する方法を調べました。 CSSの設定のみ …

CSS 設定値の初期化(サンプル付き)

2017/11/24   -CSS

CSSフレームワークやプラグインのCSSをどんどん追加していくと、通常のタグに影響が出てしまう場合があります。 元のCSSを改修すれば良いのですが、影響が大きい場合や時間が無い場合があるかと思います。 …

CSS ボタンの基本装飾

2017/11/24   -CSS

最近は他の方が公開されているボタンのCSSやCSSフレームワークで用意されているボタンがありますので楽ですよね。 ただ、仕事で制作するサイトはデザイナーさんはサイト専用のボタンをデザインされる事が多い …