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

1 ななしのよっしん
2010/03/06(土) 18:02:46 ID: c0sPI2IsgG
おおおこれは…
手探りでどうにかこうにか編集してる自分のような編集者には、大変有難いです!
なにより項の並びや説明が非常に判り易いのが素晴らしい
👍
高評価
0
👎
低評価
0
2 ななしのよっしん
2010/03/06(土) 22:58:15 ID: DttTDnbKbg
とりあえず全角スペースとかでレイアウトを調整する人は絶滅して欲しい
👍
高評価
0
👎
低評価
0
3 ななしのよっしん
2010/03/07(日) 14:30:28 ID: N5NlZqdc12
>>2
絶滅すべき人種の一人が今ここに参上しました

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

すっごい細かい事ですが、前田慶次余白定 例1/例2は上下逆にした方が良いのではと思いました。
After→Beforeよりも、某番組の様にBefore→Afterの順に見せた方が変化箇所が分かりやすいかと。
👍
高評価
0
👎
低評価
0
4 ななしのよっしん
2010/03/07(日) 14:47:58 ID: N5NlZqdc12
あともう1つ連投ごめんなさい。

あにぃ」の記事で見られるような、CSS,table,お絵カキコフル活用で作られた
"偽市場商品テーブル"も、この記事内でる範疇でしょうか?
あれでジョーク商品を作るのは中々面いのですが、貼り付けるお絵カキコの大きさにも依存する上に
ピンク部分(購入数、関連動画数)の余白をmargin,paddingで手動微調整する作業が凄まじく面倒臭いので、
何か針になる解説及び、コピペなサンプルのソースコードがどっかの記事に置いてあればなぁと
最近思い始めた次第なのです。ニコニコ大百科:HTMLテンプレート集にでも載せたらいいのかもしれませんが
既存の物は上記ピンク部分が微妙に「本物」とズレてたので手が出せませんでした。
ニコニコ大百科:素材集 も応用すれば恐らく偽動画テーブルや偽マイリストテーブルも作れるのでしょうが、
流石にそこまでする位なら本動画貼り付ける方がいので需要は薄い(?)
👍
高評価
0
👎
低評価
0
5 初版作成者
2010/03/07(日) 15:12:29 ID: ia4uiJzPDA
>>2
自分もmarginpaddingを知るまでに結構時間かかりました。この記事で絶滅とはいわんでも、そういう人が減ればいいですね。
>>3
before→afterに後で変えてみます。
あとこの記事はここに書いた知識を元に自分で工夫してね、という記事なので、そういうテクはテンプレート集の担当ですね。
ただテンプレート集を活用したり他の記事をコピペ変するには、どこをどういじればどうなるのか、という知識が必要なので、そこにこの記事の意義があるわけです。
👍
高評価
0
👎
低評価
0
6 美雨
◆myun/402To 2010/03/07(日) 23:49:53 ID: NC7a5QzjT/
これは良い記事。編集者GJ
👍
高評価
0
👎
低評価
0
7 しぇる
2010/03/15(月) 02:08:25 ID: XCoaKuGXjy
す、素晴らしい…… 

そのうちもちょっと追記してみます。
👍
高評価
0
👎
低評価
0
8 ななしのよっしん
2010/04/01(木) 21:32:30 ID: vL4HkrF1MF
編集するたび先人の知恵を借りに巡回するんだが
編集終わるともう忘れてしまうんだよね
あっはっは
👍
高評価
0
👎
低評価
0
9 ななしのよっしん
2010/04/17(土) 11:42:55 ID: FL/lP2Zqwt
おお、ありがてぇ記事だぁ・・・。
いや、マジで。参考にさせて頂きやす。
👍
高評価
0
👎
低評価
0
10 ななしのよっしん
2011/03/06(日) 14:34:52 ID: Kms2wD7Y5T
http://www.apple.com/jp/ipad/business/profiles/hyatt-hotels/exit
このappleサイトの「企業プロフィール」というくくりの部分、
これどうやってを作っているんだろう?
ソースcss色々眺めてみたけど複雑でよくわからなかった。
background-imageで画像を用いているんかな?
👍
高評価
0
👎
低評価
0
11 ななしのよっしん
2011/03/07(月) 15:29:20 ID: ge2G4LN/yN
>>10

CSS3の機を丸くする定があるようだ。

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

実際、SafariWebインスペクタで掘っていくと、
callout というクラスに border-~-radius という定がある。
👍
高評価
0
👎
低評価
0
12 11
2011/03/07(月) 15:51:10 ID: ge2G4LN/yN
>>10

(続き)
記事に使い方を盛り込んでみようと思って div タグ、p タグに仕込んでみたが、
レビューは出来るが、定できませんと怒られた。
👍
高評価
0
👎
低評価
0
13 10
2011/03/07(月) 18:39:17 ID: Kms2wD7Y5T
>>11
なるほどCSS3で追加されたプロパティだったんですね。
探しても見つからないわけだ…
そして自分でも試してみたけど同じく怒られた。
ニコニコCSS3導入はまだ先か
👍
高評価
0
👎
低評価
0
14 ななしのよっしん
2011/05/06(金) 18:44:47 ID: mJ7mCpr9hk
参考にさせてもらってます。ありがとう
👍
高評価
0
👎
低評価
0
15 ななしのよっしん
2011/08/02(火) 21:11:00 ID: vI8UEShdVv
<style type="text/css">
が使えるとスタイルシートが一括処理できて楽なんだけどねぇ
👍
高評価
0
👎
低評価
0
16 ななしのよっしん
2011/08/02(火) 23:27:34 ID: Kms2wD7Y5T
👍
高評価
0
👎
低評価
0
17 ななしのよっしん
2011/08/03(水) 02:38:15 ID: P1IHYsCb9s
一般会員は知っても意味がい記事だな。
プレミアム会員でも編集者じゃないと有効活用できなさそうだ。

一般人には「オススメ」できない記事としか言いようがない。
👍
高評価
0
👎
低評価
0
18 ななしのよっしん
2011/08/03(水) 05:29:49 ID: sBenH1gZuo
CSS の用途はニコニコ大百科だけじゃないから一般会員にとっても
意味がいわけじゃないと思うんだが。
👍
高評価
0
👎
低評価
0
19 ななしのよっしん
2011/08/03(水) 10:24:10 ID: QiWtN1xyg4
>>17
一般会員は、自分のユーザ記事を編集して、そのリビジョンをここに貼って依頼すると、記事作成できるよ!
http://nicodic.razil.jp/test/read.cgi/bugyobo/1307610758/l50exit

それと、商品記事ならでも編集できるし、コミュニティ記事ならそのコミュメンバー動画記事ならその動画投稿者であれば、一般会員でも編集できます。
👍
高評価
0
👎
低評価
0
20 ななしのよっしん
2011/08/03(水) 12:13:22 ID: vI8UEShdVv
>>18
大百科向けのcss記述方法は
一般的なcss記述方法とはかなり違うからなぁ
👍
高評価
0
👎
低評価
0
21 ななしのよっしん
2011/08/03(水) 18:59:56 ID: LMcbbzpqrR
オススメ記事おめでとう
大百科の中でもベスト3に入るぐらいよく見る記事でいつも参考にしています

ただ、オススメ記事選ばれたのはちょっと意外だった
やっぱり、一部の人向けの記事なのは事実だし
👍
高評価
0
👎
低評価
0
22 ななしのよっしん
2011/08/07(日) 11:31:03 ID: rSm7RLxmAx
オススメおめ
万人向けじゃないかもしれないけど、価値のある記事だと思うよ。
👍
高評価
0
👎
低評価
0
23 ななしのよっしん
2011/08/07(日) 16:09:17 ID: R5RV8diBD2
アンカーを入れた位置にブラウザの表示基準が強制移動しないようにするにはどうしたら……orz

別々ボックスを縦に並べている状態で、上ボックスの選択を下ボックスに反映(アンカー使用)したときに表示位置を選択前の位置に固定しておきたいのですが……
…………上下を逆にすればあっさり解決するような気はするけど、できれば上から下に流したいです。
👍
高評価
0
👎
低評価
0
24 ななしのよっしん
2011/08/08(月) 06:56:48 ID: jJesozGJQ2
お勧め記事おめでと~
👍
高評価
0
👎
低評価
0
25 ななしのよっしん
2011/08/08(月) 08:42:32 ID: 6J0cV6dc4z
実際この記事でいろいろ学んだので、作った人に感謝してますよー。
👍
高評価
0
👎
低評価
0
26 ななしのよっしん
2011/09/11(日) 16:27:08 ID: l6OHGmwf+T
ヒント」の記事みたいなにするやり方解説書いてくれないかなー(チラッ
👍
高評価
0
👎
低評価
0
27 ななしのよっしん
2011/09/11(日) 19:55:39 ID: Kms2wD7Y5T
>>26
ヒント
記事全体をstyle="overflow:hidden"の<div>で囲む
overflow:hiddenスクロールバーが表示されないので画面移動できない
記事の移動はアンカーを貼る
👍
高評価
0
👎
低評価
0
28 ななしのよっしん
2011/09/11(日) 20:22:15 ID: Kms2wD7Y5T
>>26
>>27
補足
overflow」は<p>や<div>などのボックス要素に対して、
中のインライン要素がはみ出る場合にどう処理するか、を決めるプロパティ
hidden」は「はみ出す部分は表示させない」という処理を行う。
その性質上、ボックス要素にスクロールバーは表示されない。
【注意】
ボックス要素からはみ出す、という結果を引き出させるためには
そのボックス要素をサイズ定してやる必要があるので注意。
サイズ定しないと、中身のインライン要素にあわせて大きさを変えるため
 そもそも「はみ出す」という結果が出てこない)
👍
高評価
0
👎
低評価
0
29 ななしのよっしん
2011/09/13(火) 19:53:32 ID: tNpk2BMt3I
関連動画一つ一つに作者名を付けるにはどうすればいいんだろう・・・
👍
高評価
0
👎
低評価
0
30 ななしのよっしん
2011/09/21(水) 14:35:04 ID: sBenH1gZuo
>>28
それ最初に思いついた人すごいと思うw 普通そんなレイアウトにしないし。
👍
高評価
0
👎
低評価
0