三秀電子ご案内

ホームページでこんな事ができます!


記載項目
◆画像の配置 table   
◆画像の配置 align   
◆画像の配置 position  
◆画像の配置 flex   

-◆画像の配置 table ---
二つの画像を斜めに配置
画像の斜め配置1 下写真ひまわりのコメントを記載しています。
上写真ひまわりのコメントを記載しています。 画像の斜め配置2


-◆画像の配置 table内align ---
画像を左右:中央、上下:中央に配置
ひまわり
table内の画像中央配置
ひまわり

-◆画像の配置 position ---
画像を任意の位置へ配置(大きさ%指定)
absolute画像の配置1
ひまわりwidth:50%
absolute画像の配置2
ひまわりwidth:50%
absolute画像の配置3
ひまわりwidth:50%
画像の左上から表右端までの幅に対してwidthが計算されました。

-◆画像の配置 flex ---
画像の配置 flex1 画像の配置 flex2 画像の配置 flex3


-◆画像の配置 flex 画像と文字 ---
flex画像と文字1
width:20%
flex画像と文字2
width:40%
flex画像と文字3
width:30%


-◆画像の配置 flex-direction row ---
flex-direction row 画像1 flex-direction row 画像2 flex-direction row 画像3


-◆画像の配置 flex-direction column & row ---
flex-direction column & row 画像1

width:20%

flex-direction column & row 画像2

width:40%

flex-direction column & row 画像3

width:30%




Top項目へのアクセス