Webサイトを作るうえで欠かせないのがHTMLやCSSといったマークアップ言語（プログラミング言語ではありません）です。ここでは、初心者向けにHTMLやCSSを丁寧に解説しています。
HTML・CSS
「backgroundの値の設定方法が分からない。」 「backgroundでどういった使い方ができるの？」 CSSを学びはじめると、こんな疑問を抱いたことのある人も多いのではないでしょうか？ backgroundでは背…
HTML・CSS
「transformは何ができるの?」 「transformはどんな時に使うの?」 そもそも、「transform」自体に馴染みがないという人が多いのではないでしょうか？ですが、この効果はWebデザインに携われば必ず目に…
HTML・CSS
コンバージョン率にも大きく関係のあるボタンのデザイン。自分で作るとなるとCSSをたくさん書く必要があったり、書いてみても思ったようにできなかったりと大変ですよね。 そこでHTMLとCSSだけで作れるボタンのデザインのサン…
HTML・CSS
「borderの幅の指定によってレイアウトが崩れることがある」 「border指定は、よく使うけど、どのような場面で使えるのかよくわからない。」 初学者が感じるよくある疑問です。CSSでWebをデザインする際に、高い頻度…
HTML・CSS
「divタグって、使い方が決まっていない分、分かりづらい。」 「どんな時にdivタグを使うの?」 こんな疑問を感じていませんか？何にでも使える「divタグ」だからこそ、逆にその使い方がわからなくなってしまいます。全てのタ…
HTML・CSS
「Flexboxは、どんなことができるのか、いまいち分かっていない。」 「Flexboxって、横並び機能のfloatやdisplayとどう違うの?」 CSSの学習を始めた人の中には、こう思う人もいるでしょう。Flexbo…
HTML・CSS
「CSSの指示が効かない。どうして?」 「CSSが効かなかった。修正に時間がかかりすぎる。」 正しいCSSの設定が効かないことがよくありますし、「効かない」ことをどうにかしようとして、更に設定が複雑になり、収集がつかなく…
HTML・CSS
「擬似要素って、なんとなくとっつきづらい」 「擬似要素で表現できるものは、CSSに書けばよくない?」 こんなイメージを「擬似要素」に持っていませんか？ 特に、アイコン表示などは、CSSでも実現できるのに、なぜ擬似要素なの…
HTML・CSS
「line-heightの数値設定の仕組みがわからない」 「いつも適当に行間の数値を設定している。」 という声を聞きます。確かに、行間の幅を設定する「line-height」の値は複数の種類があって、「曲者」という印象が…
HTML・CSS
使いやすく、挙動もすぐわかるため「なんとなく」分かったつもりになるのが「paddingプロパティ」や「marginプロパティ」です。しかし、厳密に幅の設計を行うと、途端に迷いが生じませんか？ 「『余白』の計算と言われると…
HTML・CSS
この記事ではCSSアニメーションについて解説をしながらサンプルを掲載していきます。 CSSは書けるけどアニメーションは詳しくない。 CSSのアニメーションに興味がある。 だけどどう実装すればいいかわからない…… 主にコー…
HTML・CSS
「z-indexプロパティ」と聞くと、面倒くさいと顔をしかめる人もいるのではないでしょうか？「要素の順位を決めるプロパティであることはわかっている。でも、思い通りの順位にならないじゃないか」と感じたことはありませんか？ …
HTML・CSS
HTMLを学習していると、そのほとんどの時間をbodyタグ内のコーディングに費やしがちで、head内の機能について「よくわからないけど、機能しているから後回しにしよう」と学習を深めることを怠りがちです。 事実、筆者も、h…
HTML・CSS
「CSSの基本や書き方を手っ取り早く知りたい。」 「一体、CSSでできることって何なの?」 このような声は、Web制作を始めた人にとっては当然のことです。HTMLと並んで学ぶデザイン、配置の機能を担う役割がCSSですが、…
HTML・CSS
「ボタンってどうやってつくるの？」 「どうやったらいいボタンができるの？」 Webサイトでも、スマートフォンアプリでもよく見かけるボタンは、簡単に作成が可能です。そのため、制作に慣れた人も、「ボタン」について更に学ぶ知識…
HTML・CSS
「formタグやinputタグがいまいちわからない・・」 「フォームの作成で、最低限知っておかないといけないことは何なの?」 これは、HTMLで始めてフォームをデザインする人が必ず直面する問題です。 これまでWebデザイ…
HTML・CSS
「要素を横並びに配置したいんだけど、レイアウトが崩れてしまう。」 「floatだけだと、使い勝手が悪い。他に横並びの方法はないのだろうか。」 Webデザインを学んでいると、要素を横並びにする場面が出てきます。特に、spa…
HTML・CSS
「CSSのpositionってどう使っていいかわからない。」 「スマホで見たときにレイアウトが崩れていた。正直、CSSのpositionは使いづらい」 これは始めたばかりの人にとっては自然な印象です。どのサイトにも、「使…
HTML・CSS
「brタグ(改行で使用するタグ)で改行したけど、スマホで見た時に、文章がバラバラになったけど、上手い解決はないの？」 「brタグってあまり使わない方がいいって聞いたけど、本当? でも、そうなら、どうしたら改行できるの?」…
HTML・CSS
「コメントアウトって意味あるの? 単なるメモでしょ。」 「コメントアウト」ってどんなときに使うの？ これらは、HTMLのコードを書き始めた人が必ず感じる疑問の一つです。コメントを残すことを「個人的なメモ書き」程度に認識し…
