掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
|
|
<Number>: [00000248]
<Date>: 2022/08/13 17:03:38
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [00000246]
<Date>: 2022/07/29 16:50:43
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [00000245]
<Date>: 2022/07/26 00:12:17
<Title>:
<Name>: amanojaku@管理人
|
|
|
>ありがとうございます。
>単位はremや％を使えば良いのでしょうか？
アマチュアなら、それでも良いですが、プロは基本的にvwを使います(特別な場合に限りvhも稀に使いますが)。
スクールでは、一旦 pxでWebページを作らせてから、それをvwに換算させてWebページを作らせる授業をやってる所もあるようです。
Webデザイナーはpxでデザインカンプを作りますが、コーダーはpxをvwに換算しなければならないので、その練習として そのような授業をしていると思われます。
【重要】つまりコーダーはpxをvwに換算する能力が必要です、逆に言うとpx→vwの換算が出来ないとプロは無理です。
ピクセル・パーフェクト(所謂 イメージ・パーフェクト)なら、px→vwの換算は四則演算とパーセントの概念さえ理解できていれば特に難しいことはありません(パーセントの計算も単なる四則演算なので、結局のところ全て四則演算です)。
そのスクールのようにpxでWebページをコーディングしてモックアップを作った方がコーディグ･スキルとしては明らかに向上するでしょう(ただし凄く根性が必要ですが)。
なので、そのスクールのカリキュラムは、非常に考え抜かれたカリキュラムと言えます(根性派ならオススメ)。
(普通 そこまでの根性は無いでしょうから)pxでWebページをコーディングしなくても良いので、(Webデザイナーのように)pxでモックアップを作って、それをvwに換算してWebページを作成してみると良いでしょう(WYSIWYGエディタでWebページとしてモックアップを作ると分かりやすいでしょう)。
また、今まで自分が作ったWebページをモックアップに見立てて、それをvwに換算してWebページを作り直すのも良いでしょう。
100vwは「bodyタグのデフォルトmargin、スクロールバーの幅」は一切 考慮されてないので、横幅が はみ出ます(つまり「bodyのデフォルトmargin、スクロールバーの幅」のサイズを引いて計算しなければなりません)。
ちなみにプロの場合はbodyのデフォルトmarginをゼロに設定するようです(その場合はスクロールバーの幅のサイズだけを引いて計算すれば良い)。
スクロールバーの幅を引きたい場合は、スクロールバーを自分でカスタマイズすれば、実際の表示領域を算出できるでしょう。
なお モバイル(スマホ、タブレット)はブラウザの仕様が違うので、スクロールバーの幅はゼロと考えて良いです。
いきなり難しいことから始めずに、初めは簡単なレイアウト(デモ版、パイロット版)からトライしてみると良いでしょう。
|
|
|
|
|
|
|
|
<Number>: [00000243]
<Date>: 2022/07/25 19:38:16
<Title>:
<Name>: amanojaku@管理人
|
|
|
>adove xd のスタータープランではダメなのですか？
良く知らないですが、画像ファイルなどの出力は出来ないのでは？
その場合は、ネットから適当に代用の画像をDLすれば良いでしょう。
７日間以内に全設定データを取得すれば良いですが、いずれにしろ実用的には使えない。
https://teru1213.com/xd-free/#index_id6
>体験版終了後は自動的にサブスクがスタート
>体験版の７日間が終了すると自動で月々プランまたは、年間プランのサブスクがスタートするので気をつけて下さい。
>
>サブスクがスタートしても14日以内であれば、全額払い戻しの対応も可能です。
>詳細はアドビ体験版またはサブスクリプションの解約(公式ページ)にて確認してみて下さい。
>
>同一PC環境から体験版を利用できるのは1回だけ
>基本的に同一PC環境から体験版を利用できるのは1回だけです。
蛇足ですが。
もしも フロントエンド(プロ)を目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。
なぜ プロとして失格なのかは、下記「ダメダメ･デモ」をChromeモバイル･エミュレーターで約「1000px～3000px」解像度でチェックしてみれば一目瞭然です(表示の大きさが変わる)。
モバイル･エミュレーターで解像度を変更したら、必ずリロードして下さい。
ダメダメ･デモ
http://xd305417.html.xdomain.jp/demo/test/005.htm
自分が作ったページも「1k～3k」解像度でチェックしてみると良いでしょう。
PCフレンドリー･デモ
http://xd305417.html.xdomain.jp/demo/test/003.htm
Chromeモバイル･エミュレーターの操作法
http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51&
モバイル･エミュレーターは、当然 スマホ用エミュレーターなので(metaタグの)viewportで固定値が指定されている場合は、viewportの設定値の解像度が優先されるので注意して下さい(この制限を理解していればPC用としても利用可能です)、つまり PC用ページとしてチェックしたい場合で(metaタグの)viewportで固定値が指定されている場合は、その設定をコメントにするか削除して下さい。
そうしないとスマホ用(metaタグの)viewportが有効になってしまうのでPC用の表示をチェックできません。
Chromeモバイル･エミュレーターでチェックする場合、モニターは かえって1k解像度のほうが分かりやすいでしょう。
現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px～1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。
とりあえず下記を参考に「特定の解像度に依存しない実用的なWebページ」を実際に作ってみると良いでしょう。
もしも フロントエンド(プロ)を目指すなら、下記を理解でき具現化できてフロントエンド(プロ)の"基礎"レベルです、本職のフロントエンド(プロ)になるには更に上のレベルが要求されます。
ポートフォリオを作成するなら、PCにおいては「1k～6k」解像度ぐらいには対応すると良いでしょう、「レスポンシブ･デザイン対応、クロスブラウザ対応」も必須です。
なので、その「特定の解像度に依存しない実用的なWebページ」も、PCにおいては「1k～6k」解像度と、「レスポンシブ･デザイン、クロスブラウザ」にも対応させて、ポートフォリオの練習として作成してみると良いでしょう。
「特定の解像度に依存しない実用的なWebページ」詳解
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000031C&tsn+0000031C&bts+2022/04/27%2016%3A47%3A37&
|
|
|
|
|
|
|
|
<Number>: [0000023E]
<Date>: 2022/07/10 18:11:36
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [0000023B]
<Date>: 2022/07/08 14:45:48
<Title>:
<Name>: amanojaku@管理人
|
|
|
>初歩的な質問なりますが、コードを覚える一方で色彩の勉強やフォントの知識などは勉強しないのでしょうか？
Webデザイナーはデザインカンプ(データ)を作ってコーダーに渡します。
コーダーは、そのデザインカンプ(データ)を「Photoshop、Illustrator」などで抽出します。
各カラーの値を抽出します。
各画像データの抽出し、適切なサイズに変換します。
各サイズ「要素、フォント、マージン、パディング、ボーダー」などのpx値を抽出してvwに換算します。
フォント・ファミリーの種類を抽出したら、その代替フォント・ファミリー群の知識が必要です(当方は代替フォント・ファミリー群の知識は無いので、ご自分でググって下さい)。
なのでコーダーは「Photoshop、Illustrator、XD」の三種の神器はバリバリ使えるようにしとけ、と言われています。
>美観的に美しいウェブサイトを作ることが目的で、それを実現するためにコードの学習が（勿論コードが端的で美しいというのも重要だと思います）必要と理解していたのですが、コーディングの学習ばかりで、エンジニア、またはコーダーに寄りすぎている感じがして自分がどこに向かっているのか分からなくなってしまうんです。
Webデザイナー側の仕事と、コーダー側の仕事を分けて考えて下さい。
>私はコードも勉強してデザインも一緒に勉強しwebデザイナーとして将来仕事ができたら良いなと考えていたのですが、全て分業制でコーダーはひたすらコードを書くだけみたいなことになってしまうのが現実なのでしょうか？
もちろん、「Webデザイナー+コーダー」の兼業者も稀にいるでしょう。
もちろん「Webデザイナー、コーダー」の勉強をして良いですが、勉強は分けて考えて下さい(「今はコーダーの勉強をしている」、「今はWebデザイナーの勉強をしている」のように)。
Webデザイナーなら当然「デザイン、色彩、フォント・ファミリー」の知識は必要です。
|
|
|
|
|
|
|
|
<Number>: [00000238]
<Date>: 2022/06/21 16:55:52
<Title>:
<Name>: amanojaku@管理人
|
|
|
>どこで情報をインプットしていますか？？
基本的に勉強は嫌いなので、質問･掲示板の質問が(自分が知らなくても)自分が答えることが可能そうなら、ググって回答すると言う感じで勉強していましたが、それをやる場合には まず基礎を勉強した方が良いでしょう。
本気で勉強したいなら、既に回答が有っても、自分で実際にコードを組んでみると良いでしょう、また他の回答者様のコードを見るのも勉強になります。
>あと、
>webプログラミング歴何年くらいでしょうか？？？
基本的に勉強は嫌いなので、恐らく10年以上前に掲示板を作ってから、それから全然 勉強してなかったです(つまり 当時は掲示板を作りたかっただけで、本格的にHTMLを勉強する気は無かったので)。
オブジェクト指向プログラミングは それ以前にJavaで勉強してましたが。
多分2年前ぐらいから質問･掲示板で回答するようになりました。
質問･掲示板で回答するために高度なCSSも勉強しようとしましたが、ほぼ分からない状態でチョロと勉強しては ほぼ分からずゴールも全く見えない状況が辛いので暫く休んで、また チョロと勉強しては ほぼ分からずゴールも全く見えない状況が辛いので暫く休んで、の繰り返しで3ヵ月経っても(当然と言えば当然ですが)全く進歩が無い感じだったので、もう それからは経過日数を考えるのはヤメるようにしました、(当方は全然 根性は無いですが)その経験から言うと根性を入れてバリバリ勉強することを強く推奨します(下記は当方の作ったデモです)。
CSSデモ集(-)
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000025C&tsn+0000025C.&
そのころにレスポンシブ･デザインが騒がれ出していたと思いますが、誰も詳細な解説をしていなかったので、(なんで こんな重要なことを誰も解説してないのかと言う思いも有って)ググりながらググりながら下記の記事のレベルを徐々に上げていった感じです、下記を見せると大抵の人はWebページの作成は無理だと諦めてしまいますが(これだけ詳細に解説しているサイトは恐らく他には無いでしょう)。
「特定の解像度に依存しない実用的なWebページ」詳解
http://ashtarte.pa.land.to/utf8/smt.cgi?r+twilight/&bid+0000031C&tsn+0000031C&bts+2022/04/27%2016%3A47%3A37&
|
|
|
|
|
|
|
|
<Number>: [00000232]
<Date>: 2022/06/18 11:59:58
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [00000231]
<Date>: 2022/06/15 21:35:58
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
|
|
<Number>: [00000230]
<Date>: 2022/06/13 22:29:57
<Title>:
<Name>: amanojaku@管理人
|
|
|
|
|
|
|
|
SMT Version 8.022(+A) Release M6.
Author : amanojaku.
