昔はHTMLでホームページのレイアウトを組む時、テーブルを使っていました。そして、時代は流れ、floatで要素を横並びにして、clear: both;で横並びを解除していた時代もありました。 そして、現在ではどのようにしてHTMLのレイアウトを組むのか・・・それを説明していきます。 現在はdisplay:flexでのレイアウトが主流 さて、久々にHTML/CSSを始めた人は「なんじゃそりゃ？」となるでしょう。 インライン要素・ブロック要素はご存じでしょうか？CSSでdispl...

何言ってるかわからないと思いますが、例えば以下のような時 <div class="group"> <label>名前</label> <input type="text"/> </div> 上記のようなHTMLで、テキスト入力にフォーカスされたら、ラベルタグの背景色を変えたい時普通に考えると、兄弟要素がフォーカスされた時に、ラベルの背景色を変えるので以下のようになります。 in...

まず、以下のサンプルを見てください。 最近、こういう角を丸めたようなデザインのサイトが増えたと思いませんか？様々な所で作り方が紹介されていますが、SVGを使ったり、clip-pathを使って作られています。しかし、CSSだけでも作れたので、この角丸デザインを画像を使わずに作る方法をご紹介します。 逆角丸の解説サンプル 段階的にわかるようにサンプルを用意しました。 逆角丸の作り方 まず、初めにdivタグで囲った画像を用意します。 <div class="cont...

例えば、要素の高さを「n文字分」と指定したい時のheightの指定方法をご紹介します。 em、remはfont-size以外にも使える ざっくり行きますが、heightを以下のように指定してみてください。 p { height: 3em; } 多少ずれると思いますが、近い大きさにはなったんじゃないでしょうか？ なぜずれるか？ぴったり3行ではなく、少しずれる原因はline-heightです。line-heightは1emに含まれません。 そこで、以下のように変えてみましょう。 ...

textareaタグの中で改行しようと思った時、brタグを使っても、\n（ラインフィード、LF）を使っても改行されませんでした。textareaタグの中で改行する方法をご紹介します。 textareaタグ内の改行は数字参照の"&#13;"を使用する 先ほども書きましたが、textareaタグ内ではbrタグはそのまま表示されてしまいますし、\n（ラインフィード）もそのまま表示されてしまいます。 そこで、数字参照の&#13;を使ってみてください。 <text...

よく本を読んでいると、文字を強調したい時に点々が打ってあるのを見ます。私は強調したい所にはマーカーを引きますが、デザイナーがそういう強調表示のデザインを組んできた時、どのような方法が取れるでしょうか。見た目だけをデザイン通りに整えるのは難しいことではありませんよね。 text-emphasisを使う text-emphasisをご存じでしょうか？文字の上に強調の点々を付けるプロパティです。 https://developer.mozilla.org/ja/docs/Web/C...

CSSでは影を付ける時、長い間box-sizingが用いられてきました。 しかし、最近、filterをほとんどのブラウザがサポートするようになったため、影にもfilter: drop-shadowという選択肢が登場しました。こいつ超優秀です。 box-shadowでは四角い影しか付けられない まず、下記サンプルを見てください。 もうわかると思いますが、同じように影を付けるCSSでも、以下のような違いがあります。 box-shadowでは、要素の形に対して影が描画されます。fi...

VisualStudioCodeでCSSを記述している時、カーソルを移動させようと思って、いつも間違ってクリックしてしまうのが『MDN Reference』 いつもMDN Referenceを消そうと思うのですが、VisualStudioCodeって設定が多すぎて、どこ変えたらいいかわからないので、後回しにしてました。でも、生産性を考えた時に、毎日5回は押し間違えてるし、カーソルを移動させるたびにMDN Referenceを避けるために4秒くらいロスしている。積もり積もって、...

CSSを記述していて、良くあることとして クラス名のルールが無く、後で読み返した時に、どこで使われているスタイルなのかわからない クラス名が以前記述した物と被っていて、指定していないプロパティが勝手に適応されてしまう（汚染が発生している） １つのクラス名を別々の場所で複数回使っており、編集したいプロパティがどこに書いてあるかわからない レスポンシブに対応するため、タブレット・スマホの画面幅のスタイルを記述したが、記述場所が離れていて、探すのが大変 CSSはそれ自体に記述ルール...

私はWEBサイト制作を始めた頃、中央揃えはtext-align: center;を使っていました。しかし、それだけだと難しい物やうまく調整できない物が出てくるんですね。今回は要素の簡単な位置調整の方法をご紹介します。 インライン要素を左右中央揃えにする場合 左右の中央揃えはどれも簡単です。インライン要素の場合は以下の通りです。 <div class="outer"> <p>コンテンツ</p> </div> ....