クルーデザイン

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

Bootstrap4 インライン要素の左寄せ・右寄せ・中央寄せ(センタリング)

2018/04/15   -Bootstrap4

Bootstrap4では、インライン要素の左寄せ・右寄せ・中央寄せができるクラスがあらかじめ用意されています。 CSSをその都度書く必要はありません。クラスを追加することで、インライン要素を寄せること …

Bootstrap4 上下中央・上寄せ・下寄せ(d-flex)

2018/03/29   -Bootstrap4

上下中央や上寄せ、下寄せに配置するためのクラスも用意されています。 flexboxを利用するため、それぞれ2つのクラスを指定すればOKです。   1. 上下中央寄せ 「d-flex」と「al …

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

2018/01/15   -CSS

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

HTML 文字の上に丸印を付けるサンプル

2018/01/15   -HTML

文字の上に強調を表す丸印を付ける機会がありました。 次のような仕上がりですね。 最初は画像にしようと考えていたのですが、文字にして欲しいとの要望だったので文字にする方法を考えました。 色々と考えた中で …

no image

webサービス ダミー画像作成サービス「Placehold.jp」

2018/01/15   -Webサービス

Webの勉強中であったり、サンプルサイトを制作する時にダミー画像を使いたいときがあります。 どんな画像でも良いのに、サイズの合う画像がなかなか見つからないことが多々あります。 そんな時によく利用させて …

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

2017/12/26   -CSS

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

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

2017/12/22   -CSS

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

Bootstrap4 ブレークポイントを変更したい(ソースファイルをコンパイルする)

2017/12/20   -Bootstrap4

Bootstrap4のブレークポイントはあらかじめ設定されていますが、案件によってはブレークポイントを変更したい場合があります。 ブレークポイントを変更する場合、bootstrap.cssを直接編集す …

jQuery ブロックレベル要素をリンクにしたい(aタグで囲まない)

2017/12/19   -jQuery

インライン要素をブロックレベル要素で囲ってはいけないというHTMLの文法規約があります。 そのため、divで作ったグローバルメニューなどをaタグで囲むことができません。 ※実際は動作する場合もあります …

Bootstrap4 ブロック要素の左寄せ・右寄せ・中央寄せ(センタリング)

2017/12/13   -Bootstrap4

Bootstrap4では、ブロック要素の左寄せ・右寄せ・中央寄せができるクラスが用意されています。 そのクラスを追加することで、ブロック要素を寄せることができます。 サンプルも作りました。 ブロック要 …