常連

注目の的

自己紹介

お世話になります。

html５のheader内に
```HTML
<meta http-equiv="Cache-Control" content="no-store">
```


と入れてもキャッシュされます。
ブラウザはmetaタグを無視するのでしょうか。

よろしくお願いいたします。

htmlのmetaタグでキャッシュコントールできない

###前提・実現したいこと

今回静的サイト作成にあたり、gulpを使用しています。
しかしソースマップが表示されず困っています。
JSにも不自由でよくわかりません。

###発生している問題・エラーメッセージ


###該当のソースコード
```ここに言語を入力
// plugin
const gulp         = require('gulp');
const ejs          = require('gulp-ejs');
const sass         = require('gulp-sass');
const plumber      = require('gulp-plumber');
const notify       = require('gulp-notify');
const sourcemaps = require('gulp-sourcemaps'); 
const autoprefixer = require('gulp-autoprefixer');
const webserver    = require('gulp-webserver');
const cssmin = require('gulp-cssmin');

// ejs compile
gulp.task('ejs',()=>{
  return gulp.src("./src/ejs/*.ejs")
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(ejs('', {"ext": ".html"}))
    .pipe(gulp.dest("./dist"));
});

// sass compile
gulp.task('sass',()=>{
  return gulp.src("./src/scss/*.scss")
  .pipe(sourcemaps.init())
    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
    .pipe(sass())
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
  
  	.pipe(cssmin())

  .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("./dist/css"));
});


// local server
gulp.task('webserver', ()=>{
    gulp.src("./dist") 
        .pipe(webserver({
            host: 'localhost',
            port: 8000,
            livereload: true
        }));
});

gulp.task('watch', ()=>{
  gulp.watch('./src/scss/**/*.scss', ['sass']);
  gulp.watch('./src/ejs/**/*.ejs', ['ejs']);
});

gulp.task('default',['watch','webserver']);




//圧縮
gulp.task('cssmin', function () {
  gulp.src('stylesheets/*.css')
  .pipe(cssmin())
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest('cssmin'));
});

```

###試したこと
ChromeのデベロッパーツールではEnable CSS source mapsのチェックはしています。
はじめてみるのですがChromeデベロッパーツールでstyle.cssをみるとヨコに[sm]と出ています。これはsassの行番号とは不一致です。
![イメージ説明](4d1239e146efa195810498c91f3a5b48.png)


初歩的な質問ですがソースマップを正しく表示するにはどうしたらいいのでしょうか？

Gulpでソースマップを表示させたい。

###前提・実現したいこと
テーブルを半分に切って横に二列に並べたい
cssのtableのプロパティで縦に長いテーブルを真ん中から
二つに分け、左右に並べて表示するプロパティがあったのですが
（そのプロパティだとrowspanが一列目の範囲を超えても二列目に引き継がれた）
マイナーすぎるのか、検索のキーワードが悪いのか検索しても引っかかりません
テーブル内の文字列を折り返す話ばかり出てきます。
詳しい方教えてくだされば幸いです。

markdownでの記法がよくわからず分かりにくい図ですみません
||
|:--|:--:|--:|
|a1|a2|a3|
|b1|b2|b3|
|c1|c2|c3|
|d1|d2|d3|
|e1|e2|e3|
|f1|f2|f3|
|g1|g2|g3|

を

||
|:--|:--:|:--|:--:|--:|
|a1|a2|a3|d1の下半分|d2の下半分|d3の下半分|
|b1|b2|b3|e1|e2|e3|
|c1|c2|c3|f1|f2|f3|
|d1の上半分|d2の上半分|d3の上半分|g1|g2|g3|

こうしたいですmarkdownでは表示出来ませんが、左右とも3.5段の高さになっているイメージです

css3 テーブルを半分に切って横に二列に並べたい（行が見切れても同じ高さにしたい）

#<解決したいこと>
border-imageでli要素の左右に画像を表示させ、同じli要素（ページと閲覧のみ）の下はborder-colorで色を透明の表示にしたいのですが、うまくいきません。
ノート、編集、履歴表示のみborder-bottom-colorを入れたいです。

####サンプルキャプチャ こんな風にしたいです
![イメージ説明](0d5ebdcd7e2a68aa263cc17cccdc5af2.png)


```html
<div id="page-main-menu">
   <form name="" id="search">
      <input type="text" placeholder="Wikipedia内を検索" id="search-text"><input type="image" src="search.svg" id="search-img">
   </form>	
   <ul class="page-contents-left">
      <li>ページ
   <li><a href="#">ノート</a>
   </ul>
   <ul class="page-menu-right">
      <li>閲覧
      <li><a href="#">編集</a>
      <li><a href="#">履歴表示</a>
   </ul>
</div>
```

```css
#page-main-menu{
	overflow: auto;
	padding-bottom: 11px;
	margin-bottom: -1px; /*borderを重ねる*/
	height: 25px;
}

#page-main-menu ul {
	background-image: linear-gradient(#fff 20%, #eaf3f8 100%);
}

#page-main-menu li:first-child {
	background-color: #fff;
        /*ノートと閲覧のborder-bottomのみ透明にしたい。*/
	border-bottom-color: transparent;
}

#page-main-menu li:last-child { 
     /*li要素の右側のみにborder-imageを入れたい*/
	border-image: url("border-blue.png") 1;
	border-style: solid;
	border-image-width: 0 1px 0 0; 
}


#page-main-menu li {
     /*li要素の左のみborder-imageを入れる*/
	border-image: url("border-blue.png") 1;
	border-image-width: 0 0 0 1px;
	border-style: solid;
        /*ノート、編集、履歴表示の下のみborder-colorを入れたい*/
	border-bottom: 1px solid red;

	line-height: 25px;
	font-size: 14px;
	padding: 5px;
	margin: 0;
	display: inline-block;
}

.page-contents-left{
	float: left;
}


.page-menu-right{
	float: right;
}
```

#キャプチャ 現在の状態
![イメージ説明](3f97a525e6865f047c44e5a78b468624.png)



#試したこと

ベンダープレフィックスを試してみてもうまく反映されません。
border-widthをborder-image-widthや
border-imageをborder-image-sourceに
書き換えてみてもうまく表示されませんでした。

```css
#page-main-menu li:last-child { 
     /*li要素の右側のみにborder-imageを入れたい*/
	border-image-source: url("border-blue.png");
	border-style: solid;
	border-width: 0 1px 0 0; 
        -webkit-border-image: url("border-blue.png") 1 round;
	-webkit-border-style: solid;
	-webkit-border-width: 0 1px 0 0;
}


#page-main-menu li {
     /*li要素の左のみborder-imageを入れる*/
	border-image-source: url("border-blue.png");
	border-width: 0 0 0 1px;
	border-style: solid;
        -webkit-border-image-source: url("border-blue.png");
	-webkit-border-width: 0 0 0 1px;
	-webkit-border-style: solid;
        /*ノート、編集、履歴表示の下のみborder-colorを入れたい*/
	border-bottom: 1px solid red;
}
```

css3  border-image / border-color 反映がうまくいかない

**詳細**
以下のリンク先のサイトのスマホ表示のときに、参考画像の**矢印**の部分をスクロールするためにドラッグするとテキストが消えてしまいます。どうすれば消えないようにできるでしょうか？

問題のサイト
[http://wonect.com/](http://wonect.com/)

参考画像
![イメージ説明](448c37f5d7329ed4f848dc60af0e2ba2.png)


よろしくお願いします。

スマホでテキストをドラッグすると消えてしまいます。

cssでbodyに設定した背景画像を、サイト訪問時にフェードインさせることはできるでしょうか。

具体的には

body {
  background-image: url(画像のリンク);
}

とし、bodyに対して

$(document).ready(
   function(){
     $('body').fadeIn(3000);
   }
);

としてみましたが、フェードイン表示されませんでした。

HTMLにimgタグで背景画像を入れると、上記と同じ方法でフェードインさせることはできたのですが、cssでbody全体に背景を設定した場合にどうすればいいのか教えて欲しいです。

背景画像をフェードインさせる方法

androidの標準ブラウザで背景画像が表示されません。
下記のように書きましたが、標準ブラウザでは表示されませんでした…
chromeでは表示されました。
お力添えをお願い致します。

[html]
<section class="l-mainvisual">
	
</section>

[css]
.l-mainvisual{
	height: 375px;
	background: url(assets/img/top/mv.jpg) center no-repeat;
	-webkit-background-size: cover;/* Safari,Google Chrome用 */
	-moz-background-size: cover;  /* Firefox用 */  
	-o-background-size: cover;  /* Opera用 */  
        background-size: cover;
}

※追記(androidのバージョンについて）
バージョンは4.1.2です。
上記にもあるように標準ブラウザでのみ表示されません。
バージョン5.0では標準ブラウザでもchromeでも表示が確認できました。
なかなかandroidの標準ブラウザではバグが多いようですね…。

androidの標準ブラウザで背景画像が表示されない

ＷＥＢページ作成初心者なので、既に自分で調べてはみたものの分からない事があるため質問させていただきます。

XHTML1.0で外部CSSファイルを使って背景画像を表示しようと思っています。この時画像サイズを固定で表示したいのですが、ブラウザのサイズを変更するとそれに合わせて背景画像のサイズも変更されてしまいます。

以下、XHTMLと外部CSSのコードと動作環境です。
・CSSファイル(css/test.css)
```lang-CSS
div#bgimg_foundation{
  text-align:center;
  //background-position:top center;
}

div#bgimg{
  background-image:url("../Resource/img/main.png");
  background-position:top center;
  background-repeat:repeat-y;
  background-attachment:scroll;
}

div#text{
  position:static;
  top:0px;
  left:110px;
}
```

・XHTMLファイル
```lang-XHTML
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="ja-JP" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-style-type" content="text/css" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta name="description" content="test" />
    <meta name="keywords" content="test" />
    <title>test</title>
    <link type="text/css" rel="stylesheet" href="css/test.css" />
    <script type="text/javascript" language="javascript"></script>
  </head>
  <body style="background-color:gray;">
    <div id="bgimg_foundation">
      <div id="bgimg">
        <div id="text" style="color:red;">テストテキスト</div>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
      </div>
    </div>
  </body>
</html>
```

・動作環境
OS：Windows 8.1
ブラウザ：Internet Explore 11

ブラウザのサイズが変更されても背景画像のサイズを固定で表示する方法はないでしょうか？
分かる方がいましたら教えてください。よろしくお願いいたします。