Luck Web Tool

スポンサーリンク

下のコンテンツ上でマウス左クリックするとソースが表示されます
下のコンテンツ上でマウス左クリックするとソースが表示されます

幅フルサイズ、左画像、右テキスト

幅がフルサイズで、左側に画像、右側にテキストがくるwebパーツ(レイアウト)です。完全レスポンシブ対応。TailwindCSSを利用させてもらっていて、それのみでスタイルしています。 背景は薄い色を入れています。画像とテキストの割合は2:3です。コンテンツ全体の上下には隙間を入れていないので、写真もしくはテキストが上下(スマホは上)のコンテンツにピッタリと付きます。 コンテンツ幅が小さくなってくると画像が上、テキストが下になります。

下のコンテンツ上でマウス左クリックするとソースが表示されます

幅フルサイズ、右画像、左テキスト

幅がフルサイズで、右側に画像、左側にテキストがくるwebパーツ(レイアウト)です。完全レスポンシブ対応。TailwindCSSを利用させてもらっていて、それのみでスタイルしています。 背景は薄い色を入れています。テキストと画像の割合は3:2です。コンテンツ全体の上下には隙間を入れていないので、写真もしくはテキストが上下(スマホは上)のコンテンツにピッタリと付きます。 コンテンツ幅が小さくなってくると画像が上、テキストが下になります。

下のコンテンツ上でマウス左クリックするとソースが表示されます

左右を入れ替えて交互に表示

「幅フルサイズ、左画像、右テキスト」と「幅フルサイズ、右画像、左テキスト」を交互に表示します。交互に表示するため、画像が右側の場合は、背景を白にすることで見やすくしています。 1つ1つの細かい説明は下の2つにそれぞれ書いていますので、そちらを参考にしてください。 またコンテンツ全体の上下には隙間を入れていないので、写真もしくはテキストが上下(スマホは上)のコンテンツにピッタリと付きます。 コンテンツ幅が小さくなってくると画像が上、テキストが下になり、3つ縦に並びます。3つ以上に増やしたい場合は交互にコピペしてください。

幅フルサイズ、右画像、左テキスト

幅がフルサイズで、右側に画像、左側にテキストがくるwebパーツ(レイアウト)です。完全レスポンシブ対応。TailwindCSSを利用させてもらっていて、それのみでスタイルしています。 背景は白です。テキストと画像の割合は3:2です。コンテンツ全体の上下には隙間を入れていないので、写真もしくはテキストが上下(スマホは上)のコンテンツにピッタリと付きます。 コンテンツ幅が小さくなってくると画像が上、テキストが下になります。

幅フルサイズ、左画像、右テキスト

幅がフルサイズで、左側に画像、右側にテキストがくるwebパーツ(レイアウト)です。完全レスポンシブ対応。TailwindCSSを利用させてもらっていて、それのみでスタイルしています。 背景は薄い色を入れています。画像とテキストの割合は2:3です。コンテンツ全体の上下には隙間を入れていないので、写真もしくはテキストが上下(スマホは上)のコンテンツにピッタリと付きます。 コンテンツ幅が小さくなってくると画像が上、テキストが下になります。

HTML&CSS&JS
HTML
CSS
JS

スポンサーリンク

© 2018 LUCK-JP