横並びメニュー

横並びメニューの参考URL

〇初心者の為のCSS:コピペでOK！横並びナビメニュー10選<

https://www.e-sanwa.co.jp/sbs/column/20180323/

横並びflexについて

 〇もう迷わない！CSS Flexboxの使い方を徹底解説
https://webdesign-trends.net/entry/8148#CSS_Flexbox

配置したコード

〇どっちを使う？CSSで横並びのコンテンツ（Float or Flex）
https://www.w2solution.co.jp/tech/2020/09/29/%E3%81%A9%E3%81%A3%E3%81%A1%E3%82%92%E4%BD%BF%E3%81%86%EF%BC%9Fcss%E3%81%A7%E6%A8%AA%E4%B8%A6%E3%81%B3%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%EF%BC%88float-or-flex%EF%BC%89/#2

他のブラウザへの対処

〇2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ
https://webdesign-trends.net/entry/8257

背景のみ透過のヘッダーナビゲーション固定

白背景（RGB値）、50％透過↓

div {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;

  background: rgba(255,255,255,0.5);
}

marginは余白をなくす

色のRGB値を調べる↓

〇RGBと16進数カラーコードの相互変換ツール - PEKO STEP

https://www.peko-step.com/tool/tfcolor.html

-------------------------------------------------------------

 参考URL

https://www.design-memo.com/coding/css-rgba-opacity#:~:text=%E8%83%8C%E6%99%AF%E3%81%AE%E3%81%BF%E9%80%8F%E9%81%8E%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82&text=%E4%B8%80%E7%95%AA%E5%B7%A6%E3%81%8C%E4%BD%95,%E3%82%92%E4%B8%8B%E3%81%92%E3%81%9F%E7%8A%B6%E6%85%8B%E3%81%A7%E3%81%99%E3%80%82

------------------------------------------------------------

WEBフォントについてまとめ

Google Fonts使い方
https://www.asobou.co.jp/blog/web/webfont


Notoフォント（軽量化）
https://pando.life/qwintet/article/216

フォントについて
https://cunelwork.co.jp/blog/web/font-family-settings-gothic/

定番フォント
https://webdesigner-go.com/proskill/font/

フォントがあるかチェックする

◆アウトラインされてないフォントを見つける

①全てのロックを解除(オブジェクト)

②選択→オブジェクト→テキストオブジェクト

データーのバージョン（イラレ）

『Adobe Bridge』で知りたいデータをクリックして
ファイルプロパティをみる

他人が制作したデータのバージョンを知る方法
https://www.fourglobe.co.jp/blog/p-84943

LibreOfficeを使う

■文書ドキュメントで文字を囲む
【表の挿入】で1つだけ追加➡右クリックで表のプロパティ➡外枠で調整（パディングも調整できる）

■表計算ドキュメント
指定したセルに追加、実際に全体的にふえるけど、見栄えは変わらない。
下に追加する場合…

■スライド
サイズ変更
スライド→プロパティ

イラレ、線が突然？ギザギザに

【編集】→【環境設定】→【一般】
アートワークのアンチエイリアスをチェック

イラレのデータをワードに

イラレでepsに変換（余計なレイヤーは削除。非表示でもそれを含んだデータになる）→Adobe AcrobatでPDFに変換
余計なものがついてこない
かならず、挿入→PDF

※PDFでほかの誰かも編集するときに限る。ただ、イラレのデータをワードに挿入するのはほかの方法あり

後で読む

【保存版】問合せを劇的に増やすエントリーフォーム最適化（EFO）15の方法

https://martechlab.gaprise.jp/archives/lpolab/efo-1250/

【Googleドライブ】を使う

図形描写
★サイズ変更
ファイル→ページ設定→適用

スライド
★縦表示
ファイル→ページ設定→カスタム
（A4サイズにするには、210 × 297）

★100％表示
表示→ズーム→100％
ショートカット（【ctrl】【Alt】同時押しの【+-】）

スプレッドシート
コピペしたテキストをセル内で改行させる
表示形式→テキストの折り返し→折り返す

openofficeを使った表計算

●A4サイズに合わせる

【書式】⇒【ページ(ページタブ)】の用紙サイズがA4になってるのを確認（※）⇒【OK】

※A4サイズ以外で出すときは変更

●セルの横幅を一気に変更
上の英語部分を選択して【Shift】キーを押しながら変更

●図形
【表示】⇒【ツールバー】⇒【図形描画】


そのほかメモ↓
パワーポイントで開きたいときは、保存方法をかえるとできる
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1348778928

OpenOfficeで文字調整

■行間
 【文章を選択】⇒【右クリック】⇒【行間】

■文字の間隔
【文章を選択】⇒【右クリック】⇒【文字】の【位置（間隔）】


*おまけ
読みやすい文字の大きさ12ｐｘ

■全体の余白
【ページ】⇒【ページ】

バナーをつくる

視認性とクリック率を考える

バナーはただデザインが良いだけでは意味がありません。視認性が高く潜在顧客が「おっ！自分に関係がありそう！」と思ってくれるデザインやレイアウト、そしてキャッチコピーが必要なのです。

視認性...ぱっと見のわかりやすい



■キャッチコピーを考える（ある場合は不要）



参考サイト
--------------------------------------------------------
 キャッチコキャッチコピーの作り方｜もう失敗しないための７大テクニック！ピーの作り方｜もう失敗しないための７大テクニック！
 https://liskul.com/catch_copy-8281

--------------------------------------------------------

■バナーのターゲット

○○な人がターゲット

その人は、 関係性はあるがそこまで興味を持っていない人

■バナーの役割

ターゲットに対して、気付きを与えることがバナーの役割

■気付きとは？

デザインの良しあしだけでなく、

わかりやすく興味を惹くバナー

×商品やサービスのアピールポイントを沢山書く。

×商品やサービスの機能性

〇ターゲットが商品から得る事のできるベネフィット。

■バナーの作り方

①バナーに必要な要素を書き出す。テキスト
メリットになる部分を決める。その他、優先順位をつける

②バナーデザイン参考サイトでイメージに近いバナーを探す

手書きでレイアウトを決める

モノトーンでレイアウトを調整色付け”というのが効率よくバナーを作る方法です。 

モノトーンにすることによって色に引っ張られることなくレイアウト調整に集中できます。

まとめ

バナーは通常のWebサイトの目的とは違い、潜在顧客に当事者意識を持たせることが大切なんですね。バナーは目立たせることはもちろん大切ですが、バナーの基本。誰に、何を、どう伝えるか、ディレクターとしっかり相談してバナー制作をします。

参考サイト
-----------------------------------------------------------
「45分」で作れる！ 高品質バナーの作り方！
https://liskul.com/cr_45minbanner-4240

伝わりやすいバナーをデザインする10のポイント（文字の組み方編） : ビジネスとIT活用に役立つ情報
 https://www.asobou.co.jp/blog/web/banner-design

デザイナー視点で見る！イケてるバナーとトホホなバナー～イケてるバナー編～神戸ホームページ制作センター

https://hm-solution.jp/web/post1580.html

▽引用元
Webデザイナーが知っておきたい高品質なバナーの作り方をまとめてみた
http://www.webdesign-fan.com/banner-matome

-----------------------------------------------------------

FireworksでGIFアニメ

 『ステート』を使う。ステートを作って
右下の再生ボタンで確認
画像プレビューでも確認できてそのまま書き出し。







----------------------------------------
▼参考サイト
https://www.oosaka-web.jp/column/web/160323/
----------------------------------------

CSSについて

CSSの-moz-（ベンダープレフィックス）とか、もういらない？

▼後で読む

https://qiita.com/amamamaou/items/42197e443134478befaf

googleブログにソースを貼りつける。【 googleブログ作業メモ】

特殊文字のエスケープ処理（変換してくれるサイト）をさがす。

■HTML特殊文字変換｜コードをホームページに載せる時に便利 | すぐに使える便利なWEBツール | Tech-Unlimited
https://tech-unlimited.com/escape.html

→変換したものをpreタグとcodeタグで囲むだけ




参考サイト
https://mrd-web.com/web_codepreview


------------------古------------------

◆ただ単に簡単にソースをはる

→変換したものをpreタグとcodeタグで囲むだけ


ソースを貼り付けるだけで変換してくれるサイト↓↓↓
しかもpreタグとcodeタグで囲ってくれる。
・【ブログツール】ソースを「そのまま表示する為のHTMLソース」に変換
http://blogtool.flatlabs.net/source.html


説明の分かりやすいサイト↓↓↓
・htmlやPHPなどのソースをBlogに表示する方法 | VIVABlog
http://vivablog.net/wordpressplugin/kiji27/


※そのまま貼りつけると、飛び出てしまうので、折り返しをさせる。
CSSに追加

pre {
white-space: pre-wrap;
}

▼実際にはりつけたもの※背景に色をつけてあります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>ソースの表示</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>

<body>
<h1>ソースの表示</h1>

<ul>
<li>テキストダミー</li>
<li>テキストダミー</li>
</ul>

<p>テキストダミー</p>

</body>
</html>

※ブログの編集機能で色を付けたり文字を大きくしても
コピペするときは問題なくソースのみがコピーされる

◆今後のことを考えて見やすいものにする

タグに色をつけたりしたいとき↓↓↓

・ソースコードを綺麗に表示するJS「dp.SyntaxHighlighter」｜caraldo.net | WebとiPhoneとロードバイクが大好き！
http://blog.caraldo.net/2008/05/jsdpsyntaxhighlighter.php

背景2色に角丸

■ソース

background: linear-gradient(#色 50%, #色 50%);
border-radius:3px;

参考サイト
https://yaritakunai.hatenablog.com/entry/2015/12/24/071000

float50%

http://web-dsn.com/css/css-50percent/

フォームのチェック 【jQuery】

送信ボタンが押された後、アクションに送信する前に実行するためには↓

$(function(){
$("form").submit(function(){
       alert('テスト');　
       return false;　←送信キャンセル
  });});

html5のエラーメッセージをなくす
formタグに novalidate


【html】に↓

条件を示すCSS
validete required number mail

をinputタグに指定する。

条件を満たしていないものに下記エラーのCSSをつくる

error
エラーメッセージ

<input type="text" name="name" value="" id="name" class="validate required" />

★順番
チェックするimputタグにclass指定【validete】

必須項目に【required】をCSS複数指定もしくは下の二つのCSS

【number】は数字かチェック

【mail】メアドかチェック



▼テーブル▼

$(function(){
 $("#contents_form form").submit(function(){
  //エラーの初期化
  $("p.error").remove();
  $("td").removeClass("error");
  
  $("input,textarea").filter(".validate").each(function(){
   
   //必須項目のチェック
   $(this).filter(".required").each(function(){
    if($(this).val()==""){
     $(this).parent().prepend("<p class='error'>必須項目です</p>");
    }
  });
     
   //数値のチェック
   $(this).filter(".number").each(function(){
    if(isNaN($(this).val())){
     $(this).parent().prepend("<p class='error'>数値のみ入力可能です</p>");
    }
    if($(this).val()==""){
     $(this).parent().prepend("<p class='error'>必須項目です</p>");
    }

   });
   
   //メールアドレスのチェック
   $(this).filter(".mail").each(function(){
    if($(this).val() && !$(this).val().match(/.+@.+..+/g)){
     $(this).parent().prepend("<p class='error'>メールアドレスの形式が異なります</p>");
    }
   });
  
  });

//エラーの際の処理
  if($("p.error").size() > 0){
   
    $("p.error").parent().addClass("error");
 return false;
  }
  
 });
});

※必須の場合はこの部分を足せばOK
他のやり方はまた今度探す

 $("要素").filter("クラス").each(function(){
別の条件で絞込み繰り返し

その中の
$(this).filter("違うクラス")

【validete】クラス、チェックしますよ。
そんでもって【validete】の中の【required】クラスはこう処理してね。の意味



------------参考サイト----------------

jQueryでフォーム入力をチェックする

 http://www.tam-tam.co.jp/tipsnote/javascript/post3828.html

プラグインを使わずにjQueryでフォームチェック（validate） | WordPress
http://blog.web4natural.com/webprogram/72

HTML5/フォーム/form要素 妥当性のチェックを無効にする - TAG index Webサイト
http://www.tagindex.com/html5/form/form_novalidate.html


-------------参考書籍---------------------