[ご案内] coding / html / dreamweaver コーディングを一覧表示しています。こちらからトップページへ戻れます。

ヘッダ固定による、ページ内リンクのズレを回避する方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/172174103.html

ヘッダ固定による、ページ内リンクのズレを回避する方法

スマートフォンサイトやPCサイトで
最近トレンドのヘッダ固定ですが、
ヘッダを固定することで、ページ内リンク指定の際に
意図しないズレが発生することがあります。
それの回避方法。

position:fixedでヘッダ固定時のページ内リンクのずれを解消したい | Tips Note
http://www.tam-tam.co.jp/tipsnote/html_css/post4776.html

#link01 {
margin-top:-100px;
padding-top:100px;
}

<a href="#link01">なんとか</a>
<div name="link01" id="link01">かんとか</div>


上記参考になりました!!
今後もお世話にな可能性は高そうですね。。

絶対パス?相対パス? ファイルパス(file path)ごとの特徴をあらためて。      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/172174009.html

絶対パス?相対パス? ファイルパス(file path)ごとの特徴をあらためて。

パスの種類っていっぱいありますよね。

絶対パス
相対パス
ルートパス
フルパス

色々あります。
どう違うのでしょうか。

詳細については調べれば他サイトにも沢山情報があるので詳しくは書きません。
パス例とメリットデメリット、利用シチュエーションなどを
自分なりの言葉でまとめておきます。

どの書き方にもメリットデメリットがあるため、
どれが推奨とはいえません。


■絶対パス
例:http://tech.kimihiko.jp/img/design/blog/logo.png

メリット:
⇒とりあえずどこからでも確実にリンクさせられる。

デメリット:
⇒冗長になる。ドメインが変わったら書き換えが必要。

利用シチュエーション:
⇒余り使わない。
⇒とにかく今すぐ確実にリンクしたいとき。
⇒httpサーバーからhttpsサーバーを参照するときなどに書くことがある。
が、 //tech.kimihiko.jp/article/170851629.html のように書くことで
httpとhttpsの両方に対応できるらしい。


■相対パス
例:../../design/blog/logo.png
例:./design/blog/logo.png

メリット:
⇒環境を用意しなくても、ローカルでもブラウザで確認できる。
⇒本番環境とテスト環境で、アップ先の階層が違う場合でもリンク切れしない。

デメリット:
⇒ファイル構造が深くなると分かりづらい。

利用シチュエーション:
⇒ファイル構造が浅めの小規模サイト
⇒複数人が絡むサイト
⇒本番環境とテスト環境で違う場所に公開される可能性があるとき


■ルートパス(絶対パスのなかま)
例:/design/blog/logo.png

メリット:
⇒パッと見、理解しやすく分かりやすい。(同じファイルパスでどこからでも読み込めるため)
⇒同じファイルパスでどこからでも読み込めるため、ページの量産がラク。
⇒ファイル階層が深くなっても、一番上の階層からの指定のため分かりやすい。

デメリット:
⇒環境を用意しなければ、ローカルではブラウザで確認できない。(リンク切れになる。)
⇒本番環境とテスト環境で、アップ先の階層が違う場合、ファイルパスを変更する必要がある。
⇒相対パスへの変更に時間がかかる。

利用シチュエーション:
⇒ファイル構造が深めの大規模サイト
⇒一人で作業が完結するサイト


■フルパス(絶対パスのなかま)
例:/home/xxxx/www/design/blog/logo.png
メリット:
⇒?
デメリット:
⇒?
利用シチュエーション:
⇒動的な部分のパス(一般的な公開範囲よりさらに上位のエリア)

◇◇◇

乱雑ですが、以上です。


少しだけまとめると

・普段使うのは 相対パスか、ルートパス。
・ルートパスはかんたん、相対パスは手間がかかる。
・環境が許すならルートパスで簡単に済ませたいが、
 環境が複雑そうな場合は相対パスにしておいたほうが後々無難か。

◇◇◇

個人レベルではルートパスを愛用しますが
業務など複数人が絡む案件ではルールや運用上の問題が発生してきますので
妥当な書き方を選ぶ必要が出てくると思います。

つまりは色々な書き方を理解し、対応できることで、つぶしが利くと思われます。

まとまりませんが、以上です。


上記書き上げるにあたり、
以下ページが参考にしました。感謝(´-`).。oO

絶対パス、相対パス、フルパスの説明。IT用語のパス(path)って何。フルパスで指定?パスの考え方を説明します。
http://www.chama.ne.jp/download/web/path.htm

コーディングにおけるファイルパスの書き方 | WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”
http://www.qam-web.com/?p=3718

HTMLの相対パス、絶対パスを紹介します【HTML5実践編】
http://scene-live.com/page.php?page=16

ファイルやフォルダの所在を示すパスの種類 - Rewish
http://rewish.jp/blog/tech/path
◆ルートパスは絶対パス

◆相対パス
一般的に広く使われてる指定方法で、指定する側のファイル(例ではindex.html)からの位置を .(ピリオド)と /(スラッシュ)で指定します。
同じディレクトリ(zzz)
./(ピリオド+スラッシュ)または ファイル名のみ(index.html)
一つ前のディレクトリ(yyy)
../(ピリオド+ピリオド+スラッシュ)
二つ以上前のディレクトリ(xxx以上)
../../ ディレクトリ分 ../ を追加

絶対URL
http:// や https:// から始まるURLで指定する。リンクする側(例ではindex.html)の場所に依存しないと言うメリットはありますが、サイトのドメイン自体が変わった場合全てのリンクを入れ替える必要がある。

ルートパス(絶対パス)
絶対パスの一種で、ルート(例の場合 http://example.com/ )からのパスを指定します。
基本的な概念は絶対URLと同じですが、ドメインなどに関係なく指定することができるため、ローカルの開発環境でドメインが異なる場合などに便利です。

/
http://example.com/

/xxx/
http://example.com/xxx/

/xxx/yyy/
http://example.com/xxx/yyy/

/xxx/yyy/zzz/index.html
http://example.com/xxx/yyy/zzz/index.html

デザインどおりの見た目・リンク・ロールオーバーを、できる限り早くコーディング(マークアップ)するいくつかの方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/170179152.html

デザインどおりの見た目・リンク・ロールオーバーを、できる限り早くコーディング(マークアップ)するいくつかの方法

表題の件ですが、

・内容に合わせた正しいマークアップする。
・画像は適切な形式で書き出し、適切に圧縮をかけ軽くする。
・class名、画像名などのネーミングは誰にでも分かりやすく統一感あるものにする。
・画像部分、デバイスフォント部分、検討して組む。
・画像のスライスは要素ごとに内容のぎりぎりできちんと切り出す。

…などという、まっとうな考えは一切排除、度外視し、
とにかくスピード優先
見た目だけデザインどおりに組み立てるでという前提です。


そこでひとつ、時間短縮につながる大きな考え方があります。

それが考える時間を排除すること。

これ非常に大事です。


もう一点。

かっこよく書こうとしない。きれいに書こうとしない。

これも大事。


スマートに書こうと考え始めると、
いつのまにか時間の浪費につながります。


これらポリシーのもと
前述した項目でいくと、以下のようになります。


・内容に合わせた正しいマークアップする。
  ↓↓↓
・p img ul div span a など最小限の種類のタグでマークアップする。
 hすら使わない。どこをhにするとか考える時間ができるので。
 タグを色々使うとそれぞれのタグに対する調整の手間も出てくるので
 使用タグは最小限にする。


・画像は適切な形式で適切に軽くする。
  ↓↓↓
 画像はすべてpng透過で書き出して貼り付けていく。
 画像の拡張子を統一することでスライス設定時間を軽減。
 またどこをpngにするとかjpgにするとか考える時間も省ける。


・class名、画像名などのネーミングは誰にでも分かりやすく統一感あるものにする。
  ↓↓↓
 class名、画像名はすべて気分で直感で決める。
 英語のスペルが間違っていたり英語、日本語ローマ字表記混在とかも
 気にしない。関係ない。考えない。


・画像部分、デバイスフォント部分、検討して組む。
  ↓↓↓
 極論、全部画像。スライスもなるべくざっくり大きな枠ごとに切る。
 デバイスフォントが入るとデバイスごとに調整する時間が出てくるので。


・画像のスライスは要素ごとに内容のぎりぎりできちんと切り出す。
  ↓↓↓
 コンテンツの最大幅で全部統一して切ってしまう。
 リンクを設定しなきゃいけないボタンなどのマテリアルのみ
 ボタンのサイズで切って、それらだけCSSで位置調整するイメージ。


とくに制限なくコーディングしてよい場合の極論ですが、
前述した項目内容では以上です。


ほかに思いつくところでは


■リンクボタンのロールオーバー表現は、画像では無くCSS透過設定で。
.alpha a:hover img {
opacity: 0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
}


■画像のスライスが終わったら、まずはドリを使って画像をすばやく配置する。
ドリ(dreamweaver)でサイト設定をします。

ディレクトリ一覧が表示されますので編集したいhtmlファイルを開き
画像だけをドラッグアンドドロップでどんどん配置していきます。

dw
自動で画像pathなどがついたimageタグが出力されるのでラクです。
css背景に設定すべき画像もとりあえずここに貼り付けていって問題ないです。
あとから、CSS背景として設定するときに
ここで作った画像pathをこぴぺにできるので。

ドリのバージョンや設定によって挙動は
さまざまだとは思いますが詳細は割愛します。


■html cssマークアップのコツ
画像の配置が終わったら
それらをp ul div span a で包んでいき、
CSSも設定する、というかんじになります。

・タグにはすべてclass名をふる。配置した画像すべてにもclass名をふっておく。
・重複名は避ける。
・idは使わない。
・なるべく階層化しない。
・インデントしない。


全タグにclassを振ることはスマートでないうえに、一見手間のようですが
そうすることで他に影響を及ぼさないでピンポイントな調整が容易になる
ので調整箇所以外の影響を防ぎ、調整に思わぬ時間をとられるリスクを予防し、
着実に組んでいける気がします。
同じようなものでも btn1 btn2 などと重複しない名前にする。

idを使わない一番の理由は、classとidの混在がcss指定の手間になるから。

タグは階層化せず、
インデントも極論しなくていいと思います。
ソースも最低限になってきますから、
インデントしなくてもいいです。
インデントも気にし始めると手間になるので。

色々ケースバイケースかもしれませんが。


■まだだあります
便利アドオン、便利ツールの利用。
ファイル格納先コツ…。テスト方法…。
ただ、割愛してしまいます。

。。。


業務なんかでタイト過ぎる納期が決まっていて
ページの重さとかタグとかどうでもいいので、
とにかく早く見た目どおりに!!
という場合を想定してます。

本来あるべきではないですが…。


あとから調整できる時間ができたら
可能な範囲で調整していってもいいと思うんですよね。

それでクライアントが納得するなら…。
(実際の経験としてあります)


繰り返しになりますがダメコードであることは
千も承知の内容となっておりますし、
推奨する気は全くありません。





【随時更新】私なりの新PCを想定した最低限のコーダー初期設定すべて(全設定)      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/101750575.html

【随時更新】私なりの新PCを想定した最低限のコーダー初期設定すべて(全設定)

表題の件ですが、新しいPCが到着した直後の設定を想定しています。
なかなか初期の初期の設定というのは、1度やったら下手すると
数年間することが無かったりして、思い出せなかったりするので
こうして記事にしてメモに残している次第です。

設定関連の記事はこれまでもちょこちょこ…
たとえば秀丸なら秀丸、画像処理なら画像処理などと、
テーマごとに乱筆してきましたが、基本的にはこれまで書いた記事の総括
プラス最新の内容を加味した内容みたいなイメージになります。

いつもながらですが、あくまで超絶自分用のメモみたいなものなのでご了承くださいませ。
あとタイトルに書いてますが、最低限です。
新規環境構築時でパパパと最低限終わらせて、
とりあえず、ある程度は素早くPC環境快適にできたらいいな、と。
これで完璧ではないので、利用していくうえで肉付けしていくイメージです。

…最低限、と書いておきながら設定ボリュームは多いですので
できるとこから設定していきましょう。

はじめはPC環境がなじまないと思うので
これをプリントして持っておくと便利かもですな。

プリントする際は全体は長すぎなので
以下で挿入している ココカラセッテイ〜ココマデセッテイ
の場所だけプリントするといいかもです。


■想定環境
======================================
■Windows 7
※8以降はまだ使ったことがなく、対象外。
※XPはサポートが終了したので、対象外。

■秀丸 8x


■事前準備【重要】
======================================
これまでに使っていた環境の設定を予め準備しておけると
新環境での設定時間の大幅短縮につながります。

以下、予め準備しておきたいファイル・情報一覧です。

・ブラウザログイン情報
・IME(ユーザー辞書)設定ファイル
・秀丸の強調表示設定ファイル
・秀丸のキー割り当て設定ファイル
・秀丸のマクロファイル
・拡張子ごとのサンプルファイル

それぞれの項目について、詳細を説明します。

■ブラウザログイン情報

ChromeとFirefox Syncにログインするための
メールアドレスとパスワード情報を予め準備しておきます。

■IME設定ファイル

設定ファイルの書き出し方法:
Microsoft IME 辞書ツールのウインドウを開き、
ツールメニュー -> 一覧の出力... より書き出しておきます。

設定ファイルの拡張子:txt


■秀丸の強調表示設定ファイル

jsファイル用、htmlファイル用、phpファイル用、共通用、
などの4種あると便利かもですが、
これは今設定している新環境でこれから
どういう作業をしていく予定かによって変わると思います。

設定ファイルの書き出し方法:

そのた -> ファイルタイプ別の設定
上部プルダウンメニューより、それぞれの設定に切り替えたうえで、
右下の、保存/読込.. をクリック。
とりあえず、強調表示のみにクリックされていればよいか?

設定ファイルの拡張子:hilight


■秀丸のキーショートカット設定ファイル

設定ファイルの書き出し方法:
その他 -> キー割り当て -> 保存...

設定ファイルの拡張子:KEY


■マクロファイル

秀丸マクロを実行するための設定の実体ファイルです。

イメージとしてはこれまでに使っていたPC環境の秀丸にて
マクロファイル用のフォルダとして使っていた
フォルダについてサブフォルダ以下も含めたファイルすべて、です。

設定ファイルの拡張子:mac


■拡張子ごとのサンプルファイル

必須ではないですが、あると設定時に便利。
使い方などの説明は、後述します。

自分の準備ファイル名(例):
kakutyoushi_samples.zip

収録ファイル名のリスト(例):
※準備するファイルの中身はなんでもよいです。

htm.htm
html.html
js.js
php.php
txt.txt
css.css
...ほか画像系などの拡張子も。

事前準備の説明は以上です。

*****************ココカラ、セッテイ*******************

■インストールソフトウェア一覧
======================================
上から順番にインストールしていくといい…かもしれない。
ただし、ブラウザのインストールについては
後に追加したブラウザが規定のブラウザになっていくかもしれないので
規定のブラウザにしたいものを最後にインストールしたほうが
結果的に手間が少ないかもしれません。
時間が無い場合は下のほうは後回しにしてもいいと思う。
インストール後のそれぞれの設定については後述します。

◆インストール ファーストステージ
⇒これだけはすぐ入れたい。ほぼ必須。
・chrome … ログインもすぐしてブックマークなどを自動設定しよう。
・firefox … ログインもすぐしてブックマークなどを自動設定しよう。
・lzhpls … ファイル圧縮解凍ソフト。
・秀丸 … これがないと始まらない。まずはインストール。
・さくらエディタ … 秀丸で展開中複数ファイル横断検索しているときのメモテキスト退避用などに利用する。

◆インストール セカンドステージ
⇒徐々に手に入れてもよい。必須ではないがあればより快適でおすすめ。
⇒メモリが貧弱なPCの場合は常駐系ソフトは外してもよいです。
【システム補助系】
・DiskState … HDDの動きをタスクトレイアイコンで明示するソフト。スタートアップ登録して常駐させる。
・mem info … メモリの使用状況をタスクトレイアイコンで明示するソフト。メモリ開放もできる。スタートアップ登録して常駐させる。
【画像表示系】
・XnView … これも軽量画像プレビューソフトです。PSDプレビューが特に優れてます!
・irfan view … 軽量画像プレビューソフト。使い慣れている。一番軽快。
【ファイル管理系】
・flexible Renamer … 強力なファイル名置換ソフト。だいたい使いたくなる。
・ファイル名変更君 … 任意のテキストファイルの情報から一括ファイル名変更できる。すごい便利。
・filesum … 軽快なファイル容量明示ソフト。地味にものすごく便利。
【制作補助系】
・win merge … ファイル比較ソフト。ちゃうちゃうは使ったことが無い。
・yuna color … 軽快な色情報取得ソフト。
・フォント一覧印刷君 … インストールされているフォントの見た目が一覧で見やすい。

◆インストール サードステージ
⇒手に入れられないときに。
【代替系】
・GIMP … フォトショの代替ソフト。
・Inkscape … イラレの代替ソフト。

■OS基本ソフトやインストールしたソフトウェアの設定
======================================
会社に導入されているPCなどの場合、
OS周りの設定は独自にカスタマイズが施されていて
変更できない設定があることがありますのでご留意ください。

■OS(基本ソフト)の設定
――――――――――――――――――

■IME設定読み込み
予め準備しておいた、テキストファイルから読み込みます。

■IE
よく使うページはとりあえずブクマしてしまっていいのでは。

■スタートアップ登録
DiskState、mem infoなど常駐させたいソフトを登録しよう。

場所(例):
C:\Users\【ユーザー名】\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

■windows update
セキュリティや最新のIEを入手するために必要です。
何回か再起動する可能性があり、時間もそこそこかかります。

場所:コントロールパネル -> windows update

■ユーザーアカウント制御設定の変更
システム設定変更の際にいちいち確認ダイアログが
出るのが面倒なので変更しておきます。

場所:コントロールパネル -> ユーザーアカウント
-> ユーザーアカウント制御設定の変更 -> 通知しない、に設定。

■デスクトップアイコンのサイズ変更
デフォルトのデスクトップアイコンは自分にはでかすぎに感じるので小さめに変更します。

場所:デスクトップの何もないところで右クリックをし、
表示されたコンテキストメニューより、
表示 -> 小さいアイコン、を選択します。

■フォルダーオプションの設定変更
設定画面で以下の箇所を変更します。

【全般タブ】
ポイントして選択し、シングルクリックで開く、を選択。

【表示タブ】
隠しファイル...を表示する、を選択。
登録されている拡張子は表示しない、の選択をはずす。

場所:コントロールパネル -> フォルダーオプション

【検索タブ】
[検索項目]にて、ファイル名と内容を常に... を選択。
またzipファイルなどの圧縮ファイル内の検索もして欲しい場合は、
[インデックスが作成されいていない場所の検索]にて、
圧縮されたファイルを含める、を選択します。

■視覚効果を削除して表示を軽快にする設定
コントロールパネル -> パフォーマンスの情報とツール
右側 視覚効果の調整 をクリック。
カスタムを選択し、ウインドウを最大化や最小化するときに... のチェックをはずす。
ほか、不要そうな効果があれば随時チェックをはずす。

※PCの性能が低い場合、デフォルトの
 コンピューターに応じて...の設定の選択状態で
 自動的にカスタム項目のいずれかが無効になって
 機能していることがあると思われます。

■拡張子関連付け設定
予め準備しておいた拡張子ファイルたちを
それぞれ関連付けたいファイルで常に開くよう設定しよう。
とくに画像系は早めに設定しておくと
誤って重いソフトを開いてストレスが溜まることを軽減できるでしょう。

■タスクバーの設定
よく使いそうなアプリケーションをドラッグアンドドロップして登録する。
例)IE、firefox、Chrome、irfanvew など。

タスクバーの位置はお好みで変更する。
タスクバーを固定するか否かも好みでいずれかの設定をする。

■タスクトレイ(タスクバー表示アイコン)表示設定
コントロールパネル -> 通知領域アイコン。
一番下、タスクバーに常にすべてのアイコンと通知を表示する、にチェックする。

■Javaがアップデートしない設定にする。(Javaがインストールされている場合)
コントロールパネル -> Java
更新タブをクリックし、更新を自動的にチェック、をはずす。

セキュリティ的にはアップデートするが望ましいですが重くなるので外します。

■時計ガジェットを起動する
コントロールパネル -> デスクトップガジェット
時計を起動。
起動したら時計ガジェット上で右クリックし、常に手前に表示、を選択。
スキンは好きなものを選択。
なお、ガジェットはWindows 8以降廃止されアプリになるようです。(未検証)

■不要なデスクトップアイコンを消したりする。
デスクトップアイコンは、コンピューターとゴミ箱だけにチェックを入れます。
ついでに、スクリーンセーバーも必要そうなら設定します。

場所:コントロールパネル -> 個人設定 -> デスクトップアイコンの変更

■そのほか個人設定
コントロールパネル -> 個人設定

壁紙などは好きにしたらいいですが、作業用であればデフォルトブルーなど
シンプルなものにしたほうが使いやすいです。
スクリーンセーバーは自宅では無しでもいい。

■デスクトップにショートカットをおく

プログラムフォルダ
場所:C:\Program Files

スタートアップ
場所:C:\Users\【ユーザ名】\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

デスクトップ
場所:C:\Users\【ユーザ名】\Desktop

デスクトップにデスクトップのショートカットを置くのは
デスクトップをウインドウ表示で見たいことがあるためでです。

本当はショートカットを置かずにbluewindを導入したいのですが
bluewind自体の開発が終わっているので…。


■インストールソフトウェアの設定
――――――――――――――――――

■chrome
設定から、google アカウントにログインして設定を復元する。
設定後、同期されるまで若干のタイムラグあります。

インストールアドオン(機能拡張)名(例):
・IE tab
・create link(同期されたあと、Plain txtの形式を、%text%%newline%%url% へ修正。)
・FireShot
・Gestures for Google Chrome
以上抜粋。詳細割愛。

■firefox
firefox Syncにログインして設定を復元する。

インストールアドオン(機能拡張)名(例):
・HTML VALIDATOR
・firebug
以上抜粋。詳細割愛。

■lzhpls
手順にそったインストールのみ。

■秀丸
設定ボリューム大のため、独立項目として後述します。

■DiskState
インストール後の、スタートアップ登録のみ。

■mem info
インストール後の、スタートアップ登録のみ。

■irfan view
手順にそったインストールのみ。

■yuna color
手順にそったインストールのみ。

■win merge
インストール後の設定については、まだまとめられていません。
ブログに分散している各記事を紹介しておきます。

WinMergeをセットアップしよう! そのほか、余談(*´д`*)
http://tech.kimihiko.jp/article/22205464.html
WinMergeで、.bakファイルを出さない方法。
http://tech.kimihiko.jp/article/27062396.html

(オプション)TortoiseSVNにWinMergeを組み込んでみよう!
http://tech.kimihiko.jp/article/22204605.html


■秀丸の設定
======================================
おおまかな流れを、はじめに書いておきます。
上から順番にやるようにしてください。
前後しても問題ない部分もありますが、
たぶんですが、この流れが一番手間がかからない設定の流れです。

・ファイルタイプ別設定の設定ファイルをひとつにする
・ファイルタイプ別の設定をする
・ファイルタイプ別の設定をコピーして複製する
・ファイルタイプ別にサンプルファイルを読み込む
・ファイルタイプ別に強調表示を読み込む
・動作環境の設定
・マクロファイルを設置する
・キー割り当の読み込み
・そのほかの設定

■ファイルタイプ別設定の設定ファイルをひとつにする
――――――――――――――――――
ファイルタイプ別の設定 -> 上部の 設定のリスト... ボタンを押し、
設定のリスト、より、共通以外の項目を削除します。

■ファイルタイプ別の設定をする
――――――――――――――――――
ファイルメニューの その他 -> ファイルタイプ別の設定 です。

※ファイルタイプ別の設定をする際ですが、
もしこのテキストファイルを秀丸で開いていたりするなら
同一ウインドウでファイルタイプ別の設定を開く方がいいかも。
なぜなら、ファイルタイプ別の設定、上のプルダウンの左側の表示が
一時的な設定、となってしまう可能性があるからです。

■文字サイズ
-----------------------------------------
ファイルタイプ別の設定 -> フォント -> MSゴシック 9pt

■文字の折り返し
---------------------------------
ウインドウ横幅に合わせて折り返しするが、
左側の行番号は実際の改行ポイントに合わせるのが最も使いやすいと思います。

ファイルタイプ別の設定 -> 体裁 -> 折り返し -> ウインドウに合わせる。
ファイルタイプ別の設定 -> 体裁 -> 詳細 -> 行番号の計算方法 を エディタ的に。

【補足】ウインドウ横幅に合わせず、固定にする場合
ファイルタイプ別の設定 -> 体裁 -> 折り返し -> 固定2000行くらい?
最大、でもいいかもしれないが未検証。

■行間
---------------------------------
ファイルタイプ別の設定 -> 体裁 -> 詳細 -> 体裁
行間 1/2くらい
文字間 0
自分が見やすいかんじに設定してください。

■インデントの設定
---------------------------------
ファイルタイプ別の設定 -> 体裁 -> タブ

デフォルトはタブインデントですが、
タブの文字数分は、2か4くらいがいいかも。

空白文字(半角スペース)でのインデントにする場合は、
下の タブで空白入力 にチェックを入れます。
新PCで、やる内容にあわせて決めるとよいでしょう。

■インデントを自動的に行う設定
---------------------------------
ファイルタイプ別の設定 -> 体裁 -> インデント
自動インデント にチェック。
その下の全角空白もインデント、にもチェックします。

■強調表示
---------------------------------
ファイルタイプ別の設定 -> デザイン
の、保存/読込ボタンより読み込んで設定しますが、
今はまだ何もしないでください。

■基本の表示設定
---------------------------------
ファイルタイプ別の設定 -> デザイン -> 表示
-> 左側のすべての項目にチェックを入れます。
-> 右手、行番号表示にチェックを入れる。
-> 右手、カーソル行にチェックを入れ、プルダウンは背景色モード。
その下の2つのチェックははずす。

■秀丸で、ローカルファイルやディレクトリへのパス等をクリックすると、
 関連付けされたエディタ等が起動し、そのファイルが開かれるような設定にする。
---------------------------------
ファイルタイプ別の設定 -> デザイン -> 表示
E-mail,URL....のカスタマイズの設定をクリック。

ファイル名と思わしき場所 のところで
正規表現で指定 とし、
文字列、を以下のように変更してください。
([a-z]:|\\\\|){1}[^ \t\*\?\|:,;<>"][^\t\*\?\|:,;<>"]*(?=$)

■単語補完
---------------------------------
ファイルタイプ別の設定 -> その他 -> 単語補完 より
単語補完の自動表示 エリアの 自動表示にチェック。 表示方法をリストに。
これで、書類編集中に、編集中ファイルに過去に同一記述があった場合は、
候補がでるようになります。表示方法はお好みで。
詳細...ボタンからさらに詳細設定ができます。 -> 以下動作環境の 単語補完 を参照。

■秀丸で.BAKファイルが出来ないようにする設定
---------------------------------
ファイルタイプ別の設定 -> その他 -> 保存・読み込み
バックアップファイルの作成 のチェックをはずします。
これがついていると、.BAKファイルが次々出来てしまいます。


■ファイルタイプ別の設定をコピーして複製する
――――――――――――――――――
その他 -> ファイルタイプ別の設定
上部のプルダウンの左の 設定のリスト... をクリックします。

共通 がひとつだけあると思うので
それを選択して、 コピー... で複製。

新しい設定の名前をつけます。
複製した設定は、以下の数と名称で準備してください。

・共通 … デフォルト
・css
・js
・php


■ファイルタイプ別にサンプルファイルを読み込む
――――――――――――――――――

その他 -> ファイルタイプ別の設定
上部のプルダウンより、先ほど複製した
いずれかを選択します。

選択したファイルタイプ別の設定に対応した
拡張子のサンプルファイル
(プルダウンでcssを選択していたら、
拡張子がcssのものを開くイメージ)

を右クリックし、
コンテキストメニューより、
プログラムから開く -> 規定のプログラムで... を選択します。

ファイルを開くプログラムの選択がでますので、
秀丸を選択してください。
推奨されたプログラムのなかに無い場合は、
参照... より選択します。

選択できたら
この種類のファイルを開くときは、… にチェックが入っていることを確認して
OKボタンを沿います。

この設定で、次回からこの拡張のファイルを開くと、
秀丸で開くようになります。


■ファイルタイプ別に強調表示を読み込む
――――――――――――――――――
秀丸で新しいウインドウを開きます。
ファイルタイプ別の設定 上部のプルダウンで
設定したいファイルタイプに切り替えます。

その他 -> ファイルタイプ別の設定 -> デザイン を表示したウインドウの
右下の 保存/読み込み ボタンをクリック、 読み込み を選びます。

強調表示を読み込んだあとは、
その他 -> ファイルタイプ別の設定 -> デザイン -> 場所一覧
の、すべてにチェックいれます。
※ストライプ表示だけは、チェックを入れない。

これを設定ファイルごとに繰り返してください。


■動作環境の設定
――――――――――――――――――
ファイルメニューの その他 -> 動作環境の設定 です。
開いた動作環境ウインドウの左下にある
上級者向け設定 のチェックを入れてから以下設定を行ってください。

■横スクロールバーを出す
-----------------------------------------
動作環境 -> ウインドウ にて
横スクロールバーにチェックを入れる。

ファイルタイプ別の設定の、文字の折り返しにおいて2000行くらいにしているので、
そうしないと横に長い文字列が読めなくなります。

■起動時のウインドウ位置と配置の指定
---------------------------------
動作環境 -> ウインドウ -> 配置
位置を指定する … X 8文字分  Y 25文字分
サイズ指定する … 幅 130文字分  高さ 30文字分

ちなみにこの位置は 1280*1024 環境を想定しています。
ですので環境によって自分なりの位置を決めておくと快適だと思います。

■タイトルバーの表示設定
---------------------------------
動作環境 -> ウインドウ -> 高度なウインドウ -> タイトルバーの表示
ファイル名:常にフルパス
エンコードの種類:常に表示
他はそのままでいいか。

■常駐機能をONにして、クリップボードの履歴をとる。
-----------------------------------------
動作環境 -> 常駐機能 にて
秀丸エディタの常駐 にチェックを入れます。
クリップボードの履歴を撮る にもチェックを入れます。
ショートカットキーは コントシフトオルトCにしています。
※他のショートカットとバッティングする場合はうまく設定できないので
 その場合は再考してください。
自動保存に もチェック。
同じ内容は無視 にもチェックです。

ここまで終わったらOKボタンを押して
動作環境を一度終了してみてください。

そして適当にコピーをいくつかとって、
先ほど設定したショートカットキーより、履歴を呼び出してみます。
クリップボードの履歴ウインドウが出ますので、
右側の 取り出しと同時に貼り付け にもチェックを入れておきます。

■保存するかどうかの確認をしないように設定
---------------------------------
動作環境 -> ファイル -> 保存 -> 保存するかどうかの確認
・保存するファイルが空だったとき
・無題で更新されていて、内容が空のとき
両方のチェックをはずす。

■最近利用したファイルの履歴(ヒストリ)増加設定
---------------------------------
動作環境 -> ファイル -> ヒストリ -> ファイルヒストリ個数 は最大値に設定
ファイル名は フルパス 表示

■秀丸でデフォルト文字エンコードを設定
-----------------------------------------
動作環境 -> 上級者向け設定 -> ファイル -> エンコード1
標準のエンコードの種類、のボタンをクリックして、
必要があれば設定してください。

■自動保存設定
---------------------------------
動作環境 -> ファイル -> 自動保存
ファイルを更新する 更新回数1回 遅延一秒
自動保存しても、「(更新)」は消さない のチェックを外してください。

■排他処理
---------------------------------
動作環境 -> ファイル -> 排他制御
同じファイルを2つ開くことを禁止する にチェックします。

■全置換のやり直し
---------------------------------
動作環境 -> 編集 -> 全置換のやり直し
プルダウンより、まとめて を選択。

■単語補完
---------------------------------
動作環境 -> 編集 -> 単語補完 より
1.ツールチップに表示する最大個数 は必要に応じて増やします。最大9個。
2.各種ダイアログでの単語補完... をクリックします。
表示されたダイアログで、 検索ダイアログ、ツールバーの検索ボックス の
表示方法を、プルダウンより、リスト、を選択します。

■置換の高速化
---------------------------------
動作環境 -> 検索 -> 置換の動作
全置換は常に高速で行う にチェックします。

■grepして置換前の確認をしない設定
---------------------------------
動作環境 -> 検索 -> grep -> grepの動作
「grepして置換」を実行する前に確認 のチェックをはずす。
隠しファイルに、チェックします。
指定した拡張子を除外は、必要に応じて設定します。

■表示ブラウザとメーラの指定
---------------------------------
動作環境 -> 表示/操作 -> リンク ブラウザを指定... より、
必要があれば設定します。
繰り返しますが、必要があるときのみ設定してください。
理由はあるのですが、ここでは割愛します。

■カーソルでスクロールする開始位置の調整(オプション)
---------------------------------
※この設定はオプションです。本当に効率化につながるかは未検証。

動作環境 -> 表示/操作 -> カーソル操作 -> カーソルでスクロールする開始位置
・カーソルでスクロールする行数 1行ずつ
・カーソルでスクロール開始位置 行指定:5行に
※開始位置は、デフォルトウインドウサイズとの兼ね合いが出てきます。
※デフォルトウインドウサイズの上下空間より、
 この開始位置の上下のほうが大きくなった場合など
 使いづらくなる?

■マクロファイルのフォルダ指定
---------------------------------
動作環境 -> 環境 -> パス -> マクロファイル用のフォルダ
旧環境からの移行の場合は、マクロファイル自体も
移行してくるようにしてください。

■設定ファイル用フォルダ
---------------------------------
動作環境 -> 環境 -> パス -> 設定ファイル用フォルダ
設定するファイルパスは、マクロファイルのフォルダ指定をした
ひとつ上の階層にしてください。

■編集可能な最大行数の設定
---------------------------------
動作環境 -> 環境 -> 編集関係
最大行数を最大の1000万行にしておくと、
どんな長いtextでもほぼ開けるようになるでしょう。

■メモリに余裕があればメモリの割り当てを増やす
---------------------------------
動作環境 -> パフォーマンス にて スライダを上へ。


■マクロファイルを設置する
――――――――――――――――――
ファイルタイプ別の設定の項目で設定した、
マクロファイルのフォルダ指定に設定した直下に
予め準備しといたマクロファイルフォルダ群を置いてください。

マクロの動作確認は、後述する
キー割り当ての読み込み設定後でいいと思います。

■【資料】マクロ登録について
----------------------
マクロ -> マクロ登録...

■登録ルール
・1ページ目(1-10)には良く使うもの、メニューから起動するマクロを登録する。
・2ページ目(11-20)以降は主にキーショートカット起動するものを登録する。

■登録例(案)
・()内は割り当てショートカット(参考)
・マクロはどの位置に登録しても設定したキーボードショートカットにて呼び出せます。
・【注意】グループ名はなんでもいいですが、何か設定しないとファイルメニューから辿りつけないので注意する。

※以下一部記述中…。

【1-10】グループ名:自作マクロ
マクロ1:※未登録 ※ちなみにコントロールYはシステムで やり直しのやり直し が登録されている。
マクロ2:_date.mac … 日付を挿入する(20150831)(コントロールシフトY)
マクロ3:_date2.mac … 日付を挿入する(2015/08/31)(コントロールシフトオルトY)
マクロ4:_getFileName.mac … 現在ファイルのファイル名をクリップボードへ送る(コントロール2)
マクロ5:_getFileName.mac … 現在ファイルのファイル名をクリップボードへ送る(コントロール3)
マクロ6:_incert_kaigyo_single.mac … ()
マクロ7:_incert_kaigyo_middle.mac … ()
マクロ8:_incert_kaigyo_wide.mac … ()
マクロ9:_incert_sankaku.mac … ()
マクロ10:_incert_star.mac … ()

【11-20】グループ名:他作マクロ
マクロ11:hxTagCheck.mac … バリデート()
マクロ12:FontZmIn.mac ※別途FontZmWrIni.macも配置必要 … フォント大きく()
マクロ13:FontZmOut.mac ※別途FontZmWrIni.macも配置必要 … フォント小さく()
マクロ14:hme_NextWindow.mac … 次のウインドウへ()
マクロ15:hme_PrevWindow.mac … 前のウインドウへ()
マクロ16:HistoryDialog.mac … ヒストリダイアログを開く()
マクロ17:MoreHist.mac … ヒストリダイアログ(多)を開く()
マクロ18:CloseTag.mac … 閉じタグ挿入()
マクロ19:DeleteTag.mac … カーソル上のタグを開始と終了タグセットで削除()
マクロ20:TagIdou.mac … 対応するタグへ移動する()

【21-30】グループ名:他作マクロ2
マクロ21:_.mac … ()
マクロ22:_.mac … ()
マクロ23:_.mac … ()
マクロ24:_.mac … ()
マクロ25:_.mac … ()
マクロ26:_.mac … ()
マクロ27:_.mac … ()
マクロ28:_.mac … ()
マクロ29:_.mac … ()
マクロ30:_.mac … ()

■キー割り当の読み込み
――――――――――――――――――
ファイルメニューの その他 -> キー割り当て...を選びます。
キー割り当てウインドウが開きますので、
ウインドウ右側、下から2番目の、読込み...ボタンをクリックします。
キー割り当て読込みウインドウが開きますので、参照...ボタンをクリックします。
読み込みたい設定ファイルを選択し、開くをクリックします。
次に、キー割り当て保存ウインドウ のOKボタンを押せば読み込みは完了です。

動作確認もしてください。
ついでにマクロの動作確認にもなると思います。


■そのほかの設定
――――――――――――――――――
■検索時の検索文字列ハイライトさせる設定
---------------------------------
コントロールFを押し、検索ダイアログを出してください。

右下の 検索文字列を強調 にチェックを入れます。
これをいれないと、検索文字列がどこなのか、ぱっとみ、分からないので…

検索文字列ハイライトの設定ハイライトの色の設定は、
後述する、強調表示の設定で説明します。

■表示メニューのカスタマイズ
---------------------------------
ファイルメニュー -> 表示

全くのお好みでよいですが、個人的には以下にチェックを入れます。

・ツールバー
・ステータスバー
・見出し
・行番号
・ルーラー

■ステータスバー設定
---------------------------------
ファイルメニュー -> 表示 -> ステータスバーにチェックが入っていれば、
秀丸ウインドウ下に少し太めのウインドウ枠のような情報が表示される
エリアが表示されていると思います。これがステータスバーです。

ここで右クリックをして、表示させる情報をカスタマイズしておくと便利です。
何でも表示させればいいというもんでもないかもしれませんが
以下にチェックを入れておくと便利かも。
とくに選択範囲の文字数は便利では??

・エンコードの種類
・改行コードの種類
・BOMの有無
・選択範囲の文字数

*****************ココマデ、セッテイ*******************

設定はこれですべて終了です。
すべての設定がおわったら、
以下カスタマイズ済みの
秀丸用のキーボードショートカット一覧表を印刷しておくといいかも。

*****************ココカラ、ショートカット*******************

■カスタム秀丸キーボードショートカット一覧表
======================================
■ファイル系
・名前をつけて保存  コント+シフト+S
・更新ファイルのみすべて保存  コント+シフト+オルト+S
・ファイルを閉じる コントロール+W
・終了  コントロールシフトW
 ※終了とは、ウインドウ1枚を閉じること。(未保存確認ある)
・全終了  コントロールシフトオルトW または コントロールQ
 ※全終了とは、すべてのウインドウを閉じること。(未保存確認ある)

■カーソル移動系
・指定行へ移動   コントロールL
・ファイルの先頭  コントロール上
・ファイルの最後  コントロール下
・次ページ  コントロールシフト下
・前ページ  コントロールシフト上
・単語左  コントロールシフト左
・単語右  コントロールシフト右
・論理行頭へ移動 コントロールシフトオルト左
・論理行末へ移動 コントロールシフトオルト右

■その他編集
・ハンカクに変換  (文字を選択して…)コントロールH
・全角ひらがなに変換  (文字を選択して…)コントロールシフトH
・大文字 <-> 小文字の変換  コントシフトオルトH

■検索系
・検索文字列の強調の切り替え  オルトF
・次の検索  コントロールレフト(←)
・前の検索  コントロールライト(→)
・検索 コントF ※これはデフォルト
・置換 コントR ※これはデフォルト
・grep検索 コントG
・grep置換 コントT

■ウインドウ系
・ウインドウ分割  コントロール+B

■その他
・タグジャンプ  F10(デフォルト)
・バックタグジャンプ  F9

■外部マクロを使った機能※
【よく使っている】
・現在の日付を挿入する  コントロールシフトY
・対応するタグへ移動したり戻ったり  コントシフトオルトE
・htmlバリデート  シフトコントB
・タグにふさわしいコメントアウトをしたり解除したり (文字列を選択して)コントシフトC
・対応するタグを削除  (任意のタグにカーソルをあわせて)コントシフトD
・閉じタグを自動挿入  CloseTag.mac  コントシフトオルトX
・現在開いているファイルのフルパスをクリップボードへコピー  コントロール2
・現在開いているファイル名をクリップボードへコピー  コントロール3
・ファイルヒストリ  コントロールO(オー)
・ファイルヒストリ2  コントシフトO(オー)
・文字縮小マクロ  FontZmOut.mac  コント-
・文字拡大マクロ  FontZmIn.mac  コント+

【便利だが、余り使ってないかも】
・htmlカラー情報をカラーピッカーを出して入力  オルトI(アイ)
・zenコーディング  コントロールE
・zenラップ  コントロールシフトE
・現在のページ内に使われている文字列を候補として入力  コントシフトX
・ウィンドウ切替(次  オルト→
・ウィンドウ切替(戻  オルト←
・半閣下  z2h_henkan.mac  コントロールK

*****************ココマデ、ショートカット*******************

※外部マクロを使った機能について
どんなマクロを使っていて、具体的にはどんな動きをするかについては
別にまとめていますのでそちらを参照してください。

私なりの秀丸ショートカットキー(キー割り当て)設定
http://tech.kimihiko.jp/article/21497495.html

これでも最低限ですが、以上です。

内容に間違いがあったり、変更したほうがよい内容があれば
随時アップデートします。

テスト環境:Windows 7

inputボタンを、inputボタンのまま画像にする方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/59498195.html

inputボタンを、inputボタンのまま画像にする方法

<input type="button" value="私はボタンである">

<input type="image" src="i_am_button.gif">

タイトルがちょっと意味不明ですが、以上です。

ページ内のリンクをすべて別ウインドウで開く方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/54659625.html

ページ内のリンクをすべて別ウインドウで開く方法

htmlファイルのhead内に以下のようなタグを挿入します。
<base href="http://xxx.com" target="_blank">

これでもいいです。
<base target="_blank">

●参考にしたサイト
http://html.eweb-design.com/0302_met.html

IEで、文字の上下が切れるときの対処法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/54324167.html

IEで、文字の上下が切れるときの対処法

line-heightを指定するとよいようです。
わりとよくある現象ですよね。
IE7やIE8などで確認したことがあります。

開発覚書: IEで文字の上下が消える(切れる)
http://jasondev.blogspot.com/2009/10/ie.html
ksk.の備忘録: IE7でサイズの大きな文字が切れる
http://kskgnote.blogspot.com/2009/09/ie7.html

W3Cが出してきた公式「HTML5ロゴ」が良い感じだぞ!      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/42922788.html

W3Cが出してきた公式「HTML5ロゴ」が良い感じだぞ!
http://www.ideaxidea.com/archives/2011/01/html5_logo.html
逆に悪い、という人も居て。デザインってほんと人によるものですね。

webカラーを検知する正規表現      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/37888216.html

webカラーを検知する正規表現
#([a-z,A-Z,0-9]+)

body bgcolor="#FFFFFF"
div style="background-color:#ff7200;"

こういうのの、色指定部分を全部検知します。

便利なのでぜひ一度使ってみてください。
行末の場合は、\$ をつけたりしましょう。

Enterキーが入力されたらSubmitする方法      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/37557343.html

Enterキーが入力されたらSubmitする方法

[JavaScript] EnterキーでSubmit: 適当に書き連ねる日記のようなもの
http://vertex.air-nifty.com/blog/2007/08/javascript_ente_a090.html
まずは、Enterキーが押されたらSubmitするスクリプト。

<Script Type="text/javascript">
<!--
function enter(){
if( window.event.keyCode == 13 ){
document.form1.submit();
}
}
//-->
</Script>


これを<Head>〜</Head>の間に書いておき、テキストボックスのタグで呼べばOK。

<Form Name="form1">

これで、Submit用にボタンを用意しなくても、Enterキーで送信できる。ボタンを配置しないで、Enterキーで何かアクションを起こしたいときに使えると思う。
とても参考になりました(´・ω・`)

formのhidden属性を増やしてスパムを騙す      

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/37417578.html

formのhidden属性を増やしてスパムを騙す
http://zapanet.info/blog/item/922
私も悩まされつつあるので、こちらの方法試させてもらいました!

さて、どうなるかしら。。
2 3 4 5 6 7 
 
2018年04月
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
月別記事
お問い合わせ
Powered by さくらのブログ