作業メモ

横並びメニュー

2022-05-23T11:43:00.000+09:00

横並びメニューの参考URL

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

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

横並びflexについて

2022-05-21T22:19:00.008+09:00

〇もう迷わない！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

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

2022-05-21T21:57:00.001+09:00

白背景（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フォントについてまとめ

2020-05-28T09:46:00.000+09:00

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/

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

2020-05-21T00:52:00.004+09:00

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

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

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

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

2020-05-20T23:09:00.003+09:00

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

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

LibreOfficeを使う

2020-04-08T23:31:00.003+09:00

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

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

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

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

2020-03-21T23:04:00.002+09:00

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

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

2020-03-21T22:58:00.000+09:00

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

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

後で読む

2020-03-14T11:17:00.000+09:00

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

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

【Googleドライブ】を使う

2020-03-12T23:46:00.001+09:00

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

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

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

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

openofficeを使った表計算

2020-03-08T00:09:00.001+09:00

●A4サイズに合わせる

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

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

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

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

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

OpenOfficeで文字調整

2019-08-26T22:04:00.003+09:00

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

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

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

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

バナーをつくる

2019-07-11T22:22:00.000+09:00

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

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

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

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

参考サイト
--------------------------------------------------------
キャッチコキャッチコピーの作り方｜もう失敗しないための７大テクニック！ピーの作り方｜もう失敗しないための７大テクニック！
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アニメ

2018-12-26T22:37:00.003+09:00

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

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

CSSについて

2018-10-31T07:14:00.001+09:00

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

▼後で読む

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

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

2018-10-31T06:58:00.000+09:00

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

■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色に角丸

2018-10-30T15:31:00.003+09:00

■ソース

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

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

float50%

2018-07-22T02:17:00.004+09:00

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

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

2015-09-13T22:25:00.001+09:00

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

$(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

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

php　メール送信　設定

2015-09-12T22:04:00.002+09:00

メール送信ができない

設定の変更↓

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

・マコトのおもちゃ箱　～ぼへぼへ自営業者の技術メモ～
http://piyopiyocs.blog115.fc2.com/blog-entry-623.html

・
XAMPPのローカル環境からメールを送信できるように設定する方法【初心者向け】 | TechAcademyマガジン http://techacademy.jp/magazine/4129

・XAMPP のローカル環境から sendmail, Gmail を使ってメールを送信出来るようにする | unlinked log http://log.noiretaya.com/139

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

gmailでログイン試行をブロックしました↓↓

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

Xamppでsendmailを使う - wiki - PCスキルの小技・忘却防止メモ
http://tips.recatnap.info/wiki/Xampp%E3%81%A7sendmail%E3%82%92%E4%BD%BF%E3%81%86

php準備

2015-09-12T21:02:00.001+09:00

XAMPPをインストール

Apache→WEBサーバ

MySQL→データベース

▼localhost
自分自身のコンピューター
※自分のコンピュータ上で動かしているから

PHP、サーバー上で動作する言語

サーバーはないのでXAMPPは必要

PHP標準設定ファイル
php.ini

↓場所
C:\xampp\php\php.ini

xamppの中のhtdocsにフォルダ（php10）をコピー

URL：https://localhost/php10/......

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

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

Fireworks長さの制限をのばす

2015-09-09T12:55:00.003+09:00

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

Fireworksでカンバスサイズの最大値を6000px以上に増やす方法 | パズルファクトリー制作ノート
http://blog.pzz.jp/?p=1013

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

手書き風　イラレ

2015-09-06T22:04:00.002+09:00

手書き風は線でブラシ

手書き風にしたい形を作る。（線のみ）

【ウィンドウ】→【ブラシライブラリ】→【アート】→【アート_木炭・鉛筆】　　

線を選択してブラシを選択。

イラストレーターで実現！手書き風イラストの描き方｜テクニック｜デジナーレカフェ　　
http://designare-cafe.com/technic/20130828175201.html

企画書まとめ

2014-07-31T16:27:00.001+09:00

参考サイト
http://daredemokikaku.web.fc2.com/index.html

★企画書の作り方

企画書とは、こんなことがしたい！こんなものを作りたい！

自分の考えを簡単にまとめたもの

提出する相手にわかりやすく書くことが大事

★企画書の構成

①確認　具体的目標と現状や状況
②目的　具体的な表現（相手にとってのメリット）
③プロセスの設計（ターゲット・エリア・期間・どのように）
④実施企画　費用・スケジュール・人員

★最低限必要なこと

なぜ、成果を上げることができるのか、具体的な戦略・差別化（コンセプト）で説明する。

成果をあげることができないものは意味なし。

企画の目的
目的を達成する戦略
実施方法
スケジュール
予算

相手を説得させるためには、はっきりと書く。あやふやはダメ。

★デザインと配色

わかりやすく見出しのレイアウトなど工夫
グラフや図の利用。配色も考える