【CSS】beforeとafterなど擬似要素の使い方
「擬似要素って、なんとなくとっつきづらい」 「擬似要素で表現できるものは、CSSに書けばよくない?」 こんなイメージを「擬似要素」に持っていませんか? 特に、アイコン表示などは、CSSでも実現できるのに、なぜ擬似要素なの…
「擬似要素って、なんとなくとっつきづらい」 「擬似要素で表現できるものは、CSSに書けばよくない?」 こんなイメージを「擬似要素」に持っていませんか? 特に、アイコン表示などは、CSSでも実現できるのに、なぜ擬似要素なの…
「line-heightの数値設定の仕組みがわからない」 「いつも適当に行間の数値を設定している。」 という声を聞きます。確かに、行間の幅を設定する「line-height」の値は複数の種類があって、「曲者」という印象が…
使いやすく、挙動もすぐわかるため「なんとなく」分かったつもりになるのが「paddingプロパティ」や「marginプロパティ」です。しかし、厳密に幅の設計を行うと、途端に迷いが生じませんか? 「『余白』の計算と言われると…
この記事ではCSSアニメーションについて解説をしながらサンプルを掲載していきます。 CSSは書けるけどアニメーションは詳しくない。 CSSのアニメーションに興味がある。 だけどどう実装すればいいかわからない…… 主にコー…
「z-indexプロパティ」と聞くと、面倒くさいと顔をしかめる人もいるのではないでしょうか?「要素の順位を決めるプロパティであることはわかっている。でも、思い通りの順位にならないじゃないか」と感じたことはありませんか? …
HTMLを学習していると、そのほとんどの時間をbodyタグ内のコーディングに費やしがちで、head内の機能について「よくわからないけど、機能しているから後回しにしよう」と学習を深めることを怠りがちです。 事実、筆者も、h…
「CSSの基本や書き方を手っ取り早く知りたい。」 「一体、CSSでできることって何なの?」 このような声は、Web制作を始めた人にとっては当然のことです。HTMLと並んで学ぶデザイン、配置の機能を担う役割がCSSですが、…
「ボタンってどうやってつくるの?」 「どうやったらいいボタンができるの?」 Webサイトでも、スマートフォンアプリでもよく見かけるボタンは、簡単に作成が可能です。そのため、制作に慣れた人も、「ボタン」について更に学ぶ知識…
「formタグやinputタグがいまいちわからない・・」 「フォームの作成で、最低限知っておかないといけないことは何なの?」 これは、HTMLで始めてフォームをデザインする人が必ず直面する問題です。 これまでWebデザイ…
「要素を横並びに配置したいんだけど、レイアウトが崩れてしまう。」 「floatだけだと、使い勝手が悪い。他に横並びの方法はないのだろうか。」 Webデザインを学んでいると、要素を横並びにする場面が出てきます。特に、spa…
「CSSのpositionってどう使っていいかわからない。」 「スマホで見たときにレイアウトが崩れていた。正直、CSSのpositionは使いづらい」 これは始めたばかりの人にとっては自然な印象です。どのサイトにも、「使…
「brタグ(改行で使用するタグ)で改行したけど、スマホで見た時に、文章がバラバラになったけど、上手い解決はないの?」 「brタグってあまり使わない方がいいって聞いたけど、本当? でも、そうなら、どうしたら改行できるの?」…
「コメントアウトって意味あるの? 単なるメモでしょ。」 「コメントアウト」ってどんなときに使うの? これらは、HTMLのコードを書き始めた人が必ず感じる疑問の一つです。コメントを残すことを「個人的なメモ書き」程度に認識し…
リンクは、サイトのいろいろなところで使われています。日本で最も有名な「Yahoo Japan」のサイトは、リンクだらけです。それ以外にもバナー広告など挙げればキリがないですね。 これを作るのが「アンカータグ(aタグ)」…
「正しくパスを書いたのに画像が表示されない」 「画像の配置をどう調整すればいいの」 そう思ったあなたにぜひ見てもらいたい記事です。 画像のない文章はつまらないので、Webサイトの制作ではHTML上で「imgタグ」を頻繁に…
スタイルシートに記述したコードを読み込ませる前にブラウザがデフォルトで持つCSSをリセットする用途でリセットCSSは用いられています。 今回はリセットCSSの基本的なことから自作する手順まで説明します。リセットCSSでリ…
htmlで表を作るときはtableタグを使います。 tableタグはシンプルな仕組みで簡単に扱う事ができますが、使う場面がそこまで多くないので記述の仕方を忘れている方もいるかと思います。 このページでは、tableタグの…
こんにちは、A-SKです。 今回は時間があまりない方でも、短時間でHTMLのタグについての基礎知識が身につく記事を執筆致しました。 そもそもHTMLとは何かから始まり、タグの基礎的な知識、役割を基盤にしながら、どれだけタ…
htmlを勉強中の皆さん・コーダーのみなさん、こんにちは。都内でフロントエンドエンジニアをしているきむらです。 今回は、htmlのタグの1つであるspanタグについての記事です。何となく文字装飾につかっていることの多いs…