「思い通りにコードが動かない。みんなどう解決しているの?」 「思い通りのデザインにならず、時間だけが過ぎていく。」 誰もが一度はこう思ったことがあるはずです。思い通りの挙動にならないことが当たり前の世界とは知りつつも、エ…

「テキストが中途半端なところで折り返される」 「英語や文字がはみ出てしまう」 こんな悩みを持ったことはありませんか？ 小さなことですが、サイトの印象に関わる深刻な悩みの一つです。例えば、見出しに英語が含まれていて、それが…

「headについてはあまり意識した事がない。」 「何がhead内の必要要素なの、いまいち分かっていない。」 このような思いは、HTMLの学習を始めたばかりの人にとっては自然です。head内の書き方よりもbody内のコーデ…

サイトのコンテンツはテキストだけだと単調になりがちですが、吹き出しがあると目を引きますし楽しくなりますよね。また、会話形式のコンテンツが吹き出しで作られていると親しみが湧くはずです。この吹き出し、画像は使わずにCSSだけ…

「CSSでグラデーションを実現できることは知っているが、使ったことはない。」 「どんな場面で、グラデーションを使えばいいのか、わからない。」 CSSで「グラデーション」と聞いて、実際に上記の意見が皆さんの率直な感想ではな…

「文字の単位が複数あって、結局どれを使えばいいのかわからない。」 「文字単位のそれぞれの特徴がよくわかっていない。」 文字サイズの単位にこのような感想を感じた人は、htmlの学習を始めたばかりの人には多いのではないでしょ…

レスポンシブ対応は難しい、と学習を始めたばかりの人は思いませんか。 そして、意外なところでレイアウトが崩れ、その修正に時間がかかりすぎるという問題に直面した人もいませんか？　 確かに難しい、でも、制作回数を増やすことで慣…

「transitionって何?」 「CSSだけでボタンに動きをつけたりしたい」 「transition」と聞いて、「あのプロパティね」とすぐに思い出す人は初学者はほとんどいないのではないでしょうか? 初心者向けのCSSテ…

「backgroundの値の設定方法が分からない。」 「backgroundでどういった使い方ができるの？」 CSSを学びはじめると、こんな疑問を抱いたことのある人も多いのではないでしょうか？ backgroundでは背…

「transformは何ができるの?」 「transformはどんな時に使うの?」 そもそも、「transform」自体に馴染みがないという人が多いのではないでしょうか？ですが、この効果はWebデザインに携われば必ず目に…

コンバージョン率にも大きく関係のあるボタンのデザイン。自分で作るとなるとCSSをたくさん書く必要があったり、書いてみても思ったようにできなかったりと大変ですよね。 そこでHTMLとCSSだけで作れるボタンのデザインのサン…

「borderの幅の指定によってレイアウトが崩れることがある」 「border指定は、よく使うけど、どのような場面で使えるのかよくわからない。」 初学者が感じるよくある疑問です。CSSでWebをデザインする際に、高い頻度…

「divタグって、使い方が決まっていない分、分かりづらい。」 「どんな時にdivタグを使うの?」 こんな疑問を感じていませんか？何にでも使える「divタグ」だからこそ、逆にその使い方がわからなくなってしまいます。全てのタ…

「Flexboxは、どんなことができるのか、いまいち分かっていない。」 「Flexboxって、横並び機能のfloatやdisplayとどう違うの?」 CSSの学習を始めた人の中には、こう思う人もいるでしょう。Flexbo…

「CSSの指示が効かない。どうして?」 「CSSが効かなかった。修正に時間がかかりすぎる。」 正しいCSSの設定が効かないことがよくありますし、「効かない」ことをどうにかしようとして、更に設定が複雑になり、収集がつかなく…

「擬似要素って、なんとなくとっつきづらい」 「擬似要素で表現できるものは、CSSに書けばよくない?」 こんなイメージを「擬似要素」に持っていませんか？ 特に、アイコン表示などは、CSSでも実現できるのに、なぜ擬似要素なの…

「line-heightの数値設定の仕組みがわからない」 「いつも適当に行間の数値を設定している。」 という声を聞きます。確かに、行間の幅を設定する「line-height」の値は複数の種類があって、「曲者」という印象が…

使いやすく、挙動もすぐわかるため「なんとなく」分かったつもりになるのが「paddingプロパティ」や「marginプロパティ」です。しかし、厳密に幅の設計を行うと、途端に迷いが生じませんか？ 「『余白』の計算と言われると…

この記事ではCSSアニメーションについて解説をしながらサンプルを掲載していきます。 CSSは書けるけどアニメーションは詳しくない。 CSSのアニメーションに興味がある。 だけどどう実装すればいいかわからない…… 主にコー…

「z-indexプロパティ」と聞くと、面倒くさいと顔をしかめる人もいるのではないでしょうか？「要素の順位を決めるプロパティであることはわかっている。でも、思い通りの順位にならないじゃないか」と感じたことはありませんか？ …