ニコニコ大百科: 「凝ったレイアウトを作りたい人向け:スタイルシート活用講座」について語るスレ 1番目から30個の書き込み

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

について語るスレ

記事をみる

＜＜

＜

＞

＞＞

1/2

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
絶滅すべき人種の一人が今ここに参上しました

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

2010/03/07(日) 15:12:29 ID: ia4uiJzPDA

>>2
自分もmar gin、paddingを知るまでに結構時間かかりました。この記事で絶滅とはいわんでも、そういう人が減ればいいですね。
>>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/
このappleのサイトの「企業プロフィール」というくくりの部分、
これどうやって角丸型の枠を作っているんだろう？
ソースとcss色々眺めてみたけど複雑でよくわからなかった。
back ground-imageで画像を用いているんかな？
👍
0
👎
0
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 という指定がある。
👍
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/l50

それと、商品記事なら誰でも編集できるし、コミュニティ記事ならそのコミュのメンバー、動画記事ならその動画の投稿者であれば、一般会員でも編集できます。
👍
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:hid den"の<div>で囲む
overflow:hid denはスクロールバーが表示されないので画面移動できない
記事の移動はアンカーを貼る
👍
0
👎
0
28 ななしのよっしん非表示

2011/09/11(日) 20:22:15 ID: Kms2wD7Y5T

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

2011/09/13(火) 19:53:32 ID: tNpk2BMt3I

関連動画一つ一つに作者名を付けるにはどうすればいいんだろう・・・
👍
0
👎
0
30 ななしのよっしん非表示

2011/09/21(水) 14:35:04 ID: sBenH1gZuo

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

＜＜

＜

＞

＞＞

1/2

TOP