要素を中央に配置する
中央に寄せるためにはmarginの左右にautoを指定する。marginにautoを指定するときは必ずwidthも併せて指定しましょう。なお、上下のmarginにautoは指定できません。style.css.box{width:300px;margin:0auto;}
View Article要素を透過させる
要素を透過させるopacityプロパティを使えば要素を透明にできます。透明度は0.0(完全に透明) ~ 1.0(完全に不透明)の数値で指定します。style.cssheader{opacity:0.9;}
View Article文字の間隔を調整する
文字の間隔を調整するletter-spacingプロパティを用いることで文字の間隔を指定することができます。style.css.letter-space{letter-spacing:2px;}
View Articledisplayプロパティの利用方法
ボタンを<a>タグで実装しようと思ったときなど、<a>タグはインライン要素なのでwidthやheightが指定できないなど不都合がある場合があると思います。そんな時はdisplayプロパティでインラインブロック要素に変更することができます。インラインブロックブロック要素とインライン要素の特徴を併せ持つインラインブロック要素というものがあります。インラインブロック要素はインライ...
View Articleカーソルが乗った時のスタイルを指定する
カーソルが乗ったときの状態をhoverと言います。 CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができます。style.cssdiv:hover{background-color:red;/* カーソルが乗った時に背景色を変更 */}
View Article角を丸める
角を丸めるにはborder-radiusプロパティを用います。数字が大きいほど角が丸くなります。index.html<divclass="box"></div>style.css.box{border-radius:10px;}
View Article「margin: 0 auto」と 「text-align: center」の使い分け
要素を中央寄せにする方法として、margin: 0 autoとtext-align: centerがありますが、2つの使い分けについて説明します。divなどで広い範囲を囲うようなブロック要素の場合はmarginを、テキストやボタンのようなインライン要素・インラインブロック要素の場合はtext-alignを使うようにしましょう。
View Article背景だけを透過させる
要素を透明にするにはopacityが利用できますが、opacityには要素の中身全てを透明にするという性質があります。背景のみを透明させたい時とかは、rgbaを利用しましょう。rgbrgbaを学ぶには、まずrgbというものを理解する必要があります。rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決めます。色を指定するときは#ffffffのようなカラーコードを使ってもrgbを使っても...
View Articleアニメーションをつける（transition）
transitionを使うとアニメーションをつけることができます。「変化の対象」や、「変化にかかる時間」などを指定できます。「変化の対象」にはcolorなどのプロパティを指定しますが、allを指定すると全てのプロパティに適用出来ます。transitionは多くの場合hoverと組み合わせて使います。index.html<div><h1>ゆっくり背景がつくよ</h1>...
View Article行間を指定する（line-height）
line-heightプロパティを使うと、行の高さを指定することができます。値が大きいほど行間が大きくなります。style.css.text{line-height:10px;}line-heightと縦の中央寄せline-heightプロパティは本来行間を調整するためのプロパティですが、要素の縦方向の中央に文字を配置するのにも使えます。line-heightプロパティの「高さの中心」に文字が配置さ...
View Articleタグのクリックできる範囲
<a>タグはインライン要素なので、中身のテキストの部分しか大きさを持ちません。その結果、<a>タグをクリックできる範囲はテキストの部分だけになってしまいます。<a>タグをブロック要素にすると、大きさが親要素いっぱいに広がるので、全体をクリックできるようになります。style.css.header-righta{display:block;}
View Article文字の太さを指定する
font-weightプロパティを用いると文字の太さを変更することができます。normalまたはboldを指定します。<h1>~<h6>の要素は初期状態でfont-weight: bold;となっているので、font-weight: normal;と指定すれば文字が細くなります。style.cssh1{font-weight:normal;/* デフォルトより細くなります */}
View Article相対的な大きさを指定する
相対的な大きさの指定ボックスのwidthやheightをpxではなく%で指定すると、親要素に対してどのくらいの幅や高さを持つか指定することができます。index.html<divclass="parent"><divclass="child"></div><divclass="child"></div></div>style.c...
View Article画像と文字を重ねる
画像と文字を重ねる通常、HTMLでは要素同士が重なって表示されることはありません。しかし、CSSを用いることで要素同士を重ねることができます。position: absolute;HTMLの要素同士は通常重なって表示されることはありませんが、position:...
View Article立体的なボタンを作ってみる
立体的なボタンを作る<a>タグで立体的なボタンを作ってみます。ボタンに影をつけることによって、立体的に見えるようにします。また、ボタンにカーソルを当てた時の、カーソルの形も変更してみます。影をつけるボックスに影を付けるためにはbox-shadowプロパティを用います。「影の位置」と「影の色」を指定します。style.css.box{box-shadow:10px10px#000000;/...
View ArticleなぜかCSSがあたらないってとき
自分用メモみたいな感じですがどう考えてもちゃんと書いてるのになぜか反映されず、キャッシュクリアしても chrome の検証にもそもそも出てこないってときは、一番基本に立ち返ってよーくコードを見ます。タイプミスもしくは余計な文字が入っていることでしょう（}が一個多いとか）。
View ArticleClik here to view.
【初心者でもわかる】要素の順番をPCとスマホで変える方法（レスポンシブ）
どうも7noteです。レスポンシブサイトを作る時、PCとスマホで要素の順番を入れ替える方法。レスポンシブサイトを作る時、PCとスマホで要素の順番を変えたい時のCSSの書き方について記述していきます。...
View Articleレスポンシブデザイン入門
レスポンシブデザインとはレスポンシブデザインとは、様々なデバイスや画面サイズに合わせて、コンテンツのレイアウトを調整するためのものです。例えば、全体要素の幅を固定したサイトを作成した場合、それより画面幅が狭くなると、コンテンツの一部が隠れてしまいます。ここにレスポンシブデザインを適用することで、画面のサイズに合わせて最適なレイアウトを組めるようになります。メディアクエリの利用メディアクエリ（Medi...
View Article