-
ID:aoB.ZG さんの質問

<li>タグと次の<li>タグの間にスペース出来るんだけど、あれってどうやってスペース消すのがベストプラクティスなの? ulにfont-size:0にして、liでfont-sizeを任意の値でリセットする解決策を見つけて良い感じだと思ったんだけど、これって何か特定のモダンブラウザーでバグとか起きたりする?

みんなの回答 9 件

ID:4RqxWa さんの回答

1行でかきーな

ID:yTbrNt さんの回答

block要素に戻す

ID:aoB.ZG

これはどことどこにどう指定すれば良いの?

ID:JtZ7i5 さんの回答

line-height: 1em とか。

ID:aoB.ZG

これはどことどこにどう指定すれば良いの?

ID:aoB.ZG さんの回答

すごいな、みんな。みんな答えが違うじゃん。

ID:t3.j9p

色んな方法があると解釈しろよ

ID:aoB.ZG

うん。だからみんなすごいなって感心してるんだがw

ID:af8Ahj さんの回答

改行をコメントアウトが見やすい<!ーー
ーー><li></li>

ID:YkCPYS

これが無難やね

ID:zrLkpb

自分もこの方法です

ID:aoB.ZG

これ使いたいんだけど、今使ってるテンプレートエンジンだと効かないんだよね。他に教えてもらったやつは使い方調べないとよくわからんw

ID:QKFhxW さんの回答

ダサい感じがするが<li>タグと次の<li>タグの間にコメント入れるという方法もある

ID:aoB.ZG

それテンプレートエンジン内でやろうとしたんだけど、ダメだったのよね。

ID:pwsliB さんの回答

今時htmlにするときにminifyしない人いるの?

ID:ANlZqm

minifyてなんやねん

ID:aoB.ZG

htmlもminifyするんかい

ID:yTbrNt

自分で運営までしてる奴以外しない。

ID:aoB.ZG

とりあえずgulpでminify自動化させておけばおk?

ID:zrLkpb

サービス運営とかでないならそこまでやる必要とおもっています

ID:pwsliB

minifyする?しない?という選択肢があった時に、minifyしない理由を教えて下さい。逆に。「そこまで」の意味が分からんよ。たかだかminifyがどんだけ大事なんだよ。

ID:aoB.ZG

ていうか、htmlとcssのクラス名とかid名を短い文字列に置き換えてくれるようなminifyのやつないの?BEMってるとクラス名長くなるんだけどもw

ID:aoB.ZG

あ、minifyすれば結果的にliタグの間のスペースもなくなるっていう話か。gulpにminify処理追加してみよっと

ID:yTbrNt

GoogleのClosure Compiler使えばIDやクラス名も圧縮してくれるよ。

ID:mzZpHn さんの回答

あんま覚えてないけど、IE6,7系はそれだと効かなかった気がするくらい。floatとか。

ID:aoB.ZG

お、じゃーもうfont-size:0で対応しちゃっておkなのかな。このやり方は楽でありがたい。

ID:4RqxWa

まあGoogleにスパムと判断されてもおかしくないけどな。font-size:0だもんな

ID:aoB.ZG

ま、俺がスパムみたいなもんだから仕方ないな

ID:7orGUr

ホンマ、ゴミサイト生み出すなやー

ID:aoB.ZG

めんご、めんご♡

ID:aoB.ZG さんの回答

<li>タグの間のスペースは「今時htmlにするときにminifyしない人いるの?」と煽りコメントを下さった「ID:pwsliB9ZfOtF」さんの言う通り、htmlをminifyすればOKなだけでしたw
.
参考までに自分のgulpコード貼っとくわ。
.
var gulp = require("gulp");
var plumber = require("gulp-plumber");
gulp.task("jadeToHtml", function(){
var jade = require("gulp-jade");
var htmlMin = require("gulp-htmlmin");
return gulp.src("./jade/*.jade")
.pipe(plumber())
.pipe(jade({
pretty: true
}))
.pipe(htmlMin({collapseWhitespace: true}))
.pipe(gulp.dest("../public"));
});
gulp.task("sassToCss", function(){
var sass = require("gulp-sass");
var postCss = require("gulp-postcss");
var autoPrefixer = require("autoprefixer");
var processors = [
autoPrefixer({browsers: ["last 2 version"]})
];
return gulp.src("./sass/*.sass")
.pipe(plumber({
errorHandler: function(err) {
console.log(err.messageFormatted);
this.emit(’end’);
}
}))
.pipe(sass({
style: "expanded"
}))
.pipe(postCss(processors))
.pipe(gulp.dest("../public/css"));
})
gulp.task("watch", function(){
gulp.watch("./jade/*.jade", ["jadeToHtml"]);
gulp.watch("./sass/*.sass", ["sassToCss"]);
});
gulp.task("default", ["jadeToHtml", "sassToCss", "watch"], function(){
console.log("f#ck Yeah!!");

最終更新日:2016-02-04 (1,713 views)

関連するトピックス

ページ上部に戻る