【コピペOK！】マテリアルデザインのチェックボックスを作る方法
マテリアルデザインシリーズの第三弾です！ 過去の記事はこちらをご覧ください。 【コピペOK！】マテリアルデザインのボタンを作る方法 【コピペOK！】マテリアルデザインのテキストフィールドを作る方法 今回はチェックボックス…
【コピペOK！】マテリアルデザインのテキストフィールドを作る方法
前回の「【コピペOK！】マテリアルデザインのボタンを作る方法」に引き続き、テキストフィールドの作り方を紹介します。 サンプルはこちらに掲載されているので、これをなんとか再現させてみようと思います。 ソースコードの全量はこ…
【コピペOK！】マテリアルデザインのボタンを作る方法
今回はマテリアルデザインのWebサイトで使われるようなボタンの作り方を紹介します。 マテリアルデザイン(material design)とはGoogleが提唱しているデザイン手法のガイドラインです。 マテリアルという言葉…
そのスタイルどうやって書いてるの？ブラウザの開発者ツールを使おう
Webデザインなどをしようと思った時に、 「あのページはどんなCSSを書いて表現してるんだろう」 とか思うこともあるのではないでしょうか。 実はWebページがどんなHTML、CSS、JavaScriptで作られているかは…
CSSやJavaScriptの修正が反映されない？ブラウザのキャッシュクリアを覚えよう
Webページを作っているとプログラムの変更がブラウザに反映されないことはないでしょうか。 「確かに直したはずなのに何も変わってないように見える」 「直し方が悪かったのかな」 なんて思っていると実は 「変更前のキャッシュを…
文字を調整しよう！font関連のCSSあれこれ
Webサイトを作るとき、何かしら文字を表示すると思いますがCSSを指定するといろいろな書体で表示させることができます。 書体のことをfont（フォント）といいますが、CSSにはfont-sizeやfont-familyな…
知らないと困るかも？CSSの読み込み方法は3種類！優先順位についても理解しよう
HTMLの見た目を整えるのがCSSの役割ですが、HTMLにCSSで書いたスタイルを適用する方法はいくつかあります。 また、適用されるスタイルの優先度も決められています。 これらを把握しておかないと、「確かに書いたはずなの…
px？em？CSSでのサイズのいろいろな単位
CSSではfont-sizeで文字の大きさを決める時、widthで横幅を指定する時、heightで高さを指定する時、marginやpaddingで余白の幅を決める時、topやbottomで表示位置を決める時などさまざまな…
レイアウトでは必須！CSSのpadding、marginの使い方
今回はCSSのプロパティである「padding」と「margin」の使い方を紹介したいと思います。 どちらもHTML要素に余白をつけるプロパティになります。 paddingは要素の内側につく余白です。marginは要素の…
【意外と簡単です】CSSのpositionの使い方
CSSのプロパティに「position」というものがあるのをご存知でしょうか。 これはHTML要素をどのように配置するかを決めるためのプロパティです。画面をレイアウトする時に使われます。 CSSを触っている人はだいたい使…
- 1
- 2