凝ったレイアウトを作りたい人向け:スタイルシート活用講座について語るスレ

1 ： ななしのよっしん ：2010/03/06(土) 18:02:46 ID: c0sPI2IsgG

おおおこれは…
手探りでどうにかこうにか編集してる自分のような編集者には、大変有難いです！
なにより項目の並びや説明が非常に判り易いのが素晴らしい。

2 ： ななしのよっしん ：2010/03/06(土) 22:58:15 ID: DttTDnbKbg

とりあえず全角スペースとかでレイアウトを調整する人は絶滅して欲しい

3 ： ななしのよっしん ：2010/03/07(日) 14:30:28 ID: N5NlZqdc12

>>2
絶滅すべき人種の一人が今ここに参上しました

いやはや、margin,paddingを活用した「余白の指定」コーナーが有り難いったらありゃしない。
正にこの記事の前田慶次みたいに、clear指定せずお絵カキコが<h2>のボーダー線に乗っかっちゃってる様な
ブサイク記事を、今まで幾つ作ってきてしまったことか！　オマケにそれを解消する方法が分からず
調整に<p> </p>タグ連発したりね。<br />厨と言われる人々と何ら変わりない、いやはやお恥ずかしい

すっごい細かい事ですが、前田慶次の余白の指定 例1/例2は上下逆にした方が良いのではと思いました。
After→Beforeよりも、某番組の様にBefore→Afterの順に見せた方が変化箇所が分かりやすいかと。

4 ： ななしのよっしん ：2010/03/07(日) 14:47:58 ID: N5NlZqdc12

あともう1つ連投ごめんなさい。

「あにぃ」の記事で見られるような、CSS,table,お絵カキコをフル活用で作られた
"偽市場商品テーブル"も、この記事内で語る範疇でしょうか？
あれでジョーク商品を作るのは中々面白いのですが、貼り付けるお絵カキコの大きさにも依存する上に
ピンク部分(購入数、関連動画数)の余白をmargin,paddingで手動微調整する作業が凄まじく面倒臭いので、
何か指針になる解説及び、コピペ可能なサンプルのソースコードがどっかの記事に置いてあればなぁと
最近思い始めた次第なのです。ニコニコ大百科:HTMLテンプレート集にでも載せたらいいのかもしれませんが
既存の物は上記ピンク部分が微妙に「本物」とズレてたので手が出せませんでした。
ニコニコ大百科:素材集 も応用すれば恐らく偽動画テーブルや偽マイリストテーブルも作れるのでしょうが、
流石にそこまでする位なら本動画貼り付ける方が早いので需要は薄い（？）

5 ： 初版作成者 ：2010/03/07(日) 15:12:29 ID: ia4uiJzPDA

>>2
自分もmargin、paddingを知るまでに結構時間かかりました。この記事で絶滅とはいわんでも、そういう人が減ればいいですね。
>>3
before→afterに後で変えてみます。
あとこの記事はここに書いた知識を元に自分で工夫してね、という記事なので、そういうテクはテンプレート集の担当ですね。
ただテンプレート集を活用したり他の記事をコピペ改変するには、どこをどういじればどうなるのか、という知識が必要なので、そこにこの記事の意義があるわけです。

6 ： 美雨 ◆myun/402To ：2010/03/07(日) 23:49:53 ID: NC7a5QzjT/

これは良い記事。編集者GJ

7 ： しぇる ：2010/03/15(月) 02:08:25 ID: XCoaKuGXjy

す、素晴らしい……　

そのうち僕もちょっと追記してみます。

8 ： ななしのよっしん ：2010/04/01(木) 21:32:30 ID: vL4HkrF1MF

編集するたび先人の知恵を借りに巡回するんだが
編集終わるともう忘れてしまうんだよね
あっはっは

9 ： ななしのよっしん ：2010/04/17(土) 11:42:55 ID: FL/lP2Zqwt

おお、ありがてぇ記事だぁ･･･。
いや、マジで。参考にさせて頂きやす。

10 ： ななしのよっしん ：2011/03/06(日) 14:34:52 ID: Kms2wD7Y5T

http://www.apple.com/jp/ipad/business/profiles/hyatt-hotels/
このappleのサイトの「企業プロフィール」というくくりの部分、
これどうやって角丸型の枠を作っているんだろう？
ソースとcss色々眺めてみたけど複雑でよくわからなかった。
background-imageで画像を用いているんかな？

11 ： ななしのよっしん ：2011/03/07(月) 15:29:20 ID: ge2G4LN/yN

>>10

CSS3の機能で角を丸くする指定があるようだ。

http://www.htmq.com/css3/border-bottom-left-radius.shtml

実際、SafariのWebインスペクタで掘っていくと、
callout というクラスに border-～-radius という指定がある。

12 ： 11 ：2011/03/07(月) 15:51:10 ID: ge2G4LN/yN

>>10

(続き)
記事に使い方を盛り込んでみようと思って div タグ、p タグに仕込んでみたが、
プレビューは出来るが、指定できませんと怒られた。

13 ： 10 ：2011/03/07(月) 18:39:17 ID: Kms2wD7Y5T

>>11
なるほどCSS3で追加されたプロパティだったんですね。
探しても見つからないわけだ…
そして自分でも試してみたけど同じく怒られた。
ニコニコのCSS3導入はまだ先か

14 ： ななしのよっしん ：2011/05/06(金) 18:44:47 ID: mJ7mCpr9hk

参考にさせてもらってます。ありがとう

15 ： ななしのよっしん ：2011/08/02(火) 21:11:00 ID: vI8UEShdVv

<style type="text/css">
が使えるとスタイルシートが一括処理できて楽なんだけどねぇ

16 ： ななしのよっしん ：2011/08/02(火) 23:27:34 ID: Kms2wD7Y5T

まさかの今週のオススメ記事
おめでとうございます

17 ： ななしのよっしん ：2011/08/03(水) 02:38:15 ID: P1IHYsCb9s

一般会員は知っても意味が無い記事だな。
プレミアム会員でも編集者じゃないと有効活用できなさそうだ。

一般人には「オススメ」できない記事としか言いようがない。

18 ： ななしのよっしん ：2011/08/03(水) 05:29:49 ID: sBenH1gZuo

CSS の用途はニコニコ大百科だけじゃないから一般会員にとっても
意味が無いわけじゃないと思うんだが。

19 ： ななしのよっしん ：2011/08/03(水) 10:24:10 ID: QiWtN1xyg4

>>17
一般会員は、自分のユーザ記事を編集して、そのリビジョンをここに貼って依頼すると、記事作成できるよ！
http://nicodic.razil.jp/test/read.cgi/bugyobo/1307610758/l50

それと、商品記事なら誰でも編集できるし、コミュニティ記事ならそのコミュのメンバー、動画記事ならその動画の投稿者であれば、一般会員でも編集できます。

20 ： ななしのよっしん ：2011/08/03(水) 12:13:22 ID: vI8UEShdVv

>>18
大百科向けのcss記述方法は
一般的なcss記述方法とはかなり違うからなぁ

21 ： ななしのよっしん ：2011/08/03(水) 18:59:56 ID: LMcbbzpqrR

オススメ記事おめでとう
大百科の中でもベスト3に入るぐらいよく見る記事でいつも参考にしています

ただ、オススメ記事に選ばれたのはちょっと意外だった
やっぱり、一部の人向けの記事なのは事実だし

22 ： ななしのよっしん ：2011/08/07(日) 11:31:03 ID: rSm7RLxmAx

オススメおめ
万人向けじゃないかもしれないけど、価値のある記事だと思うよ。

23 ： ななしのよっしん ：2011/08/07(日) 16:09:17 ID: R5RV8diBD2

アンカーを入れた位置にブラウザの表示基準が強制移動しないようにするにはどうしたら……orz

別々ボックスを縦に並べている状態で、上ボックスの選択を下ボックスに反映（アンカー使用）したときに表示位置を選択前の位置に固定しておきたいのですが……
…………上下を逆にすればあっさり解決するような気はするけど、できれば上から下に流したいです。

24 ： ななしのよっしん ：2011/08/08(月) 06:56:48 ID: jJesozGJQ2

お勧め記事おめでと～

25 ： ななしのよっしん ：2011/08/08(月) 08:42:32 ID: 6J0cV6dc4z

実際この記事でいろいろ学んだので、作った人に感謝してますよー。

26 ： ななしのよっしん ：2011/09/11(日) 16:27:08 ID: l6OHGmwf+T

「ヒント」の記事みたいな風にするやり方誰か解説書いてくれないかなー(ﾁﾗｯ

27 ： ななしのよっしん ：2011/09/11(日) 19:55:39 ID: Kms2wD7Y5T

>>26
ヒント
記事全体をstyle="overflow:hidden"の<div>で囲む
overflow:hiddenはスクロールバーが表示されないので画面移動できない
記事の移動はアンカーを貼る

28 ： ななしのよっしん ：2011/09/11(日) 20:22:15 ID: Kms2wD7Y5T

>>26
>>27
補足
「overflow」は<p>や<div>などのボックス要素に対して、
中のインライン要素がはみ出る場合にどう処理するか、を決めるプロパティ。
「hidden」は「はみ出す部分は表示させない」という処理を行う。
その性質上、ボックス要素にスクロールバーは表示されない。
【注意】
ボックス要素からはみ出す、という結果を引き出させるためには
そのボックス要素をサイズ指定してやる必要があるので注意。
（サイズ指定しないと、中身のインライン要素にあわせて大きさを変えるため
　そもそも「はみ出す」という結果が出てこない）

29 ： ななしのよっしん ：2011/09/13(火) 19:53:32 ID: tNpk2BMt3I

関連動画一つ一つに作者名を付けるにはどうすればいいんだろう・・・

30 ： ななしのよっしん ：2011/09/21(水) 14:35:04 ID: sBenH1gZuo

>>28
それ最初に思いついた人すごいと思うｗ 普通そんなレイアウトにしないし。