私はあなたと一緒にこれを一歩一歩進んでいきます。まず、Photoshop を異なるレイヤーに分離する必要があります。Photoshop ファイルのレイヤーやパーツを切り出すときは、画像をできるだけ小さくしてください。たとえば、色付きの線は 100 ピクセル x 1200 ピクセルの画像である必要はありません。100px x 10px の画像を繰り返すことができます。
ヘッダーでロゴとスレッド/色付きの線を組み合わせることができます。
<header>
<img src="logo.png" />
</header>
ロゴは<img>
タグに入り、スレッド (繰り返し 100px x 10px の画像に切り詰めたもの) はヘッダーの背景に入ります。CSS は次のようになります。
header {
background: url('colored_line_threads.png') repeat-x center;
text-align: center;
width: 100%;
}
このbackground-repeat
プロパティrepeat-x
は、色付きの線が水平軸に沿ってのみ繰り返されるようにします。このbackground-position
プロパティcenter
により、線が<header>
コンテナの垂直方向の中央に配置されます。
コンテンツの周囲の斜めの境界線については、Photoshop ファイルからいくつかの戦略的な画像を切り取る必要があります。四隅すべての画像、上下の水平境界線の画像、左右の垂直境界線の画像を作成することをお勧めします。次に、この問題の HTML/CSS コンポーネントがあります。これを行うにはもっと良い方法があると確信していますがdiv
、国境の一部に .
<div class="content">
<div class="border">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="corner">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<p>Some text here...</p>
</div>
ここでは、内部に<div>
コンテナーを含む 2 つのコンテナーを作成しました。1 つは 4 つのコーナー用で、もう 1 つは 4 つの境界用です。<div>
ボーダーの場合、CSS は次のようになります。
.border div {
position: absolute;
}
.border div:nth-child(2n) {
background: url('border_horizontal.png');
width: 100%; height: 50px;
}
.border div:nth-child(2n+1) {
background: url('border_vertical.png');
width: 50px; height: 100%;
}
.border div:nth-child(1) {
top: 0px; left: -15px;
background-position: 0px 0px;
}
.border div:nth-child(2) {
top: -15px; left: 0px;
background-position: 0px 0px;
}
.border div:nth-child(3) {
top: 0px; right: -15px;
background-position: 50px 0px;
}
.border div:nth-child(4) {
bottom: -15px; left: 0px;
background-position: 0px 50px;
}
ボーダー コンテナー内のそれぞれdiv
は、コンテンツ コンテナーのボーダーを表し、繰り返し画像を使用してボーダーを表示しています。コーナーについても同じで、div
各コーナーに 1 つずつ:
.corner div {
position: absolute;
background-image: url('corners.png');
width: 50px; height: 50px;
}
.corner div:nth-child(1) {
top: -15px; left: -15px;
background-position: 0px 0px;
}
.corner div:nth-child(2) {
top: -15px; right: -15px;
background-position: 50px 0px;
}
.corner div:nth-child(3) {
bottom: -15px; left: -15px;
background-position: 0px 50px;
}
.corner div:nth-child(4) {
bottom: -15px; right: -15px;
background-position: 50px 50px;
}
コードの残りの部分は、この CodePen ( http://codepen.io/phantomesse/pen/safcK ) で確認して試すことができます。
これは、HTML と CSS を構成する 1 つの方法にすぎません。これを行うには多くの方法があります (おそらくもっと良い方法もあります) ので、練習を続けてください!