ユーザー助け合い掲示板

記事 1 へのレス：
>>0 ストライプじゃなく、ページを２分割するように配色される
これは現在お使いの、
*1)　background-image:
*2)　linear-gradient(-90deg, #265c55 50%, transparent 50%);
*3)　background-size: 40 40px;
↑３行目に単位を入れ忘れているせいです。
ここだけ以下のように書き換えてください。
━━━━━━━━━━

background-size: 40px 40px;

━━━━━━━━━━
一つ目の数値に『px』を入れました。
これでストライプになります。


>>0 ストライプの色の変え方
上述の訂正箇所も含めて書くと、

━━━━━━━━━━━━━━━

background-color: #877bc5; /*背景全体の色*/
background-image:
linear-gradient(-90deg, #265c55 50%, transparent 50%); /*背景色に被せるストライプ*/
background-size: 40px 40px; /*ストライプのサイズ*/

━━━━━━━━━━━━━━━

『#877bc5（紫）』背景の上に、
『#265c55（緑）＆transparent（透明）』のストライプが被さっている……
という状態なので、それぞれカラーコード（#○○○○○○）の部分をお好きな色に書き換えればよいということになります。

*※『/*背景〜*/』とかいう注記は、コメントアウトと言って、スタイルシートには影響しないただのメモ書きです。
*　残していても問題ないし、消しても問題ないです。

# ポイントは、『絶対に表示したい色』を『背景全体の色（background-color: ○○;）』に設定することです！

何故かというと、ストライプが閲覧環境によっては表示できない恐れがあるからです。
（ガラケーや一部の古いブラウザの話なので、今はもうあまり考慮しなくてよいとされますが）

たとえば……
●文字色が『白』で
●ストライプ（濃い色）が非表示になったとき、
●background-colorが無記入（無記入だとデフォルト背景色『白』になる）だったり、『白』系の色を設定していたら……
→文字が背景色と同化して何も読めなくなる！…という事件が予想されます。

そういうわけなので、
#『background-color: ○○;』には、文字色と同化しない色を設定してください。
まあこの背景の上にさらに黒背景ブロックを乗せて文字はそこに表示する……とかだったら単純に『優先的に表示したい色』で大丈夫です。



━━━━━以下蛇足━━━━━
実のところ単色２色のストライプでしたら、
『background-color: ○○』は書かず、
『background-image: ○○』のみでも実装できます。

でもガラケーのような古いブラウザだとストライプが表示できないはず（たぶん）なので、ガラケー＆古いブラウザ閲覧にも対応するなら『background-color: ○○』はむしろ必要です！

たぶんCSSストライプに関して調べていたら以下のような書き方も出てきたかと思うので、それと上述のスタイルシートとの違い解説……みたいな蛇足です。


>（１）まず『background-color: #877bc5;』は消す

>（２）背景全体に設定していた色（#877bc5）を、透明色（transparent）の部分に入れる
━━━━━━━━━━

background-image:
linear-gradient(-90deg, #265c55 50%, #877bc5 50%); /*ストライプの色*/
background-size: 40px 40px; /*ストライプのサイズ*/

━━━━━━━━━━
これで２色のストライプになります。

ただこれだと、ガラケーなどストライプ（linear-gradient）が表示できない環境で閲覧したときに背景がデフォルトの白になってしまうので、
「ガラケーは一切考慮しない。少しでもスタイルシートの文字数を減らしたい」みたいな理由がなければ、先述の方のスタイルシートを使ってください。