1. ホーム /
  2. LINK

LINK

  • 2025.02.25

Git／GitHubとは？

Gitは「共有でコードを管理できるシステム」です。複数でコードを管理する場合、先祖帰りやデータの差分など無いように管理できます。
GitHubは、さらにGitで管理したものを「ネット上に管理したコードを保存をしたり、チーム皆んなで共有作業するためのオンライン（プラットフォーム）サービス」です。「バージョン管理システム」とも呼ばれます。

具体的には、以下のような使い方ができます：

■コードの保存と管理
自分が作ったウェブサイトのHTMLやCSS、JavaScriptなどのコードをGitHubに保存できます。これにより、コードを失う心配がなくなり、どの時点でも過去のバージョンに戻すことができます。

■チームでの協力作業
他のデザイナーや開発者と一緒にプロジェクトを進めるとき、GitHubを使ってファイルを共有したり、お互いの変更内容を確認しながら作業することができます。

■自分の作品を公開
作ったウェブサイトをGitHubにアップロードして、ポートフォリオとして他の人に見てもらうことができます。GitHub Pagesという機能を使えば、コードを公開するだけで簡単にWebサイトとして表示できます。

簡単にまとめると、GitHubは「コードを共有保存」「チームで作業」「作品を公開」するために使う便利なツールです。Webデザイナーとしても、コードやデザインの管理に役立ちますよ！

参考URL:GitHubの使い方を画像つきで徹底解説！初心者でもすぐ使える
2025年2月4日：侍エンジニアブログ

  • 2025.01.06

動画圧縮サービス

動画が重い場合、圧縮することで背景などに使用も可能です。
できれば、Youtubeなどの動画プラットフォームにアップして設置するのが理想です。

ただ、どうしてもvideoのタグなどで埋め込みたい場合は下記などのサービスを利用して軽量化しましょう。
■VideoSmaller は動画のファイルサイズを小さくする無料オンラインサービス　参考URL
https://www.videosmaller.com/jp/

■動画容量を小さくしたい！Windows・Mac・スマホで使える圧縮ツール16選
※参考URL　LetroStudi　2023.07.12
https://service.aainc.co.jp/product/letrostudio/article/16-compression-tools

ちなみに、mp4に変換したい場合は、「動画をMP4に変換｜Adobe Express」がおすすめです。

  • 2024.11.29

無料ホームページ制作ツール・ノーコード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はもちろん必須なので、きちんと学ぶ必要があります。

  • 2024.11.29

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

ドクセル

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

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

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

  • 2024.11.07

【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()】要素に傾斜をつけることができる

  • 2024.05.31

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

 

  • 2024.05.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