Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

CSS サイト構築

a要素の中にブロック要素

投稿日:

                                                                                                                                 

今日結構衝撃的なことを知りました。

それは
a要素の中にdivやpなどのブロック要素を入れても良いということ。

今日までは
a要素はインライン要素で
divはブロック要素だから
塊全体にリンクを貼りたいときは
divを親要素にしてposition:relative;を指定
a要素に
position:absolute;
top:0;
left:0;
display:block;
って指定していました。

でも今日知ったことは
そもそもhtml5にはインライン要素とブロック要素という概念がない
ということ。ええええ!私がweb制作に携わり始めたときは既にhtml5だったのに!!!知らなかった。

とりあえずコンテンツモデルが変わっているらしい。
名前が変わっているだけで基本的に今までインライン要素だったものはブロック要素だったものを囲めないというのは
変わらないんですが、a要素だけは囲めるようになっているようです。

ただ、ulの直下にa要素を置くとかいった使い方は出来ないようなので注意しましょう。
以上!!

-CSS, サイト構築

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

bootstrap vol.04

bootstrapの機能を使う 今回がbootstrapのまとめのラストになります。 今回はタブの切り替えやカルーセルスライダーの実装の仕方について見ていきます。 タブの切替をする ul要素にclas …

no image

iframeのレスポンシブデザイン

youtube動画をサイトに埋め込む youtube動画をサイトに埋め込みたいというときの埋め込み方法を書いていきます。 動画の下にある共有をクリック 埋め込みコードをクリックするとhtmlが出てくる …

no image

CSS基礎編 vol.5

背景画像を複数設定する 昨日の記事でbackground-sizeについて書きましたが、本日は背景画像を複数設定する方法について書いていきます。 といっても、実際にすることはbackgroundにカン …

no image

【jQuery】初心者が勉強するjQuery

jQueryとは Web制作に携わっている人であれば一度は必ず耳にしているであろうjQuery。 私の中ではjQueryというのはなんとなくJSの難しい版だと勝手に解釈していました。 今回、改めてjQ …

no image

bootstrap vol.02

bootstrapでフォームのスタイリングをする 前回に引き続き、bootstrapについてです。 今回はフォームやボタンなどbootstrapを使ったスタイリングについて書いていきます。 フォームを …