こんにちは。

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と関連する良く見られている質問

Qjquery と javasprict

サイトを作成中です。
まず下記のとおりjqueryでheader、side、footerをインクルードしています。

<script>
$(function() {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});
</script>

次に、コピーライトの年を自動更新したく、footer.htmlの中にjavasprictを入れました。

Copyright&copy; 2014
 <script type="text/javascript" language="JavaScript">
<!--
TYnow = new Date();document.write( ' - ' + TYnow.getFullYear() );
// -->
</script> ○○○○ CO.,Ltd.

すると、全体が「-2017」としか表示されなくなってしまいました。
どうすればいいのでしょうか、どなたか教えて下さい。
宜しくお願いいたします。

サイトを作成中です。
まず下記のとおりjqueryでheader、side、footerをインクルードしています。

<script>
$(function() {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});
</script>

次に、コピーライトの年を自動更新したく、footer.htmlの中にjavasprictを入れました。

Copyright&copy; 2014
 <script type="text/javascript" language="JavaScript">
<!--
TYnow = new Date();document.wr...続きを読む

Aベストアンサー

ANo4です。

jQueryを利用なさっているのでしたね。
動作すれば良いのであれば、footer.htmlの内容を、

Copyright&copy; 2014<span id="copyright"></span> ○○○○ CO.,Ltd.

とでもしておいて、スクリプトの
$("#footer").load("footer.html"); の部分を

$("#footer").load("footer.html", function(){
var d = new Date();
$("#copyright").html(" - " + d.getFullYear());
});

のようにすれば動作すると思います。
(これだと、わざわざloadする意味がほとんどありませんけれど…)

※ idが重複するような場合は、違うものに変えて下さい。

Qjqueryで画像をスライドさせる方法

現在jqueryを勉強している者です。
max-width400px以下の時、画像を横にタップスライドさせるやり方が分かりません。

「http://kenwheeler.github.io/slick/」
上記のサイト内にある「single item」を参考にしたのですが、反応しませんでした。
教えて頂けますと幸いです。

スライドに使うHTMLは以下になります。
<div class="slick-img">
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212dc.jpg">
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212dc.jpg">
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212dc.jpg">
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212dc.jpg">
</div>

現在jqueryを勉強している者です。
max-width400px以下の時、画像を横にタップスライドさせるやり方が分かりません。

「http://kenwheeler.github.io/slick/」
上記のサイト内にある「single item」を参考にしたのですが、反応しませんでした。
教えて頂けますと幸いです。

スライドに使うHTMLは以下になります。
<div class="slick-img">
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212dc.jpg">
<img src="http://livedoor.blogimg.jp/ps3jp/imgs/a/5/a5f212dc.jpg">
<img src=...続きを読む

Aベストアンサー

何かしらのライブラリを使用しているのでしょうか?
いずれにしてもどのようなスクリプトを記述しているのか分からないので、何とも言えません。
補足コメントを付けた方が良いかと思います。

お望みの答えとは異なるかも知れませんが、
jQueryを学ばれているのであれば、jQuery以外の外部の道具に頼らず、
独自に実装されると良いと思います。

ただし、レスポンシブにしたり、タップスライドさせるとなると、結構複雑になってきます。
まずはレスポンシブでなく、またボタンでスライドさせるものを作ってみるのはいかがでしょうか。

カルーセル(スライド)を作る基本的な理論としましては、

まずHTMLの概要は、
<div class="carousel">
<ul class="carousel-inner">
<li class="carousel-item"><img ...></li>
<li class="carousel-item"><img ...></li>
<li class="carousel-item"><img ...></li>
<li class="carousel-item"><img ...></li>
</ul>
</div>
というような感じになります。

".carousel"が外枠で、".carousel-inner"が実際に「動く」部分です。

".carousel-inner"は、floatで横並びにさせた".carousel-item"が全て収まるwidthに設定します。

これをラップする".carousel"は、widthを".carousel-item"の1つ分の幅に設定し、
overflow: hiddenにして、".carousel-inner"の画面からはみ出る部分を隠してやります。

後はjQueryのanimateメソッドを使って、margin-leftを動かします。

ざっくりとした説明ですが、イメージ掴めそうですか??
期待した答えと全然異なっていたなら、すみません。
僕もJavaScriptを勉強している身の上なので、力になれたら嬉しい次第です。

何かしらのライブラリを使用しているのでしょうか?
いずれにしてもどのようなスクリプトを記述しているのか分からないので、何とも言えません。
補足コメントを付けた方が良いかと思います。

お望みの答えとは異なるかも知れませんが、
jQueryを学ばれているのであれば、jQuery以外の外部の道具に頼らず、
独自に実装されると良いと思います。

ただし、レスポンシブにしたり、タップスライドさせるとなると、結構複雑になってきます。
まずはレスポンシブでなく、またボタンでスライドさせるものを作ってみるの...続きを読む

QCSSを使って文章の行間を調節したいです。

あいうえお
かきくけこ
さしすせそ
たちつてと

の文章に、

HTMLに直接スタイルを記述するやり方(インラインっていうのでしょうか??)
で、行間を開けたいため、line-height属性を使い次のように記述したのですが・・

<p>あいうえお</p>
<p style="line-height:5;">
かきくけこ</p>
<p>さしすせそ</p>
<p>たちつてと</p>


これをブラウザで見ますと・・


あいうえお

かきくけこ

さしすせそ
たちつてと

と表示されました。




これを

あいうえお

かきくけこ
さしすせそ
たちつてと

と、なるように
(かきくけこ。さしすせそ。の間は開けないで・・)
表示させるには
どのようにCSSを記述すればよろしいでしょうか?

CSSを外部ファイル内や、<head>タグ内に記述するやり方ではなく、
直接HTMLタグにスタイルを記述するやり方を教えてください。

どなたかわかる方・・・・助けてください。。

私、初心者です。
わかりやすくお願いします。m(__)m

あいうえお
かきくけこ
さしすせそ
たちつてと

の文章に、

HTMLに直接スタイルを記述するやり方(インラインっていうのでしょうか??)
で、行間を開けたいため、line-height属性を使い次のように記述したのですが・・

<p>あいうえお</p>
<p style="line-height:5;">
かきくけこ</p>
<p>さしすせそ</p>
<p>たちつてと</p>


これをブラウザで見ますと・・


あいうえお

かきくけこ

さしすせそ
たちつてと

と表示されました。




これを

あいうえお

かきくけこ
さ...続きを読む

Aベストアンサー

今line-height:5となっているところを、
margin-top:〇〇px
としてみてください。

ただCSSを別ファイルに分けないで記述するのはどうかと思いますが。

Q画像と同じCSSデザインにしたいのですが、やり方が分かりません。

現在趣味でサイト制作をしている、プログラミング初心者です。
下記の参考画像のようなCSSデザインにしたいのですが、やり方が分からないため質問致しました。

参考画像のように、スマホで閲覧した際に「画像の上に文字列を配置し、文字列を半透明の枠で囲んでる」デザインにしたいのですが、どうしたら良いか分かりません。

ご教授お願い致します!

※レスポンシブのやり方は把握しております。

Aベストアンサー

これは思った以上に難しいかも知れません。
ブラウザによって見え方も違ってくるかも。
一番確実で安全な方法は、半透明グレー枠+テキストを画像に合成してしまうことです。
アルファチャンネルとレイヤー対応画像編集ソフトでできます。

作例はGIMP

Qサイトに表示しているテキスト(タグ?)について

今日は、サイトのある部分についての事について質問させてください。

右メニューなどに「タグ」「関連トピック」などの定義で
テキストをいくつか並べているサイトを最近よく見かけます。

例)まとめnaver
 https://matome.naver.jp/

これをすることによって、何が変わってくるのでしょうか?
また、これは手動で作っていくのか、自動で何かが表示されるように
しているのか……
など、上記テクニックの検索キーワードが思いつかず、
ご相談させていただきました。

Aベストアンサー

お探しのキーワードは、「タグクラウド」ではありませんか??

タグクラウドを設置する表の目的は、ユーザー(サイトの閲覧者)にとって便利であろう、という計らいです。
その単語をクリックすると、その単語に関連する記事だけを抽出して見られるのはご存知ですよね。
「カテゴリー」と異なるのは、一つの記事に対して複数設定できる、という点でしょうか。

でも確かに使う人少ないですよね?
もう一つ、いわば裏の目的として、SEO(検索エンジン最適化)のための対策と考えられます。

タグクラウドは、プログラムによって自動生成するものです。
主にPHPなどのプログラミング言語と、データベースという道具を使います。(ちなみに僕も作ったことあります。)
ブログの記事ページや、ショッピングサイトの商品ページのようなものは、
日付、記事タイトル、記事内容、画像、カテゴリー・・・というように、決めた形式でデータを管理しています。
この中に「タグ」というデータを設け、全データからその数や最大値をプログラムで割り出して、表示させます。

Webサイトは、内包するページ数が多いほど、検索上位に挙がってきやすいと考えられていたため、一時流行った名残ではないでしょうか。
しかしながら、今どきのSEOでは、似たようなページが多いことは、むしろペナルティと考えられる場合もあります。
この辺りはSEOの専門家の中でも、意見が分かれるところでしょう。
検索上位を表示するプログラムの仕様は明らかにされていないため、決定的な答えは出ません。

ツィッターやインスタグラム等のSNSでも「ハッシュタグ」と呼ばれるものがあり、SNSのハッシュタグで何かを検索する方は、非常に多いですよね。
一方で、Webサイトのタグクラウドを使いこなしているユーザーは少ないと思われます。
デザインによっては、何かかっこよく見えたりもして、Web系のエンジニアの読本にも、タグクラウドっぽいテキストが付いてたりします。
結局のところ、Webサイトにタグクラウドを設けるか設けないかは、好みの問題かと思います。
設置したから使う人もいれば、使わない人もいるでしょう。

技術に関するご質問でしたら、質問を変えるか、
「タグクラウド」、「作り方」で検索されてください。

少しは役に立つ説明になったでしょうか?

お探しのキーワードは、「タグクラウド」ではありませんか??

タグクラウドを設置する表の目的は、ユーザー(サイトの閲覧者)にとって便利であろう、という計らいです。
その単語をクリックすると、その単語に関連する記事だけを抽出して見られるのはご存知ですよね。
「カテゴリー」と異なるのは、一つの記事に対して複数設定できる、という点でしょうか。

でも確かに使う人少ないですよね?
もう一つ、いわば裏の目的として、SEO(検索エンジン最適化)のための対策と考えられます。

タグクラウドは、プロ...続きを読む

QHTML tableのセルにtextareaを使って外の枠に重ねて表示する方法

現在jspを使ってwebアプリを作っています
table のセルの1つをtextareaを使って文字の表示をしたいのですが
他の通常のセルと同様に見えるよう枠に合わせるためにはどうしたらよいのでしょうか?
<TEXTAREA style = 'width:100% でとりあえず横幅は広がるのですが
縦が変わらないのと外枠に重ねて表示する方法を教えてください。

Aベストアンサー

ぴったり一致するはずです。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

この類のリセットはきちんとされていますか??

Qhtmlでの商品リストの正しい文書構造

画像のような商品リストをマークアップしたいのですが、
サイトを見て回っていたら色々な方法で書かれていてどれが構造的に正しいのか分かりかねています。
その中でもこの2つが正しいのかなと思っているのですがどうなんでしょうか?

(サイトの多くはdivとpのみでマークアップしているものが多かったのですが、おそらく違うだろうと候補から消去)


<div class=○○○>
<dl>
<dt><img src="○○○"></dt>
<dd><h3>ペペロンチーノ</h3></dd>
<dd><h3>ニンニクと・・・</h3></dd>
<dd>1,000円</dd>
</dl>



</div>

divではなくarticle?


<ul>
<li>
<p><img src="○○○"></p>
<h3>ペペロンチーノ</h3>
<span>ニンニクと・・・</span>
<p>1,000円</p>
</li>



</ul>

画像のような商品リストをマークアップしたいのですが、
サイトを見て回っていたら色々な方法で書かれていてどれが構造的に正しいのか分かりかねています。
その中でもこの2つが正しいのかなと思っているのですがどうなんでしょうか?

(サイトの多くはdivとpのみでマークアップしているものが多かったのですが、おそらく違うだろうと候補から消去)


<div class=○○○>
<dl>
<dt><img src="○○○"></dt>
<dd><h3>ペペロンチーノ</h3></dd>
<dd><h3>ニンニクと・・・</h3></dd>
<dd...続きを読む

Aベストアンサー

articleは、内部にheader,section,footerを持つ、あるいは持つと期待される完結した記事をマークアップする。(HTML5)
divは、無意味で元々「何かわからない」ので、idやclassで文書構造を補完する。(HTML4)
他に適切な要素がある時はdivは使ってはならない(HTML5)
普通に二階層以上のリストが率直ですよ。
 二階層目はdl・・定義リストが良いかも。一階層目でも良いが、そのようにデザインするなら使えない。

QJavascriptの本に乗っていることがわかりません

最近勉強を始めたものです。
関数のところで、1行目に、

/* 関数定義 ******************/

とあるのですが、どういう意味でしょう

Aベストアンサー

「/*」から始まり「*/」で終わるまでの間はコメント文として
好きなことをかけます。備忘録のようなものです。
「*」がいっぱい書いてあるのは桁あわせ(インデント)や
パッと見て目につきやすくしている(アイキャッチ)のだと思います

Qホームページについて教えてください。 全くの初心者なのでわからない事だらけです。 初心者でもわかるよ

ホームページについて教えてください。

全くの初心者なのでわからない事だらけです。
初心者でもわかるように教えて欲しいです。

自分でホームページを作ろうとしてあまりの難しさに断念しました。
ホームページ制作会社に依頼して制作してもらい、その後Yahooの検索に引っかかるようにしたり、月々色々お金かかりますよね?

初期費用と月額費用はどれくらいかかるものですか?

Aベストアンサー

1.ホームページ制作会社に依頼して制作してもらう
これは制作作業のお願いですので、値段は依頼内容によって大幅に異なります。
純粋な制作だけなら10万円でも受けてくれるところはあります。
上を見ればキリはありません(数千万円とかそれ以上の案件もあります)。

2.Yahooの検索に引っかかるようにする
基本的には、まともに作っていればいつの間にか勝手に引っかかるようになります。Yahoo!でもGoogleでも同じ。
それで良ければ無料と思っていいです。
「より上位に引っかかるようにする」となればこれはお金のかかる話です。
SEOと呼ばれるものですが、これはすでに運用しているサイトに対して行ったほうが効果が出やすいこともあり、
構築時にはSEO的に正しい作り方をする、という程度の話。
(この辺は制作会社のスキル次第です)

3.月々色々お金かかる?
ランニングコストの主なものは、「サーバー費用」と「更新費用」です。
サーバーというのはホームページを置いておく場所のこと。
まあ、お店の家賃だと思って下さい。費用は規模によりけりで無料もあれば数万円の場合もあります。
大した機能のないホームページであれば年間1万円程度見ておけば良いでしょう。

更新費用は文字通り。ホームページは更新しなければそのうち忘れ去られます。
というか、更新しないなら作る意味は無いと言ってもいいです。時間とお金の無駄。
更新するには文章書いたり、画像作ったりいろいろやることありますよね?
その作業を代行してもらうならその分のお金が発生します。
費用は頼む内容次第ですが、安くはないですよ。

これ以外だとドメイン費用というのがあります。これはホームベージの住所。
◯◯◯◯.comとかあるでしょ?あれです。
あれを取得、維持するには年間数百円〜数千円の費用がかかります。
ま、この辺は大したことないですから割愛してもいいかな。
制作会社が説明してくれるでしょう。


あとは「ホームページ」を作るのを止めてSNSやブログにしてしまうという手もあります。
要するにウェブ上の絵日記みたいなものですが、これはデザインや機能、ドメインを選べない反面、
誰でも手軽に作れるものになっています。大手サービスのほとんどは無料で利用できます。

私個人としてはそちらをオススメしますね。
もしどうしてもオリジナルなホームページがほしいと思うのであれば、
せめて毎年100万円程度の費用(あるいは労力)をかける覚悟をした方がいい。
構築費に結構お金をかけたけれど、まともに更新出来ずにデザインも機能もどんどん古臭くなり、
気がつけば誰も訪れなくなっているとか、よくある話です。
ホームページをちゃんと運用するというのは手間と費用のかかることなんです。

初心者なのは仕方ないのですが、格安で手軽に解決することはありません。
そこは断言できます(苦笑)。

1.ホームページ制作会社に依頼して制作してもらう
これは制作作業のお願いですので、値段は依頼内容によって大幅に異なります。
純粋な制作だけなら10万円でも受けてくれるところはあります。
上を見ればキリはありません(数千万円とかそれ以上の案件もあります)。

2.Yahooの検索に引っかかるようにする
基本的には、まともに作っていればいつの間にか勝手に引っかかるようになります。Yahoo!でもGoogleでも同じ。
それで良ければ無料と思っていいです。
「より上位に引っかかるようにする」となればこれはお金...続きを読む

QCSSでbackground-imageを複数指定でうまくいきません

CSSでbackground-imageを複数指定しているのですがうまくいきません。

body {
background-image: url(../images/recruit/bg1.gif), url(../images/recruit/bg2.gif), url(../images/recruit/bg3.gif), url(../images/recruit/bg6.gif), url(../images/recruit/bg4.gif), url(../images/recruit/bg4.gif) url(../images/recruit/bg6.gif);
background-position: left 0px top 200px, left 0px top 1098px, left 0px top 1878px, left 0px top 2658px, left 0px top 3438px, left 0px top 4218px, left 0px top 4524px;
}

こうしますと、無効な値と出て表示されません。
数が多すぎるのでしょうか?もしくは、top: 4524pxが大きすぎるのでしょうか?

宜しくお願いします。

CSSでbackground-imageを複数指定しているのですがうまくいきません。

body {
background-image: url(../images/recruit/bg1.gif), url(../images/recruit/bg2.gif), url(../images/recruit/bg3.gif), url(../images/recruit/bg6.gif), url(../images/recruit/bg4.gif), url(../images/recruit/bg4.gif) url(../images/recruit/bg6.gif);
background-position: left 0px top 200px, left 0px top 1098px, left 0px top 1878px, left 0px top 2658px, left 0px top 3438px, left 0px top 4218px, left 0px t...続きを読む

Aベストアンサー

ANo1です

複数表示を試みたことがないのでよく知りませんが、デフォルトのbackground-repeatがrepeatって可能性はありませんか?
no-repeatを指定すればできるかも…(未検証です)


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

人気Q&Aランキング

おすすめ情報