HTML5+CSS3で作らんとアカンの？ [無断転載禁止]©2ch.net

HTML5+CSS3で作らんとアカンの？ [無断転載禁止]©2ch.net (64ﾚｽ)
上下前次 1-新

1: Name_Not_Found [] 2016/03/29(火) 22:49:19.32 ID:tgSQpgMb(1) AAS
HTML5+CSS3で作らんとアカンの？
XHTML1.0+CSSってのはもうダメなの？

これからはじめようと思うんだけど

2: Name_Not_Found [sage] 2016/03/29(火) 22:54:42.89 ID:??? AAS
XHTML1.0は作るの面倒だろ。
DOCTYPEは長いし、タグや属性の省略すらできない。

自動的に生成されるならまだしも
手書きするなら簡単なHTML5の方がいい

3: Name_Not_Found [sage] 2016/03/30(水) 03:47:47.34 ID:??? AAS
XHTML1.0+CSSができるならHTML5+CSS3でできるだろ
何も考えることなんかないよ

4(1): Name_Not_Found [sage] 2016/04/01(金) 08:05:25.15 ID:??? AAS
どの各ブラウザのどのバージョンからHTML5に対応してるって一覧表ある？

5: Name_Not_Found [sage] 2016/04/02(土) 10:24:49.55 ID:??? AAS
HTML5のselectionとかarticleとかasideとかどこで使うかの定義がわからん。
ここはasideでいいのか？はたまたarticleにすべきなのか？とか。
あとarticleは必ずselectionで囲まなアカンの？とか

難しいなー

6: Name_Not_Found [sage] 2016/04/02(土) 13:14:35.21 ID:??? AAS
難しいんじゃなくて仕様書読んでないだけだろ

7: Name_Not_Found [sage] 2016/04/02(土) 13:28:31.94 ID:??? AAS
つ HTML4.01

8: Name_Not_Found [sage] 2016/04/02(土) 14:27:12.64 ID:??? AAS
selectionじゃなくてsectionだ

9: Name_Not_Found [sage] 2016/04/03(日) 17:39:12.26 ID:??? AAS
xhtmlで作ってた時はasideとかsectionとか意識しなくて、ぜんぶ汎用BOXの<div>だけで作ってたからなー。

HTML5のセクションの定義が理解できないわ

10(1): Name_Not_Found [sage] 2016/04/05(火) 16:48:02.93 ID:??? AAS
>>4
http://caniuse.com/

11: Name_Not_Found [sage] 2016/04/05(火) 22:29:50.21 ID:??? AAS
>>10
トンｸｽ

12: Name_Not_Found [sage] 2016/04/08(金) 18:59:32.84 ID:??? AAS
確かにsectionやasideを使うかどうかって難しいね

13: Name_Not_Found [sage] 2016/04/08(金) 19:36:17.78 ID:??? AAS
何が難しいのか逆にわからん

14: Name_Not_Found [sage] 2016/04/08(金) 20:16:24.03 ID:??? AAS
asideが必ずいるのかいらないのかってことでしょ

15: Name_Not_Found [sage] 2016/04/09(土) 02:12:18.23 ID:??? AAS
余計何言ってるのかわからんくなった

16: Name_Not_Found [sage] 2016/04/09(土) 17:56:41.92 ID:??? AAS
asideはほとんどその名の通りだよ
サイドバーとか共通部分のようなところ
レイアウトによっては横とは限らないけどね

sectionもarticleもその名の通りといえばその名の通りだけど
sectionのほうが上位だと思い込んでる人はいるかもな
あくまでも文書構造をタグで表現するのが基本だから
sectionの括りなしにarticleつまり記事の繰り返しがでてくることもあるだろうし
sectionのみで構成されて記事という考え方を取らないこともあるわけで
上下関係があるわけじゃない

17: Name_Not_Found [sage] 2016/04/09(土) 18:37:30.30 ID:??? AAS
aside使わずに
<div class="sideber_menu">
とかじゃだめなん？

18(1): Name_Not_Found [sage] 2016/04/09(土) 18:48:03.73 ID:??? AAS
こんな感じでXHTML1.0とHTML5が混ざった記述ってだめなん？

<html>
<head></head>
<body>
<header>
サイトタイトル
<nav>グローバルメニュー</nav>
</header>
<div id="main">
メインコンテンツ
</div>
<div id="side_menu">
サイドメニュー
</div>
<footer>
フッター
</footer>
</body>
</html>

19: Name_Not_Found [sage] 2016/04/09(土) 19:26:28.39 ID:??? AAS
それでも間違いとは言えないけどそれだと文書構造からいえば
メインコンテンツとサイドメニューの区別がない

文書構造気にしてないなら全部 div で書けば？って感じはする

20: Name_Not_Found [sage] 2016/04/09(土) 20:02:52.04 ID:??? AAS
文書構造をどう捉えるかなんだよなー。全部汎用divのみでいいやってならそれでもできるな。

21(1): Name_Not_Found [sage] 2016/04/09(土) 21:35:19.49 ID:??? AAS
>>18
これおすすめ。

https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

考えるよりもまず、どう解釈されるか、
そしてほかの（まともな）サイトがどうなっているかを見たほうが良い。

22: Name_Not_Found [sage] 2016/04/09(土) 22:31:04.88 ID:??? AAS
>>21
ありがとう！

23: Name_Not_Found [sage] 2016/04/18(月) 22:59:52.13 ID:??? AAS
tableの一部に縦横不明の画像が表示されていた場合、テキストリンクをテキストだけでなく、その枠内いっぱいでホバーをかけるときは、displayのblockと何が必要ですか。

24: Name_Not_Found [sage] 2016/04/19(火) 12:19:34.19 ID:??? AAS
テーブルレイアウトとか論外なのでよそへ行きたまへ

25(1): Name_Not_Found [sage] 2016/04/19(火) 15:37:23.65 ID:??? AAS
<body>
<header>
ここはヘッダーセクションです
</header>
<nav>
<ul>
ここはナビゲーションセクションです。
<li>home</li>
<li>about</li>
</ul>
</nav>
<section>
<article>
ここはコンテンツ1
</article>
<article>
ここはコンテンツ2
</article>
</section>
.<aside>
ここは副次的セクションです
</aside>
<footer>
ここはフッターセクションです。
</footer>

26: Name_Not_Found [sage] 2016/04/19(火) 15:43:49.44 ID:??? AAS
>>25のようにした時、
navを左側、sectionを中央、asideを右側みたい3カラムにするにはこれはxhtmlと同じようにcssのclassかidを使ってレイアウトするの？
また、asideは必ず必要なの？aisdeの部分をsectionにしたらダメのなの？

<nav id=left_side>
</nav>
<section id=center>
</section>
<aside id=right_side>
</aside>
みたいな感じ？

27(1): Name_Not_Found [sage] 2016/04/19(火) 18:31:29.12 ID:??? AAS
xhtml と同じようにの意味がわからん
css でやるのかならそうだけど

aside は必須ではない
aside は section よりもはっきりした目的を持っているので section にする必要性はない

あとは main なんかも考えてみるべきかもな

28(1): Name_Not_Found [sage] 2016/04/20(水) 00:46:08.54 ID:??? AAS
>>27
>xhtml と同じようにの意味がわからん
xhtmlの時は<div id="navi">みたいにして
cssで
width:xxx px;
float:right;
みたいにしてたから、HTML5でnavタグやsectionタグ右側、左側にレイアウトするときもcssでfloatするのかな？って意味。

>aside は必須ではない
そうなんだ。じゃあsectionは必須？無理やり作らないといけないの？

29: Name_Not_Found [sage] 2016/04/20(水) 01:27:37.21 ID:??? AAS
>>28
個人的には今なら flex 使うけどまあどっちにしてもカラムレイアウトは css での指定が前提

section も必須ではない
正直ここらへんは少しでも仕様読めばわかることだけどな
まあ必須繋がりで一応言っておくと section 自体は直下要素に見出し (基本的には h1) が必須

30: Name_Not_Found [sage] 2016/04/20(水) 01:47:06.88 ID:??? AAS
そうなんだよね。以前から構造をタグ付けするってのが苦手なんだよね。
例えばh1タグなんかを書くとき、別にこれって自分的にはh1である必要はないし<p>でいいじゃん？って思ったりするんだよね。
ロボットの気持ち完全無視してしまう。
なんで無理矢理h1なの？とかなんで無理矢理section使うの？
これ<p>でボックス作っとけばいいじゃん。みたいに自分都合で構造を書いてしまう。

31: Name_Not_Found [sage] 2016/04/20(水) 02:07:41.31 ID:??? AAS
別に div だけでやったって真っ当な HTML ではあるしそこらへんは好きにすればとしか

32: Name_Not_Found [sage] 2016/04/24(日) 12:21:13.98 ID:??? AAS
時間は有限だからdivかsectionなのかなんてロボット以外にどうでもいいところに時間使ってないで
全部divにして他のところにリソース回したほうがよっぽどいい
そもそもロボットですらsectionとか使った方を優先してるのかって話ですよ
囲碁のトップレベルと対決して圧勝するレベルの人工知能を前に無意味だろう

33: Name_Not_Found [sage] 2016/04/24(日) 12:33:08.12 ID:??? AAS
divでやるほうがよっぽど面倒だわ
ていうかそれを言いに来るのが君の有意義な時間の使い方なの？

34: Name_Not_Found [sage] 2016/04/24(日) 21:23:13.37 ID:??? AAS
アホなのかな
どこでも使えるdivの方が面倒なはずねえだろ

35(2): Name_Not_Found [sage] 2016/04/24(日) 21:45:53.78 ID:??? AAS
で、いちいちidとかclassとか振ってるわけだ

そっちのほうがずっと回りくどいし面倒だと思うけど
まあ楽だと思うならdivで頑張ってくれたまえ

36(1): Name_Not_Found [sage] 2016/04/24(日) 22:55:02.31 ID:??? AAS
これでいい？これでもHTML5としてみなされる？

<!DOCTYPE html>←HTML5宣言だけしといて以下は。。
<heaed></head>
<body>
<div id="header">
ヘッダーエリア
</div>
<div id="gl_menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>
</div>
<div id="main">
メインコンテンツエリア
</div>
<div id="ad_area">
広告エリア
</div>
<div id="footer">
フッター
</div>
</body>
</html>

37(1): Name_Not_Found [sage] 2016/04/25(月) 07:19:40.65 ID:??? AAS
>>35
sectionなのかarticleなのか、はたまたdivにした方がいいのか1ミリ秒も悩まないの？

38: Name_Not_Found [] 2016/06/09(木) 22:45:56.43 ID:YX+cREys(1) AAS
良スレ

39(1): 35 [sage] 2016/06/11(土) 13:44:10.34 ID:??? AAS
>>37
一々悩まない
勝手に悩んでろハゲ

40: Name_Not_Found [sage] 2016/06/11(土) 15:58:49.17 ID:??? AAS
>>39
悩んでることをバラすな！

41: Name_Not_Found [] 2016/06/11(土) 17:43:56.34 ID:MgUG4I8F(1) AAS
>>36
ナイスセンス！

42: Name_Not_Found [sage] 2016/06/14(火) 00:19:04.45 ID:??? AAS
つーか、プロじゃなくて、見えればいいならどうせ関係ないだろ
プロがタグのスタイル全部リセットしてCSSで定義しなおして使ってるの見て文句言ってるのとそんなに変わらない

43(2): Name_Not_Found [] 2016/06/25(土) 00:21:13.71 ID:B9bu/Z23(1) AAS
自分がcss3で書いているのか、css2で書いているのか、css2とcss3混在で書いているのか分かってないんだがどこ見て判断したらええの？
とりあえずネットに載ってるサンプルコードや書籍のサンプル見て適当に書いてるだけ。

44: Name_Not_Found [sage] 2016/06/26(日) 00:39:32.49 ID:??? AAS
>>43
Web制作が専業でないならいいと思うよ
俺はsass使ってるけどコンパイル後のソースは一応バリデータにかけて
警告でたとこを調べて書き換えてるけど

45: Name_Not_Found [sage] 2016/06/26(日) 04:40:22.00 ID:??? AAS
>>43
まず最初のCSS（CSS1）というのがあって、
CSS2でいろんな機能が増えた。CSS3でさらに増えた。という扱い。

CSS3になったらCSS2の書き方が使えなくなるんじゃなくて
CSS3までの機能（CSS2を含む）を使うかどうかって話になる。
だから今だと事実上、CSS2までの機能しか使わない場合と
CSS2とCSS3の混在で書くかの二通りしか無い。

そしてCSS3を使うかどうかっていうのは考える意味がない。
なぜならCSS3に対応したブラウザっていうのは、
CSS3の一部に対応しているという意味だから。
CSS3の全てに対応しているブラウザはまだ無いんじゃないかな？

だからCSSの特定の機能にどのブラウザに対応しているかを調べることが重要
そういうのは、例えばここを見ればわかる http://caniuse.com/#cats=CSS

長くやってる人は自然と最近使えるようになった機能＝CSS3だなってわかるけど
わかるってだけでプロでもCSS3かどうかで決めることなんて無いよ。
だからCSS2かCSS3かを把握する必要なんて無い。
気にしてるのは、それが動作保証してるブラウザで使えるかどうかだけ。

46: Name_Not_Found [sage] 2016/07/07(木) 18:03:57.74 ID:??? AAS
スーパーサイヤ人みたいだな

47: Name_Not_Found [] 2016/07/25(月) 10:04:59.20 ID:Ci7OID+k(1) AAS
ちゃんと対応しているブラウザがまだ存在しないのにCSSレイアウトは時期尚早
どこでも配置モード最強

48: Name_Not_Found [sage] 2016/07/25(月) 17:12:09.22 ID:??? AAS
もうあんなソフト捨てろよ
これからはpositionの時代だよたぶん

49(3): Name_Not_Found [] 2016/07/27(水) 21:27:19.14 ID:o08cYcCV(1) AAS
ちょっと聞きたいんだけど
１つのスタイルに複数のセレクタを指定する場合って、
カンマ区切りだとおもってたけど、テキストのサンプルはスペース区切りになっていて、
最近スペース区切りでＯＫとかなったの？
st1 st2 {color: red} ←こんなのおＫになったの？

50: Name_Not_Found [sage] 2016/07/28(木) 10:40:48.98 ID:??? AAS
sectionもarticleもdivみたいなもんだろ

難しいことなんて全くないわ

51(1): Name_Not_Found [sage] 2016/07/28(木) 14:43:58.97 ID:??? AAS
>>49
CSSのセレクタ結合子は「」「+」「>」「~」しか無いんだよ
ついでに書くと擬似要素は最後のセレクタにしか効かない

52(1): Name_Not_Found [sage] 2016/07/28(木) 17:38:34.54 ID:??? AAS
>>49
何か勘違いしているようだが

st1とst2 に同時に適用するときは
st1,st2 {color: red}

st1の階層下にあるst2に適用するときは
st1 st2 {color: red}

他にもセレクタ結合子はいくつかあるから試してみるといい

53: 49 [] 2016/07/28(木) 17:58:49.16 ID:dRdc9CDt(1) AAS
>>51,52
助かりました。ありがとうございます。

54(1): Name_Not_Found [sage] 2016/07/28(木) 23:03:54.56 ID:??? AAS
2カラム編集ってエラスティックレイアウトの方が良いのかな

55(1): Name_Not_Found [sage] 2016/07/31(日) 15:24:31.53 ID:??? AAS
>>54
俺はもうリキッドレイアウトで良いと思うが
何でそう思う？

56: Name_Not_Found [sage] 2016/07/31(日) 16:46:03.17 ID:??? AAS
>>55
リキッドで作ったやつを拡大してみるとさ、何とも

57(1): Name_Not_Found [sage] 2016/10/08(土) 02:56:49.60 ID:??? AAS
type属性のdatetime値だけ廃止でdatetime-localだけ残った流れとか、もうね、同族有限の井戸端会議かと。このカレンダー周辺はボロボロだからたぶん数年後にはぜんぶ新しく変わるんじゃないか？w
datalist要素内option要素のlabel-value-#textの優先順位が実装レベルで「間違って」いても誰も困らないからそれが当たり前になっていたりとかなw
もう00年代のbugzillaやwww-styleの堅くて高度な議論・承認システムじゃあなくて、すっかり底辺低学歴の現場に合わせた「りびんぐすたんだーど笑」なんだからさ、それが2なのか2.1なのか3なのかなんて、ま〜ったく意識する意味は無いんだろうね。
まぁ、極論すれば、何を作ってもそれが何年か後には必ずごっそりリプレイス需要にさらされるという、儲け優先を公言している時代になったということだなw
要するに、仕様への準拠を根掘り葉掘りつつく行為は、この儲け優先のエコシステムを邪魔する「悪い」行為かもしれないんだなww

58: Name_Not_Found [sage] 2016/10/08(土) 08:36:04.74 ID:??? AAS
>>57
> datalist要素内option要素のlabel-value-#textの優先順位が実装レベルで「間違って」いても誰も困らないからそれが当たり前になっていたりとかなw
詳しく

59: Name_Not_Found [sage] 2017/01/28(土) 00:50:51.75 ID:??? AAS
もう5だけで突っ走ってもええのん？

60: Name_Not_Found [sage] 2017/04/14(金) 11:32:37.42 ID:??? AAS
IE9切捨て記念保守

61: Name_Not_Found [sage] 2017/11/09(木) 17:16:28.08 ID:??? AAS
grid革命的に便利だな
クソみたいなネストなくなるのかこれ

62: Name_Not_Found [] 2017/12/12(火) 05:53:26.18 ID:MrUcGD8N(1) AAS
HPなどで友達が稼げるようになった情報とか

⇒　http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

HZPXTVFV07

63: Name_Not_Found [] 2018/05/01(火) 20:30:49.73 ID:l1wYHpV1(1) AAS
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい鎌野介メソッド』

U1S8R

64: Name_Not_Found [sage] 2023/09/18(月) 17:43:31.33 ID:??? AAS
ｳｩ､ﾏｽﾞｲ(;´x`)y― o｡｡o○

上下前次 1-新書関写板覧索設栞歴

ｽﾚ情報赤ﾚｽ抽出画像ﾚｽ抽出歴の未読ｽﾚ AAｻﾑﾈｲﾙ

ぬこの手ぬこTOP 0.488s*