google翻訳を使ってサイトを多言語化する

中国語に翻訳したデータ
translate.google.com

 

自身のサイトのURLをパラメーターにつける

https://translate.google.com/translate?sl=ja&tl=zh-CN&u=http://felica29.starfree.jp/season2020-07/

slにサイトで使用している言語
tlに翻訳したい言語
uに翻訳したいサイトのURL

各言語のコード

cloud.google.com

cssのmask-imageを使ったスライド

felica-web.hatenablog.jp



前回、cssで色々な形で画像をマスクしてみましたが、今回はcssアニメーションを追加する事でさらに自由度の高い表現が出来るようになります。

aquall.jp

 

erikamoreira.co

 

 

mask-imageはベンダープレフィックスが必要

chromeにベンダープレフィックスが必要です。
caniuse.com


mask-image: マスクとして使用される画像 を指定します。
mask-repeat:マスク画像の位置を設定します。
mask-size:マスク画像の大きさを設定します。
mask-position: マスク画像の位置を設定します。

この中のmask-positionをanimationで右下から左上に動かしていくアニメーションです。

マウスに追従するホバーアニメーション

cssのみで「マウスに追従するホバーアニメーション」を作るには少し工夫が必要です。追従して動く要素が並列になっている要素(今回でいうli要素)からみて、下の兄弟要素か子孫要素でなければ動かす事が出来ない為、追従する要素をli要素にする必要があります。

<nav class="g-nav">
  <ul>
    <li><a href="">Button1</a></li>
    <li><a href="">Button2</a></li>
    <li><a href="">Button3</a></li>
    <li><a href="">Button4</a></li>
   <li class="slide"></li>
 </ul>
</nav>

 


 

 

背景にパターン画像やアブストラクト画像を使う

スマホ特化・モバイルファーストサイトではbody要素が固定になっている場合がほとんどなので、body要素の背景がサイトの印象を大きく左右します。今回はbodyの背景にパターンやアブストラクトなどのテクスチャ素材を使ってみましょう。

https://pixabay.com/ja/illustrations/search/abstract/



photoshopvip.net



stock.adobe.com

 

 

ジェネレータ

heropatterns.com


trianglify.io

モバイル幅でwebサイトを作成する

必要なテキスト

  • 店舗名
  • タグライン
  • 場所
  • お店の特徴(コンセプト)
  • メインコピー
  • リード文
  • 商品について(こだわりなど)
  • 質問と答え(3つ)
  • 店長・マネージャーのあいさつ

必要な画像素材

  • 商品・サービス画像(9枚)600x400以上(商品名と価格も必要です)
  • メインビジュアル画像(3枚)1920x1080くらい
  • コンセプト部分で使用する画像(1枚)1920x1080くらい
  • 店舗情報部分で使用する画像(1枚)1920x1080くらい
  • 店長のあいさつ部分で使用する画像(イラスト可:1枚)600x400以上
  • ロゴ
  • 回るテキスト画像(授業内で作成)

 



今ではpcでもspでも最適に表示されるレスポンシブサイトは当たり前で、最近はむしろspでの表示を優先させ、pc時は画面いっぱいの固定背景(多くはbody要素を固定)を置き、モバイル幅の中にコンテンツを入れるようなspファースト、もしくはspオンリーのサイトも見かけます。


ポイント

  • body要素を固定
  • モバイル幅にシャドウを入れる
  • ロゴやメニューボタンなどをコンテンツ枠外に固定表示させる


dramatic-curry.com




www.honda.co.jp



www.louer.jp



www.dot-st.com



mysmoothskin.jp



plus-oc.onecareer.jp



lg10th-special.game.line.me



www.thefirsttake.jp




www.beams.co.jp



sankoudesign.com