こんにちは。

HTML5で、インライン要素の中にブロック要素を入れてはいけないと言うものの、
カード風のレイアウトで、
カード全体をクリックできるようにするためには、
<a>タグでカード全体をラップするしかないと思うのですが、
そもそもこのやり方は、推奨されないのでしょうか??

やはりカードの中にボタン等設けるべきなのでしょうか??

ちゃんと動作すればいいじゃん!と言う意見ではなく、
HTML/CSSの書き方にこだわりのある方に、意見を伺いたいと思います。
どうぞよろしくお願いします。

A 回答 (2件)

html5では、インライン要素やブロック要素の概念自体がなくなりましたよ?


そんなものは、廃止です。なんでもやっていいわけではないく、「コンテンツ・モデル」が変わったわけです。

このブロック扱い、インライン扱いはcssだけで使用します。HTML5の文章構造からは、インライン要素の中に、ブロック要素を入れられます。

じゃんじゃん、<a>タグでカード全体をラップしてください。なんの問題もありません。

「html5 ブロック要素 インライン要素」で検索すれば、説明したページが山ほど出てきますし、なんなら、<a>タグでカード全体をラップしたページをlintしてみてください。バリデート通りますよ。
    • good
    • 1
この回答へのお礼

あ、そうなんですか。安心しました。ありがとうございました!!

お礼日時:2017/05/13 05:51

どうしてもリンクで管理しなくてはいけないのではなければ


javascriptでclickイベントをふってやればよいでしょう
    • good
    • 1
この回答へのお礼

素早い回答ありがとうございます。

お礼日時:2017/05/13 05:50

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aと関連する良く見られている質問

Qフレームを作ったページ全体にmarginを使いたい。(余白を設けたい)

フレームを使って左右にメニューとコンテンツで、分けたページを作っています。

フレームを使わないページの場合は、body要素を使うのでCSSに
body{margin-left:30%}
とか書けば、左の部分に余白を設けられると思うのですが、フレームを使うとbodyを使わないと思うのですが、どのようにすれば実現できるのでしょうか?

Aベストアンサー

フレームはただ単にhtmlファイルを読み出してくっつけているだけですので、
フレームで使う両方のhtmlには、bodyがありますので、
body{margin:30px;}で問題ないです。

QHTML非推奨の記述について

http://www.scollabo.com/banban/dep/index.html
HPの作成の際にこのサイトにお世話になりました。そこで、HTMLからXHTMLへの移行について少し知りました
それでこのサイトでは非推奨の記述について指摘しているのですが、これは

・なるべく使わないほうが移行の時やバージョンアップの時に書き換えの手間が省ける

程度の非推奨なのでしょうか?それとも

・使うと閲覧時に問題がおきたり、表現に致命的な影響
が出る

のような非推奨なのでしょうか?
どのくらい注意・確認して記述するべきか教えてください
質問が抽象的のような気もしますがよろしくおねがいします

Aベストアンサー

参考URLの「非推奨項目について」という欄を参照してください。

ブラウザ側が過去バージョンをサポートしている限りは大丈夫ですけど、将来ブラウザがサポートしなくなった場合に、

・使うと閲覧時に問題がおきたり、表現に致命的な影響
が出る

ということになるでしょう。

参考URL:http://www.hajimeteno.ne.jp/html40/att/attn.html

Q全体の要素に指定するには?

今、XHTML 1.0 Transitionalでサイトを作っているのですが、
CSSを使用しています。

そこで、XML宣言を抜くとCSSが適用されなくなりました。
XML宣言を抜きつつCSSを適用させるにはどうしたらよいですか?

Aベストアンサー

適応されていないのは、外部スタイルシートだと思われますが、
おそらく文字コードを正しく判断できていないのかもしれません。

外部スタイルシートの文字コードがutf-8の場合は、外部スタイルシートに次のように書き加えてください。


@charset "utf-8";

Q推奨するHTMLの基本骨格

まだ、HTMLのタグも知らない初心者です。
通常、基本骨格というとhtml・head・body要素からなりますが、推奨されているような基本骨格というのはどういうものでしょうか?
自分なりに調べてみると、

----------------------------------------------------------------
HTML4.01Strictの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="言語コード">「*1」
<head>
<meta http-equiv="Content-Type" content="MIMEタイプ;charset=文字エンコード">「*2」
</head>
<body>
</body>
</html>

*1:要素内に使用している「言語コード」の言語を宣言(サーチエンジンのロボットに何語で書かれているか判別できる、文字化け防止)
*2:文書を読み込むときに文書形式は「MIMEタイプ」、記述されている文字コードは「文字エンコード」という情報を、ユーザーエージェントに与える(文字化け防止)
言語コード:ja(日本語)
MIMEタイプ:text/html(HTML4.01ではHTML文書としては、「text/html」以外のMIMEタイプの使用を禁止している)
文字エンコード:Shift_JIS(WindowsやMacでは「Shift_JIS」が主流)

----------------------------------------------------------------
XHTML1.0Strictの場合
<?xml version="1.0" encoding="文字エンコード" standalone="no"?>「*3」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="言語コード" lang="言語コード">「*4」
<head>
<meta http-equiv="Content-Type" content="MIMEタイプ; charset=文字エンコード" />「*5」
</head>
<body>
</body>
</html>
*3:スタンドアロン宣言はこの文書以外に参照すべきDTDがあるかどうかを指定するもので、XHTMLではどのバージョンでも「no」でよい。
*4:XHTML1.0では、XHTMLの環境に対応していないことへの配慮として、lang属性とxml:lang属性の両方を指定する。
*5:「*2」と同様。
言語コード:ja(日本語)
MIMEタイプ:text/html(XHTMLの「MIMEタイプ」で推奨されているのは「application/xhtml+xml」だが、IE7でも対応し切れていないので、MIMEタイプは「text/html」にするしかない)
文字エンコード:Shift_JIS(WindowsやMacでは「Shift_JIS」が主流)

----------------------------------------------------------------
XHTML1.1の場合
<?xml version="1.0" encoding="文字エンコード" standalone="no"?>「*6」
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="言語コード">「*7」
<head>
<meta http-equiv="Content-Type" content="MIMEタイプ; charset=文字エンコード" />「*8」
<title></title>「*9」
</head>
<body>
</body>
</html>

*6:「*3」と同様。
*7:lang属性はXHTML1.1では、後方互換の指定は全て非推奨のため記述できない。
*8:http-equiv属性はXHTML1.1では、HTML互換のため非推奨。
*9:head要素の中には、文書の題名を表すtitle要素が一つ現れなければならないので記述しなければならない。
言語コード:ja(日本語)
MIMEタイプ:text/html(XHTMLの「MIMEタイプ」で推奨されているのは「application/xhtml+xml」だが、IE7でも対応し切れていないので、MIMEタイプは「text/html」にするしかない)
文字エンコード:Shift_JIS(WindowsやMacでは「Shift_JIS」が主流)

----------------------------------------------------------------
となりました。
また、XHTMLのMIMEタイプでXHTMLであってもブラウザが対応してないため「application/xhtml+xml」にはできないとありましたが、「application/xhtml+xml」が好ましいと書いてあるサイトもあって「text/html」とどちらが正しいのか分かりません。
また、「*8」は非推奨となっていますが、このmeta要素の部分の記述をしているところもあるので記述するのかしないのかはっきり分かりません。
この「推奨する基本骨格のHTML書式」(この言葉が妥当かは分かりませんが)に修正や追加するものがあったら教えてください。
回答よろしくお願いします。

まだ、HTMLのタグも知らない初心者です。
通常、基本骨格というとhtml・head・body要素からなりますが、推奨されているような基本骨格というのはどういうものでしょうか?
自分なりに調べてみると、

----------------------------------------------------------------
HTML4.01Strictの場合
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="言語コード">「*1」
<head>
<meta http-equiv="Content-Type" content="MIMEタイプ;charset=文字エ...続きを読む

Aベストアンサー

こんにちは。

> まだ、HTMLのタグも知らない初心者です。

ならば、実践に基づいた学習の前に、概念や勧告をそこまで掘り返して調べる必要は無いと存じます。
と申しますのも、『「推奨する基本骨格のHTML書式」(この言葉が妥当かは分かりませんが)』という、自らの妥当性に関するコメントが的を得ているからです。

miya_HN 殿の仰る通り、HTML の基本骨格というのは、純粋に html・head・body (frame をベースとするページであれば body でなく frameset)要素からなると言う理解で必要十分です。

ではなぜ「推奨される」とする記法がいくつか定義されているのでしょう?
お調べになったマークアップ・ランゲージの中に XHTML がございますが、「XHTML(Extensible HyperText Markup Language):Webページを記述するためによく使われるHTMLを、XMLに適合するように定義し直したマークアップ言語。(by e-word)」とあるように、「基本骨格」と言うよりも、基本として以前に定義されていた HTML を、後に策定された XML に包括的に取り込む指向として再定義された「拡張骨格」なんです。

同様にして、「HTML4.01Strict」とありますが、なぜ厳密化する必要があるのでしょう?
それは、厳密化しなくてもルーズなコーディングでいい加減に HTML を記述しても、ある程度ブラウザ側がルーズなコーディングをカバーしてくれるからです。すなわち、(Strict でない)ルーズなコーディングをカバーするためのロジックがブラウザ側に組み込まれているからです。
当然ブラウザの容量は、この分の(コーディングする人がちゃんと書けば必要ではなかった)プログラムだけ容量が大きくなる訳です。

では、PDA やモバイルフォンのブラウザはどうでしょう?
ブラウザにこんなに大きな容量を使ってられませんね。

と言う事で、「HTML を記述する人がちゃんとコーディングしましょう」という流れになってきたんです(ブラウザの開発や試験などに携わる業務を経験すれば、この辺の事が分かるでしょう)。


話は戻りますが、どの環境やどのブラウザのためにサイトを構えるかを考え、記述するマークアップ・ランゲージをチョイスしましょう。

モバイル用のサイトなら、ある特定のモバイルフォンが、どのマークアップ・ランゲージの表示をサポートしているかをチェックし、それからコーディングすれば良いでしょう。


まぁ、本音を言えば、初心者ならそんなことよりもガツガツ HTML、CSS、Javascript、PHP、Java、Database、Web Server などの学習に夢中になった方がずっと生き生きしていると思いますよ。

こんにちは。

> まだ、HTMLのタグも知らない初心者です。

ならば、実践に基づいた学習の前に、概念や勧告をそこまで掘り返して調べる必要は無いと存じます。
と申しますのも、『「推奨する基本骨格のHTML書式」(この言葉が妥当かは分かりませんが)』という、自らの妥当性に関するコメントが的を得ているからです。

miya_HN 殿の仰る通り、HTML の基本骨格というのは、純粋に html・head・body (frame をベースとするページであれば body でなく frameset)要素からなると言う理解で必要十分です。

...続きを読む

Qhtml4.01で使われないことが推奨されているタグ

タグの参考書にHTML4.01に使われないことが推奨されているタグがあり、そのタグはスタイルシートに替えて使用することが書かれていました。

主要なもので、タグではfontタグが、属性ではcoloerの指定、div、p、table、tr、td、h1~h6、imageのalignの指定、imageの borderの指定、trとtdのwidthとheightなどがありましたが、リニューアルされたばかりのページなどを見ても、完全にそれを守っているページはありませんでした。fontタグは使われていなかったのですが、それ以外のタグはそのまま使ってhtml4.01Transtisionとするのは一般的なのでしょうか。推奨を守ってhtml4.01 strictとして制作しているwebデザイン会社などはどのくらいあるのでしょうか。

fontタグはできるとしても、alignやborderなどを使用しないで作成すると、すべてのtdやtrなどにclass指定で指定する方法でしょうか?

Aベストアンサー

#1>修飾を使えば

「文脈的セレクタ」と言うらしく、
DIV IMG{
border-style:none;
}
と記述すると、
<DIV>
<IMG ~ NAME="img01a"> <IMG ~ NAME="img01b">
</DIV>
<IMG ~ NAME="img02a">
に於いて、img01a, img01b には指定が有効で
img02a は指定外となります。

で、これが
DIV IMG{
border-style:none;
}
.cl01 IMG{
border-style:solid;
}
と記述すると、
<DIV CLASS="cl01">
<IMG ~ NAME="img01a"> <IMG ~ NAME="img01b">
</DIV>
<DIV>
<IMG ~ NAME="img02a">
</DIV>
に於いて、img01a, img01b にはsolid指定が有効で
img02a はnone指定が有効となります。
(詳細は、参考URLか、再度のご質問を。
説明は少々細かいので・・・)



>html4.01strictで書くことに賛成ですか?

それ自体には賛成しまますが・・・。
スタイルシートが無効だったり、
各ブラウザの対応状況を配慮すると、少々・・・。
まだスタイルシートに対するブラウザのバグが・・・。

という事で、それぞれの環境を配慮して作るという前提で
html4.01strictで書く事はお勧めします。


参考:

とほほのWWW入門
とほほのスタイルシート入門
http://tohoho.wakusei.ne.jp/css/index.htm

どら猫本舗のリファレンスカウンター
カスケーディングスタイルシート第1水準
http://www.doraneko.org/webauth/css1/19961217/Overview.html#contextual-selectors

参考URL:http://www.doraneko.org/webauth/css1/19961217/Overview.html

#1>修飾を使えば

「文脈的セレクタ」と言うらしく、
DIV IMG{
border-style:none;
}
と記述すると、
<DIV>
<IMG ~ NAME="img01a"> <IMG ~ NAME="img01b">
</DIV>
<IMG ~ NAME="img02a">
に於いて、img01a, img01b には指定が有効で
img02a は指定外となります。

で、これが
DIV IMG{
border-style:none;
}
.cl01 IMG{
border-style:solid;
}
と記述すると、
<DIV CLASS="cl01">
<IMG ~ NAME="img01a"> <IMG ~ NAME="img01b">
</DIV>
<DIV>
<IMG ~ NAME="img02a">
</D...続きを読む


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報