HTML・CSS等の勉強会スレ

1 名前：名無しの先行者さん：2013/07/04(木) 22:41:08

質問したりしても良いしTIPSを見せびらかしたりしてもいい

2 名前：名無しの先行者さん：2013/07/04(木) 23:29:52

html5の非推奨タグってどうなんだろう
癖でfontとかよく使うけどこれもそうなんだよね

3 名前：名無しの先行者さん：2013/07/05(金) 00:08:24

html5ではfontタグは非推奨ではなく廃止だよ
まあブラウザは寛大だから今のところは使っても表示されるけどね

4 名前：名無しの先行者さん：2013/07/05(金) 05:56:54

あ、そうそう廃止
CSS記述に書き換えないと
全記事やるのは中々骨が折れるな
あとは自分がよく使うものだとcenterとsも廃止か

5 名前：名無しの先行者さん：2013/07/05(金) 06:49:22

fontタグ使わずにフォント弄りはどうすれバインダー

6 名前：名無しの先行者さん：2013/07/05(金) 07:09:44

cssでggr
正直俺も全部知っている訳じゃないから自分で調べて欲しい

7 名前：名無しの先行者さん：2013/07/05(金) 07:53:57

frameも廃止だったような
iframesが動くよ！

8 名前：名無しの先行者さん：2013/07/05(金) 11:14:08

iframeはframeに比べると設定が面倒かもしれないけど細かいところまで手が届くしね
つべとかの動画を貼り付ける時にも使われてたりする
ただ何故かつべから動画貼り付けようとすると毎回urlからhttp:が抜けてるんだよな
実際それで上げて見れるのかは知らないけど注意

9 名前：名無しの先行者さん：2013/09/13(金) 19:06:16

SSLによる暗号化を採用したページ（URLがhttps://から始まる）
でhttp://から始まるURLをiframeで読み込もうとすると
セキュリティの警告が出たり読み込まれなかったりする
こういうときはhttps://から始まるURLを指定してあげなければいけない

しかしここでプロトコル名を省いて//example.comと書くと
現在のページにhttp通信で接続していればhttp://example.com、
https通信ならhttps://example.comと解釈される

つまりSSLを採用してるページでもしてないページでも共通のhtmlコードで書けるというわけ
だからプロトコル名をわざと省いてるんだと思うよ

10 名前：名無しの先行者さん：2013/09/23(月) 20:42:31

過疎ってるなこのスレ

テキスト書きに集中したい人にMarkdown記法で書けるとこがおぬぬめ
TumblrとかCMSでプラグイン入れるとか

11 名前：名無しの先行者さん：2013/09/27(金) 21:50:17

CSS勉強し始めたけど大変だなこれ
長文書いてフォント弄りとかやってたら日暮れるんじゃないのか

12 名前：名無しの先行者さん：2013/09/27(金) 21:52:05

よく使うフォントいじりのタイプをclassとして登録しておけばおｋ

13 名前：名無しの先行者さん：2013/09/27(金) 21:59:28

>>12
classとして登録ってのが良く分からんでござる

14 名前：名無しの先行者さん：2013/09/27(金) 22:04:55

●CSS（外部ファイルかstyleタグの中に書く）
.aka {
font-size:120%;
color: red;
}

●HTML
<span class="aka">ここのフォントいじるよ</span>

この例ではakaというclassを作ってる
こうしておけばいちいち style属性に長々と毎回同じことを書かなくても
class属性を指定するだけで使いまわせるってことよ

15 名前：名無しの先行者さん：2013/09/27(金) 22:09:28

>>14
おおなるほど！こういうやり方があるのか！
テキスト毎にCSS作成しなきゃならないのかと思ったぜ

16 名前：名無しの先行者さん：2013/09/27(金) 22:20:54

もともとCSSはHTMLによる見出しや段落の指定（マークアップ）を汚さずに
見た目の装飾を分けて管理するためのもんだからね
共通のCSSファイルを作ってそれぞれのHTMLで使いまわすのが効率いい

classを使わずにタグごとにデフォルトのスタイルを設定しておくという手もいい
ただタグの意味と合うところで使うべきではある

●CSS
strong {
font-size:150%;
color:orange;
}

b {
font-weight:bold;
color:green;
}

●HTML
<b>緑太字</b>
<strong>強調オレンジ</strong>

17 名前：名無しの先行者さん：2013/09/27(金) 22:23:12

さらに言えば適切にマークアップをしておけばCSSファイルのクラスやタグのスタイルを弄るだけで
HTMLに手を入れずとも該当箇所の見た目が一気に全て変わるわけよ

これがCSSの威力ってやつさ

18 名前：名無しの先行者さん：2013/09/27(金) 22:28:15

>>16-17
少しずつ分かってきた
後はタグ覚えて数こなすか…

19 名前：名無しの先行者さん：2013/09/27(金) 22:30:08

strongタグは非推奨で廃止する可能性もあるので対応するclassを作っておいてspanしたりしよう
ある程度勉強したら既存のサイトの再現CSS作ったりすると楽しいよ

20 名前：名無しの先行者さん：2013/09/27(金) 22:35:25

>>19
そういや色々変わるんだったな
大変だ

21 名前：名無しの先行者さん：2013/09/27(金) 22:37:56

クラスの他にIDもあるけどIDはそのページ内に１つしか存在しない要素につける奴な
（２つ以上あってもたいていのブラウザが寛容なので認識はするけど好ましくはない）

あとは複数の要素への同時指定や入れ子になった要素へのスタイル指定まで覚えればだいたいおｋ
この{}の前をセレクタというのだけど
・セレクタで装飾したい箇所を自由に指定できるようになること
・CSSのプロパティをある程度覚えること
さえできればあとはどうとでもなる

●CSS
#header, #content, #footer{　/* idが header, idがcontent, idがfooterの要素を指定するセレクタ*/
width:960px;　　/*横幅960pxで*/
margin:0 auto;　/*画面に対して真ん中揃え*/
}

#header {　/* id がheaderの要素を指定するセレクタ*/
background-color: black;
}

#header h1.page-title {　 /* idがheaderの要素　の中にある　h1（classがpage-title）を指定するセレクタ*/
font-size;200%;
color: white;
}

●HTML
<div id="header>
<h1 id="page-title">タイトル</h1>
</div>

<div id="content">
本文
</div>

<div id="footer">
ふった　コピーライトとか
</div>

22 名前：名無しの先行者さん：2013/09/27(金) 22:45:38

非推奨なのって物理タグであるbじゃなかったっけ
strongは一応論理タグでしょ？

23 名前：名無しの先行者さん：2013/09/27(金) 22:48:49

あ、strongは問題なかった。bだな

24 名前：名無しの先行者さん：2013/09/27(金) 22:51:12

> <B>は非推奨要素ではありませんが
Bも問題なかった。ちゃんと確認しないとだめだな…俺…

25 名前：名無しの先行者さん：2013/09/27(金) 22:52:58

bは公式に非推奨ってまではいってないけど将来的には確かに怪しい

26 名前：名無しの先行者さん：2013/09/27(金) 22:56:23

とりあえずfontタグでもcenterタグでも何でもいいから作っちまえばいい
あとでHTML構文チェックでもやればおｋ

27 名前：名無しの先行者さん：2013/09/27(金) 22:58:03

Marqueeとかな

28 名前：名無しの先行者さん：2013/09/27(金) 23:06:56

marqueeはロマン
仕方ないからJavascriptで代用するお

29 名前：名無しの先行者さん：2013/09/29(日) 13:41:35

divとidとspanの違いが未だに理解できん
ぼんやりとは分かってるんだが、
「ここではdiv！」「この場合はspan！」ってのを教えて欲しい

30 名前：名無しの先行者さん：2013/09/29(日) 13:50:57

divはブロックレベル要素
とある区画にidとかclassを付けるために使うのが主な用途
基本的に前後で改行される

spanは範囲を表すインライン要素
spanで囲んでも前と後ろが改行されない
むしろpタグとか他のタグの中で違うスタイルを適用する際に使う事が多い

ちなみに段落を表すpにもidやclassをつけてもおｋ
イメージとしては適用範囲の広さが
div >> p >> span

例）
<div id="content">
<p>わたしの名前は<span class="name">佐藤</span>です</p>
</div>

31 名前：名無しの先行者さん：2013/09/29(日) 13:54:18

>>30
ああ、こういう事か
やっと分かったサンクス

32 名前：名無しの先行者さん：2013/10/20(日) 17:30:11

よーし昔のソース引っ張り出して作っぺ！
と思ったらおバカな昔の俺がオワコンのXHTML1.0で書いてやがったｗｗｗ
HTML5は勉強してないからとりあえずHTML4.01に書き直すべ……

33 名前：名無しの先行者さん：2013/10/21(月) 12:40:56

突っ込みどころおおすぎて俺の手には負えない

34 名前：名無しの先行者さん：2013/10/26(土) 09:57:32

tumblrでの拍手ボタンの追加方法

ブログごとの設定→「カスタマイズ」→「ページを追加」
そこで適当なアドレス名つけて拍手ボタンをHTMLなどで書いてページを追加
あとはトップページのソースをいじってそのページへのリンクを書き足すだけ

ちなみにトップページのソースを書き直す時はブラウザ上のソースエディタが不自由になってる
ペーストはできてもコピーがうまくできなかったり
なので編集時はあらかじめローカルで書いたHTMLを全文選択→貼り付け、とすること
これは有料カスタムテーマの不正コピー対策だろうからしょうがない

これで拍手ボタン追加できるよー
というかトップページのソースで拍手へのリンクを直接貼っちゃってもいいかと
でも上の方法でプロフィールページや拍手返信ページ、リンクページなども追加できる
どうぞお試しあれ

35 名前：名無しの先行者さん：2013/10/26(土) 10:54:26

解説ありがとー
ページ追加してからソース弄れないのは使わせて貰ってるテーマの仕様かなと諦めてたから帰ったらもう一度試してみる
ただtumblrのコメント機能も便利なんだよなあ……
あと拍手ボタンを今設置してあるsmooth scrollと同じく追尾させるのも面白いかなと考えたりしたけど取れる時間次第になりそう

36 名前：名無しの先行者さん：2013/10/26(土) 12:43:41

LTFFRさん？
追尾云々はスマホでみていて気づかなかった…
コメントは、人には読まれたくないって場合もあるしなー
あとコメントついてないとこに付けるのって初雪を踏むみたいでちょうちょするｗｗ

ちなみにカスタマイズ→詳細設定→「モバイルレイアウトを使用する」を無効、とすれば
tumblrデフォのモバイル表示ではなく自前で用意したのを使えるぜ
PCでもスマホでも同じHTML手作りの見た目だとブログっぽさを薄められる
あとZENとかモバイル表示に対応してるテーマを拾ってきて使うなら無効化しても大丈夫


こうやって、つんぶるるをテキストサイトにする方法もいつかwikiにまとめたいな
あそこはスマホアプリで投稿できるブログなのに広告がゼロってのがすばらしい
「いちいちパソコンつけてFTP更新は面倒！ でもブログはイヤ！」
って人にこそぜひ勧めたい逸品

とはいえ１から10まで書いてくのはさすがにしんどいｗ
てなわけで質問とかあれば暇な時に受けるよー
でもtumblr改造の話題ってこのスレでやっていいんだろうか…？

37 名前：プラダ キャンバス：2013/10/30(水) 08:12:46

メンズ 財布paul smith プラダ キャンバス http://www.paralinterper.info/

38 名前：カシオ 腕時計 電波 ソーラー：2013/11/14(木) 22:59:46

カシオ レディース
カシオ 腕時計 電波 ソーラー http://www.yeasvperty.com/レディース腕時計-アナログ腕時計-zei-1_12_13.html

39 名前：ルイヴィトン 2014：2014/03/02(日) 18:13:46

ヴィトン 長財布|ルイヴィトン 2014|||http://www.lemon-kushima.com/cgi-bin/count_img/louis-vuitton-c2.html|||ヴィトン 長財布|ルイヴィトン 2014
ルイヴィトン 2014 http://www.construction.co.jp/new/upload/louis-vuitton-c2.html

40 名前：名無しの先行者さん：2014/07/20(日) 08:29:33

http://notepad.cc/share/FvzkyFvtQR
http://notepad.cc/share/r6F5CmzFeJ
http://notepad.cc/share/uwGkRnof5v
http://notepad.cc/share/zdsWx28MeJ
http://notepad.cc/share/WSJTYGUEUu
藤崎空 ヤフオク詐欺未遂 グズ 逃亡中 トレパク 他人の家に長期居候 他者の個人情報晒し 殺害予告
藤崎空 ツルギ 脅迫 療養中の人間を踏み台に 謝罪なし 鍵垢覗くためサブ垢詐称 無断転載 音信不通の人物を騙る
藤崎空 唐澤貴洋 cmp_mlk 自分のヲチスレに開示請求 逆恨み粘着 なりすまし 謝罪なし なりすまし
藤崎空 cmp_mlk 音信不通の人物を騙る 自分のヲチスレに開示請求 トレパク ツルギ 鍵垢覗くためサブ垢詐称 逃亡中
藤崎空 無断転載 療養中の人間を踏み台に 他人の家に長期居候 ヤフオク詐欺未遂 グズ 殺害予告 脅迫

41 名前：名無しの先行者さん：2014/07/20(日) 08:29:58

http://notepad.cc/share/lxwfOKQhZS
http://notepad.cc/share/LQfoYq9a67
http://notepad.cc/share/xOCoE9b57N
http://notepad.cc/share/uah5l0BMu9
http://notepad.cc/share/dUI3ImMfEz
坂野多加史 くーふく 金のために同人 見当外れな添削 唐澤貴洋 泉研究室 たかたか 2Dクリエイター友の会
坂野多加史 口だけ 顔出し 東京電機大学 仙一 トレパク 自称プロ 藤崎空
坂野多加史 素材 唐澤貴洋 顔出し 藤崎空 仙一 トレパク 2Dクリエイター友の会
坂野多加史 たかたか 泉研究室 自称プロ 素材 口だけ 見当外れな添削 東京電機大学
坂野多加史 くーふく 金のために同人 トレパク 自称プロ 仙一 金のために同人 たかたか