【HTML & CSS】 サイト全体のフォントを指定する 2014年度 

サイト全体で使用するフォントをスタイルシートに設定します。
cssにfont-familyで指定するんですが、「css font-family」で検索すると
色々な人が「こんな指定がいいぞ~」と説明してくださっています。
プロ(Webデザイナー)はフォント一つにもそれぞれコダワリがあるんだなぁと思いました。

デザインを重視しないWebアプリの場合、社内用であったり、関連会社との企業間システムであったりするので
ブラウザも限定されてきます。
そんな古いIEまで対応しなくても良いし、正直な所フォントは読みやすければだいたいでいいです。

こちらのサイトが説明がシンプルでわかりやすかったです。
6666666(セブンシックス) CSSのfont-family指定に関する考察 2014年版

こちらの説明も細かく参考になりました。
DTP Transit CSSでのフォント指定について考える(2014年)

スタイルシートでサイト全体のフォントを指定する

※以下のフォントは、あくまでも「フォントはだいたいでいいよ~」って人の為のフォントです。

font-familyの基本形

body {
    font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

font-familyには優先順位の高いフォントから記載していきます。
日本語フォントやスペースが含まれるものは"(ダブルクォテーション)か’(シングルクォテーション)で囲みます。
「Mac用欧文フォント,win用欧文フォント,Mac用和文フォント,Win用和文フォント,適用できるフォントがなかった場合に表示するゴシック系フォントsans-serif」の順で設定するようです。
これはMacにofficeをインストールしているとWin用フォントが入っている可能性が高いので、先にMac用フォントを記載することで適用フォントを優先させるそうです。

上記の例では欧文フォントと和文フォントを分ける必要がないので、Mac用フォントとwin用フォントとsans-serifを指定しています。
mac用フォントもいらないかもと思ったのですが、iosやipadのフォントも「Hiragino Kaku Gothic ProN」で表示させるようなので残しておきます。


font-familyに游ゴシック体が追加する

OS X Mavericks (10.9)とWindows 8.1に游ゴシック体が追加されました。
将来的にこちらのフォントの追加がデフォルトになってくるかと思うので、游ゴシック体を追加したバージョンです。
body {
    font-family: "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}


font-familyでandroid端末にも対応する

android端末はsans-serifにお任せでもいいと思うのですが、対応するならこちら。
body {
    font-family: Roboto, "Droid Sans", "游ゴシック体", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
android4以降用にRobotoを指定、android4以前用にDroid Sansを指定します。

【HTML & CSS】 CSSの文字コード指定

スタイルシートはたま~に変更することはあっても、一から作る事ってまずありません(;^ω^)
普段はあまり気にしていなかったのですが、そういえばファイルの先頭に文字コードの指定がありました。

スタイルシートの文字コードを指定する

utf-8で文字コードを宣言します。
@charset "utf-8";
ファイルの先頭で宣言すること。
HTMLの文字コードと一致させること。
エディタを保存する際にutf-8で保存すること。(※普段の設定がsjisなのでよく変更し忘れる)


スタイルシート内はすべて半角英数で書くので文字コードを指定しなくても大丈夫じゃないの?と思ったのですが
スタイルシートで日本語の書体を指定する時に文字化けして、スタイルシートが適用されないということが発生するようです。

じゃ、日本語フォントを書いていなければ文字コードを指定しなくても大丈夫じゃないの?と思ったのですが
どうも日本語で書いたコメントが文字化けして、スタイルシートが適用されないということが発生するようです。

HTMLで指定した文字コードとスタイルシートで指定した文字コードが異なっていても
文字化けが発生して、スタイルシートが適用されないということが発生するようです。


ちなみにASP.NETが生成するHTMLはデフォルトでutf-8です。
なのでASP.NETで使用するスタイルシートもutf-8で作成しないと、スタイルシートが適用されないということが発生します。

【HTML & CSS】 HTML5の最小構成

デザイン系は苦手です(◎o◎)

何で苦手かといいますと、感性なんて人それぞれであって
何が美しいと感じるか、何が使いやすいと感じるかなんて、結局は人それぞれで「答え」がないところが苦手です。

例えば
「上の人」からデザイン考えてと言われて、自分なりに美しく使いやすい画面を作ったとしてます。
感性の違う「上の人」がナンカチガウンダヨネ~とか言われちゃったら、もう何も言えないじゃないですか。
そして何度も何度も作り直して、やっぱり「最初のにしよう♪」とか言われちゃったら殺意感じませんか?

でも「デザイン苦手なのでやりません!」とも言ってられません。
個人向けシステムだったらデザイナーさんが入ってくれるんですが、
企業向けシステムだったら、ほぼデザイナーさん入りません。
見た目はあまり重視されないんですね。
だからホントに酷いものがあります。(※もちろん例外もあります)
プログラムだけでイッパイイッパイの疲れ切ったプログラマたちが作る、
美的センスの欠片も感じさせない、divもtableレイアウトもなくスペースだけを武器にレイアウト調整されたページ Σ(@д@;ノ)ノ ヒィィィ~...
同情すら感じます。
でもそんな時は「見ない。聞かない。言わない。」
もし見ちゃうと自分の心が砕けます。
もし聞いたり言ったりしちゃうと、自分の作業が増えます。しかもタダで。

あぁそういえば遠い過去に、黒と黄色と紫で画面を構成したプログラマがいました。
衝撃でした。

お客様も今まで使用していたwindowsアプリをWebアプリにするだけなので
デザインはタダ、料金もほぼwindowsアプリと同じだと思っている節があります。
営業もwebアプリだからといって金額を割り増しできないようです。
Webシステムは赤字になりがちだなぁと思います

まぁそんなわけでプログラマでもHTML&CSSで「ある程度」のデザインは組めないといけませんね。

HTML5での最少構成

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
</body>
</html>
metaタグとlinkタグは終了タグを書きません。
詳しくはコチラ
【HTML & CSS】 HTML5で終了タグを書かないタグ

【HTML & CSS】 HTML5で終了タグを書かないタグ

HTML5で終了タグを書かないタグ
br, img, hr, meta, input, embed, area, base, col, keygen, link, param, source

XHTMLとの互換を保つため、終了タグを記述することもできます。

HTML5
 <meta charset="utf-8" >

XHTML
 <meta charset="utf-8" />

個人的には終了タグを書きたくてウズウズします。
「自分で開いたものは、必ず閉じる!」これプログラマの常識です。

【Apache】 ローカル環境で仮想ホストを作成する。

PHPファイルを作成しローカル環境で実行する場合
Apacheをインストールしたフォルダ配下のhtdocsフォルダにファイルを作成し、http://localhost/XXXX.phpとブラウザで確認します。

例えば「%APACHE_HOME%\htdocs\test.php」というPHPファイルは「http://localhost/test.php」でブラウザで確認します。

複数のWebサイトを管理する場合、htdocsフォルダ配下にサイトごとにフォルダを作成すればよいのかと思ったのですが
これだとルートディレクトリは「%APACHE_HOME%\htdocs」なので外部ファイルを読み込む際のパスなど、なにかと問題が発生します。

例えば「website_a」と「website_b」という二つのサイトがあり、それぞれに「test.php」がある場合
以下のようなPHPファイルは
「%APACHE_HOME%\htdocs\website_a\test.php」
「%APACHE_HOME%\htdocs\website_b\test.php」
ブラウザでは以下のように確認することになります。
「http://localhost/website_a/test.php」
「http://localhost/website_b/test.php」

外部ファイルを絶対パスなどで読み込む際にwebsite_aもwebsite_bもルートディレクトリが「%APACHE_HOME%\htdocs」になるので
「website_a」配下のファイルにアクセスするのに困ってしまいます。

「website_a」のルートディレクトリは「%APACHE_HOME%\htdocs\website_a」
「website_b」のルートディレクトリは「%APACHE_HOME%\htdocs\website_b」
と設定したいと思います。

Apacheにバーチャルホスト(仮想ホスト)を設定する

仮想ホストとは、Webブラウザーで指定されるURLとサーバー上の実際のフォルダとを結びつける役割をします。
つまり好きな場所に配置したフォルダ内のファイルを、こんなURLでアクセスするからちゃんと表示してねと設定してあげるんですね。

今回は「D:\website_a」フォルダを作成し、「http://local.website_a」でアクセスできるように設定してみます。

%APACHE_HOME%\conf\httpd.confの編集


1.アクセス権限の変更
以下のような記載箇所を検索し
赤字の「Deny from all」を「Allow from all」に変更します。
<Directory />
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Deny from all
</Directory>
これですべてのフォルダに対してアクセス権限を与えることができます。
もし個別のフォルダに対してアクセス権限を与えるのであれば、以下のようにパスを指定します。
<Directory "D:\website_a"/>
    Options FollowSymLinks
    AllowOverride None
    Order deny,allow
    Allow from all
</Directory>

2.仮想ホストの設定ファイルを読み込めるようにする
以下のような記載箇所を検索し
赤字の「#」を削除します。
# Virtual hosts
#Include conf/extra/httpd-vhosts.conf
これで仮想ホストの設定ファイル「conf/extra/httpd-vhosts.conf」を読み込むようになります。

%APACHE_HOME%\conf\extra\httpd-vhosts.confの編集


コメントは省いて、以下のような記載があると思います。
NameVirtualHost *:80

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.localhost
    DocumentRoot "C:/Program Files2/Apache2.2/docs/dummy-host.localhost"
    ServerName dummy-host.localhost
    ServerAlias www.dummy-host.localhost
    ErrorLog "logs/dummy-host.localhost-error.log"
    CustomLog "logs/dummy-host.localhost-access.log" common
</VirtualHost>

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.localhost
    DocumentRoot "C:/Program Files2/Apache2.2/docs/dummy-host2.localhost"
    ServerName dummy-host2.localhost
    ErrorLog "logs/dummy-host2.localhost-error.log"
    CustomLog "logs/dummy-host2.localhost-access.log" common
</VirtualHost>
以下のように変更します。
NameVirtualHost *:80

#=======================
#localhost
#=======================
<VirtualHost *:80>
    ServerName localhost
    DocumentRoot "C:/Program Files/Apache2.2/htdocs"
    ErrorLog "logs/localhost-error.log"
    CustomLog "logs/localhost-access.log" common
</VirtualHost>

#=======================
#website_a
#=======================
<VirtualHost *:80>
    ServerAdmin webmaster@dumy.co.jp
    DocumentRoot "D:/website_a"
    ServerName local.website_a
    ErrorLog "logs/local.website_a-error.log"
    CustomLog "logs/local.website_a-access.log" common
</VirtualHost>
ServerAdmin・・・管理者のメールアドレス
DocumentRoot・・・サイトのファイルのあるフォルダ
ServerName・・・サイトにアクセスするための名前
ErrorLog・・・エラーログ
CustomLog・・・アクセスログ common・・・httpd.confファイル内で定義されているcommonフォーマットを利用する

一つ目の仮想ホストの設定は
今まで通り「%APACHE_HOME%\htdocs」フォルダ配下のファイルを「http://loalhost」でアクセスできるようにするためのものです。
二つ目の仮想ホストの設定は
「D:/website_a」フォルダ配下のファイルを「http://local.website_a」でアクセスできるようにするためのものです。

設定を有効にするためにApacheを再起動します。

C:\WINDOWS\system32\drivers\etc\hostsの編集


ServerNameで設定した名前「local.website_a」とIPアドレスを紐付するために、hostsファイルを編集します。
hostsファイルはwindows7の場合「C:\WINDOWS\system32\drivers\etc」にあります。
「127.0.0.1 localhost」の次行に「127.0.0.1 local.website_a」を追記します。
127.0.0.1 localhost
127.0.0.1 local.website_a
「127.0.0.1」はローカル・ループバック・アドレスと呼ばれ、自分自身を指す特別なIPアドレスです。
ホスト名「localhost」や「local.website_a」でアクセスされたとき、自分自身にアクセスするように設定しています。
設定を有効にするためにブラウザを一度閉じて開き直します。


以上で設定は終了です。
「D:\website_a」にhtmlファイルを配置し、「http://local.website_a/XXX.html」にアクセスして表示されるか確認してください。

辺境地に住む主婦で在宅プログラマの悩み

久しぶりの投稿です。
最後に投稿したのが2014年1月だから半年ぶりですねぇ。

年末あたりから消費税対応に始まり、忙しかったです。本当に忙しかったです。゚(゚´Д`゚)゚。
最近になってやっと落ち着いたというか、仕事が途切れました。
休みなしでずっと働いてきたので、少しゆっくりさせてもらうのもいいかもしれません。

暇になるとこれからの仕事の事を考えてしまいます。

在宅でプログラムの仕事をするようになって9年。
関西で在宅のお仕事を見つけるのはけっこう難しいです。
androidも勉強してましたが、関西でandroidの在宅の仕事ってあるんでしょうか!?
私には縁がないのかもしれません。

在宅でお仕事を貰えるお客さまに巡りあっても
.netでwindowsアプリを作るか、asp.netのお仕事が多いです。
仕事の幅が広がらない・・・

このブログはandroidで来られる方が多いですが
在宅で需要のあるPHPに転向しようかと悩んでいます。

辺境地に住む主婦がプログラマを続ける事自体が難しいんでしょうかね・・・(´・ω・`)







ASP.NET EnterキーでSubmitさせないようにする。

前回ASP.NET TextBoxでEnterキーやBackSpaceキーを入力できないようにする。 を書きましたが…
submitを発生させるコントロールってtextboxだけじゃないんですね~
checkboxやらradioでもsubmitが発生して、form内の一番最初に配置しているbuttonのclick処理が走ってしまいます。
全部のコントロールにonKeyPressなんて書いてられないので、ほかの方法で実装します。

以下その方法です。

formにダミーボタンを配置しOnClientClickでsubmitさせないようにし、style="display:none"で非表示にします。
つぎにformタグのdefaultbuttonに作成したダミーボタンを指定します。
これですべてのコントロールでenterキーを押されてもsubmitを無効にすることができます。

マスターページを使用していれば、マスターページに実装するだけで済みます。
<form id="form1" runat="server" defaultbutton="DummySubmitButton">
    <asp:Button ID="DummySubmitButton" runat="server" Text="Button" OnClientClick="return false;" style="display:none"  />
    ・・・以下略
</form>