CSSにおけるスタイル継承の仕組み
要素には、親要素と子要素や孫要素と呼ばれる、大きい括りの要素と、その中の小さな括りの要素があります。そして、その親要素に指定したスタイリングは子要素に継承されます。つまり、親のスタイルは子孫の要素に、自動的に適用されるのです。例えば上図のように、<body>が親要素で<body>にフォントサイズの指定をした場合、<body>内にある子要素にも、自動的に親要素のフ……
投稿日:
Blog
ブログで学ぶUX
CSSの様々な指定方法まとめ
CSSの基本的なセレクタとプロパティの記述の仕方は、セレクタ{ プロパティ:値; }こうですよね。複数のプロパティを指定する方法も、次のように記述するだけです。セレクタ{ プロパティ:値; プロパティ:値; プロパティ:値; }しかし、色々な状況に応じて、もっと便利な記述をすることができるので、いくつか紹介していきたいと思います。複数のセレクタに一度にデザインを指定同じプロパティを複数のセ……
投稿日:
CSSスタイルの優先順位まとめ
CSSをたくさん記述していくと、うっかり同じセレクタやプロパティに違うスタイルが指定されている、なんてことが起きてくるかもしれません。こういった場合、どの記述が実際に適用されているのか知っていますか？ 実は、記述が読み込まれて表示されるのには優先順位があります。スタイルの優先順位スタイルの優先順位ですが、同じ要素の同じプロパティに、違う値を指定してあったとします。p {color:red;} p ……
投稿日:
CSSで文字を太文字にする方法
太さを変えて文字を強調することは、よくありますよね。CSSでは文字の太さを変える方法も、知っておくと便利なものが幾つかあるので、覚えておいて損はないでしょう。基本としては、boldを使って太字にします。boldで太文字を指定しよう.sample1 { font-wight: bold; }記述の仕方は上記の通りです。また、bolderとlighterというスタイルもあります。これは相対的に文字の……
投稿日:
CSSで背景色を指定する方法
背景の色を変更したい、この様な場面もよくあるかと思います。背景色の指定はとても簡単です。背景色指定のプロパティはbackground-colorなので、background-colorを使って好きな色を指定するだけです。色の指定はRGB値か色の名前で行います。背景色を指定してみようでは、実際に例を見ていきましょう。body { background-color: red; }上の様に指定すること……
投稿日:
CSSで文字色を指定する方法
これも多く使用することがあるデザインです。文字の色を変更したい時は、colorを使用します。記述の仕方などは、背景の色を指定する時と一緒で、とても簡単です。文字色指定のプロパティはcolorなので、colorを使って好きな色を指定するだけです。文字色の指定の場合も、RGB値か色の名前を使用します。文字色の指定をしてみようでは実際に、例を見ていきましょう。body { color: white; ……
投稿日:
CSSで便利な隣接セレクタの使い方
CSSを記述するのに慣れてきた時に覚えるととても便利なものの１つに、隣接セレクタと呼ばれるものがあります。名前の通り、１つの要素に隣接して記述されている要素にスタイルを指定できるものです。＋を使用して記述します。隣接セレクタを使ってみようでは実際に、例を見てみましょう。セレクタ＋セレクタ{ プロパティ: 値; }上記の様な記述の仕方になります。例えば、h1に隣接するpの文字の色を赤くしたいとしま……
投稿日:
万が一に備えて！スマホのアドレス帳をGoogleで管理する方法
スマートフォンの機種変更の際に、電話帳の移し換えの方法がわからなくて苦労した経験をお持ちの方は多いのではないでしょうか。そんな時、Googleアカウントに電話帳を保存しておけば、面倒な手続きは一切なく、新しいスマホでもメールアドレスを使用できます。また、盗難時やスマホをなくしてしまった時にも便利なので、一度やっておくことをオススメします。Googleアカウントとの同期設定「アカウントの同期」なんて……
投稿日:
偏見をなくした良質なユーザーテストを行うための６つの方法
ゲリラ戦術を用いたユーザーテストに頼っている、小さなプロダクトチームでいつも働いてきました。私たちはこれらのテストのために、最適な数の参加者を募集しようとします。私たちは、ターゲットとなるオーディエンスを反映したグループ層であることを確認します。私たちは、より自然な行動を促し、参加者たちが陥りがちな偏見の影響を減少させる、形式張らないアプローチを利用します。 しかし、私たちがほとんど話したことが……
投稿日:
HTML・CSS・PHPなどのコードへのコメントタグの書き方まとめ
HTML・CSS・PHPなどの各プログラミングコードへのコメントタグの書き方をまとめました。ここで書いたコメントは実際にサイトで表示されるのではなく、プログラミング内だけに表示されるもので、主に自らが書いたコードが何を意味するかなどを分かりやすくしておくために用いられます。HTMLの場合<!-- ここに表示させないコメントを入れます -->HTMLの場合、コメントアウトは「<!-……
投稿日: