LINK

無料ホームページ制作ツール・ノーコードWeb制作とは

■「Studio」
https://studio.design/ja

「Studio」は、コードを書けなくてもWebサイトの構築・公開・運用ができる、無料版もあるノーコードWeb制作プラットフォームです。
Web上で操作することが可能なので、インターネットの環境がある場所であれば、PCでいつでもどこでも操作が可能です。
コーディングの知識がなくても作れるものまでさまざまなので、ノンデザイナーには向いています。

最近はこのような、htmlやcssが書けなくても、Webサイトを構築してくれるサービスが増えていて、コードを書かなくて良いことから、「ノーコードツール」と呼ばれています。デザインやテンプレートも豊富で、そこから選んだものを自分でカスタマイズして、Webサイトを公開するといったものです。

ノーコードツールの代表として、 「Studio」以外にも「Wix」や「Canva」、「Jimdo」などがそれにあたります。
■「Jimdo」
https://www.jimdo.com/jp/

■「Wix」
https://ja.wix.com/

■「Canva」
https://www.canva.com/

ただし、Webデザイナーとして活動していくには、基本のhtmlやCSSはもちろん必須なので、きちんと学ぶ必要があります。

【ドクセル】日本語でパワーポイントやPDF、 Wordファイルを共有できるサービス

ドクセル

スライドやドキュメントをリンクで簡単に共有することができる無料でも使えるサービスです。
Webサイトにも埋め込むことができるので、企画書を見せたい時などにも○ 

■Docswell ドクセル
https://www.docswell.com/

ドクセルは日本語でパワーポイントやPDF、
Wordファイルを共有できるサービス

【CSS】画像にカーソル乗せた時、画像が拡大 transform:scale

画像の上にカーソルを乗せた時、画像が大きくなるような動きをCSSアニメーションで実装することができます。
具体的にはtransformプロパティを使います。scale()は値です。
(例)transform: scale(1.6, 1.6) ・・・ 要素をx軸方向、y軸方向に1.6倍拡大する
【CSS】hover(マウスオーバー)で画像を拡大ズームする方法 
参考URL:2024.10.4 じゅんぺいブログ

<<<<< その他 transformプロパティで指定できる関数 >>>>>
■rotate() 要素を回転させることができる関数
【transform:rotate()】要素を回転させることができる

■translate() 要素を移動させることができる関数
【transform:translate()】xy軸上の移動することができる

■scale() 要素を伸縮させることができる関数
【transform: scale(1.6, 1.6) 】要素をx軸方向、y軸方向に1.6倍拡大できる

■skew() 要素を歪ませることができる関数
【transform:skew()】要素に傾斜をつけることができる

font-sizeの単位をvwにする【vw】とは?

■VWとは

vwは、ビューポートの幅に応じてサイズが変化するピクセル単位で、ウェブデザインでリキッドなレイアウトを実現するのに役立ちます。例えば、画面幅に応じてフォントサイズを自動的に調整したい場合に有用です。

■スマホの画面幅は、モデルによって全然ことなる
スマホの時に、固定サイズのフォントでいいのか?

1vwはビューポートの幅の1%に相当し、親要素ではなくビューポートを基準とした相対値を表します。つまり、ビューポートが100ピクセルなら1vwは1ピクセルになります。この特性により、画面幅に合わせて要素のサイズを拡縮させることができます。そのため、小さいデバイスでは小さく、大きいデバイスでは大きく表示されるようにする場合に適しています。

remはルートのフォントサイズを基準にしてサイズを変更しますが、vwはビューポートの幅を基準とするため、レスポンシブ対応する際にはルートのフォントサイズを変更する必要がありません。

fontの単位には以下があります。

単位名 説明
vw ビューポートの幅の 1/100(100vwで横幅いっぱい)
vh ビューポートの高さの 1/100(100vhで縦幅いっぱい)
vmax ビューポートの高さか幅の大きいほうの 1/100
vmin ビューポートの高さか幅の小さいほうの 1/100

320pxの横幅を基準にfont-sizeを指定した例

px vw
10px 3.125vw
11px 3.4375vw
12px 3.75vw
13px 4.0625vw
14px 4.375vw
15px 4.6875vw
16px 5vw

 

外部リンク:画面サイズに応じてfont-sizeを「ちょっとずつ」拡縮させる 参考:OLDOFFICE&CO Update:2022-07-31

 

【font】16px ⇆ 1rem 数値変換早見表

■16px ⇆ 1rem 数値変換早見表

16pxの時にrem値の計算表。コーディングの際に役立ててください。
2pxにつき0.125pxプラスされます。

px rem
10px 0.625rem
12px 0.75rem
14px 0.875rem
16px 1rem
18px 1.125rem
20px 1.25rem
22px 1.375rem
24px 1.5rem
26px 1.625rem
28px 1.75rem
30px 1.875rem
32px 2rem
34px 2.125rem
36px 2.25rem
38px 2.375rem
40px 2.5rem
42px 2.625rem
44px 2.75rem
46px 2.875rem
48px 3rem
50px 3.125rem
60px 3.75rem
70px 4.375rem
80px 5rem
90px 5.625rem
100px 6.25rem

段落テキスト&ポイントテキストとは? その変更方法【Photoshop】

Photoshopのテキストツールにおける、段落テキスト、ポイントテキストとは?

■段落テキスト
段落テキストはバウンディングボックス内に文章が入るもの。ボックス内から文字がはみ出ず、折り返されます。テキストの範囲をここからここまで!と決めて文章を作成したい場合に便利です。

■ポイントテキスト
ポイントテキストは、通常時(デフォルト)で、文字に下線が出ており、タイトルなどで使用されることが多いです。

 

作ったテキストのレイヤーを右クリック→段落テキストに変更(ポイントテキストに変更)で変更ができます。

 

外部リンク:【Photoshop】意外と便利?!段落テキスト&ポイントテキストの変更方法 参考ゼロワンアース 2019.02.08

https://01earth.jp/web-create/photoshop/photoshop-text-change/

テキストボックス(テキスト)の選択解除方法

Photoshop(フォトショップ)のテキストボックスを解除したい場合、(テキストの範囲を設定、折り返すボックスのこと)テキストをクリックすると、テキスト入力時に、画面上にあるオプションバーに「×」「○」ボタンが表示されます。この「○」をクリックすると、文章が確定され、テキストボックスの選択が解除が可能になります。

外部リンク:テキストボックスの選択解除方法 参考:株式会社ComD

外部リンク:Photoshop でテキストを追加および編集する方法 Adobe

https://helpx.adobe.com/jp/photoshop/using/add-edit-text.html

iPhoneでmp4の動画が自動再生されない時の対処法

まずiPhoneが停電力モードになっていないか確かめましょう。
低電力モードになっていると、一部機能が制限されて、自動再生されなくなります。
設定から、「バッテリー」で、停電力モードを解除しましょう。

外部リンク:iPhoneの低電力モードに設定していると動画が自動再生されないCMAブログ 2019.11.01

また、videoタグの「autoplay muted playsinline」はセットです。
これが無いと、勝手に音を再生させないように、Chormeは初期設定されているので、自動再生の場合は「autoplay muted」もいれましょう。

外部リンク:デザイン事務所セーノ 更新日:2022.07.21

【HTML】覚えておこう!埋め込み動画が自動再生されないときの解決法!