チーフコーダーのCoding Memo | Webcoding.jp http://www.webcoding.jp/coding_memo Just another WordPress site Tue, 01 May 2012 12:21:39 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 ウェブコーディング.jpのスマートフォン版をリリースしました http://www.webcoding.jp/coding_memo/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0-jp%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e7%89%88%e3%82%92%e3%83%aa%e3%83%aa.html http://www.webcoding.jp/coding_memo/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0-jp%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e7%89%88%e3%82%92%e3%83%aa%e3%83%aa.html#comments Tue, 01 May 2012 12:21:39 +0000 WebCoding.jp http://www.webcoding.jp/coding_memo/?p=174 どうも、チーフです。

ウェブコーディング.jpもやっとスマートフォン対応しました！


トップページが！
トップページが！


下階層も！
下階層も！


ブログページも！
ブログページも！

お手持ちのスマートフォンから、ウェブコーディング.jpにぜひアクセスしてみてくださいね。

]]> http://www.webcoding.jp/coding_memo/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0-jp%e3%81%ae%e3%82%b9%e3%83%9e%e3%83%bc%e3%83%88%e3%83%95%e3%82%a9%e3%83%b3%e7%89%88%e3%82%92%e3%83%aa%e3%83%aa.html/feed 0 【WordPressプラグイン】SyntaxHighlighter Evolvedを導入してみた（&うまく動作しない時の対処法） http://www.webcoding.jp/coding_memo/wordpress/%e3%80%90wordpress%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%91syntaxhighlighter-evolved%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%ef%bc%88%e3%81%86%e3%81%be%e3%81%8f.html http://www.webcoding.jp/coding_memo/wordpress/%e3%80%90wordpress%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%91syntaxhighlighter-evolved%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%ef%bc%88%e3%81%86%e3%81%be%e3%81%8f.html#comments Thu, 08 Mar 2012 10:39:36 +0000 WebCoding.jp http://www.webcoding.jp/coding_memo/?p=98 続きを読む →]]> ブログ記事内のソースコードを見やすく！SyntaxHighlighter Evolved

ソースコードをブログで紹介するのに、直書きだと見づらいので
SyntaxHighlighter Evolvedを当ブログでもやっと導入してみました。

導入手順
1.SyntaxHighlighter Evolvedをダウンロード
2.ダウンロードしたzipを解凍し、
　プラグインフォルダにそのままアップロード
3.プラグインを有効化する
4.投稿画面で、ソースコードを表示したい箇所に
　[○○○]ソースコード[/○○○]と記入。
（◯◯◯は言語名。html,php,cssなど）

表示例：
<p>ね、簡単でしょ？<br>
こんな感じでソースコードが非常に見やすく表示できます。</p>
以上で完了です。
◯◯◯内に記述できる言語は以下のとおり。

言語 []内への記述
ActionScript3 as3, actionscript3
Bash/shell bash, shell
C# c-sharp, csharp
C++ cpp, c
CSS css
Delphi delphi, pas, pascal
Diff diff, patch
Groovy groovy
JavaScript js, jscript, javascript
Java java
JavaFX jfx, javafx
Perl perl, pl
PHP php
Plain Text plain, text
PowerShell ps, powershell
Python py, python
Ruby rails, ror, ruby
Scala scala
SQL sql
Visual Basic vb, vbnet
XML xml, xhtml, xslt, html, xhtml


余談：プラグインがうまく動作しない時は


あれ？


こうじゃないの？

なぜかうまくプラグインが効かないというトラブル発生。調べたところ、対処法を発見。

header.php内のhead内に以下を記述
<?php wp_head(); ?>

footer.php内に以下を記述（</body>のすぐ上がオススメ）
<?php wp_footer(); ?>

フロントページに影響するプラグインの場合、これらを記述しないと動作しないプラグインがあるようです。
オリジナルでWordpressテンプレートを作成する人は要注意ですね！

]]> http://www.webcoding.jp/coding_memo/wordpress/%e3%80%90wordpress%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%80%91syntaxhighlighter-evolved%e3%82%92%e5%b0%8e%e5%85%a5%e3%81%97%e3%81%a6%e3%81%bf%e3%81%9f%ef%bc%88%e3%81%86%e3%81%be%e3%81%8f.html/feed 0 料金改定のお知らせ http://www.webcoding.jp/coding_memo/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/%e6%96%99%e9%87%91%e6%94%b9%e5%ae%9a%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b.html http://www.webcoding.jp/coding_memo/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/%e6%96%99%e9%87%91%e6%94%b9%e5%ae%9a%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b.html#comments Mon, 05 Mar 2012 07:30:37 +0000 WebCoding.jp http://www.webcoding.jp/coding_memo/?p=81 続きを読む →]]> 平素はWebcoding.jpに格別のご愛顧を賜り誠にありがとうございます。

Webcoding.jpはこれまで適正価格として相場よりかなり抑えた価格でサービスを提供してまいりました。

「時代に見合う高品質」なサービスを提供するために、このたび2012年3月5日付けで料金の改訂を実施しました。

価格について詳細はこちらを御覧ください。

他より少しだけ高めの料金設定をしています。
しかし、Webocoding.jpなら料金に見合う「信頼」と「実績」で、お客様を満足させられます。

Webcoding.jpなら…
【安心の「コーディング技術」ツボ押さえてます】
Web標準に準拠したXHTML+CSSコーディングに完全対応しております。正しいマークアップは、ブラウザによる表示差異や、アクセシビリティの改善だけでなく、検索エンジン対策にも繋がります。

【確実なスケジュール管理は事故を防ぎます】
やりとりが時系列で追えるBacklog（バックログ）を使うことで、スマートなやりとりを実現。「言った」「言わない」が無く、見逃しもありません。

【HTML5・スマートフォンも対応】
スマートフォン対応やHTML5への移行などすさまじい速さで進化を続けるWEB制作業界ですが、迅速・柔軟に対応できます。

サービス概要について詳しくはこちらを御覧ください。

Webcoding.jpは今後も技術の発達やお客様満足度を高められますよう精一杯努めてまいりますので、引き続き変わらぬご愛顧を賜りますようお願い申し上げます。

]]> http://www.webcoding.jp/coding_memo/%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/%e6%96%99%e9%87%91%e6%94%b9%e5%ae%9a%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b.html/feed 0 ID名とクラス名でお困りのアナタへ http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/id%e5%90%8d%e3%81%a8%e3%82%af%e3%83%a9%e3%82%b9%e5%90%8d%e3%81%a7%e3%81%8a%e5%9b%b0%e3%82%8a%e3%81%ae%e3%82%a2%e3%83%8a%e3%82%bf%e3%81%b8.html http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/id%e5%90%8d%e3%81%a8%e3%82%af%e3%83%a9%e3%82%b9%e5%90%8d%e3%81%a7%e3%81%8a%e5%9b%b0%e3%82%8a%e3%81%ae%e3%82%a2%e3%83%8a%e3%82%bf%e3%81%b8.html#comments Fri, 07 Oct 2011 03:59:10 +0000 WebCoding.jp http://www.webcoding.jp/coding_memo/?p=78 続きを読む →]]> どーも、チーフデス。

長年コーディングに携わりながらも、微妙に自分の中のルールも曖昧だったりする「ID名とクラス名」でお困りのアナタ！？

今日は、一般的によく使われている”チーフ的ID名＆クラス名”を2回に渡ってご覧いただきます！！

まず第1回目は、レイアウトに関するブロック・ボックスに対してよく使われる名前から！！

 

 

全体やその直下を囲む

・「container」「wrapper」「wrap」

 

ベースとなる各ブロック

・ヘッダ「header」「head」

・コンテンツ「content」「contents」

・フッタ「footer」「foot」

・ナビゲーション「navigation」「nav」

・グローバルナビゲーション「globalNavigation」「globalNav」「gNav」

・サブナビゲーション「subNavigation」「subNav」

・ローカルナビゲーション「localNavigation」「localNav」

・ヘッダナビゲーション「headerNavigation」「headNav」

・フッタナビゲーション「footerNavigation」「footNav」

※それぞれのボックスの内側で大きくブロック分けしたい時なんかは「main」「sub」「extra」「upper」「inner」「lower」等を付加して「contentUpper」「contentLower」的にするのもヨイね！

 

 

次に文書内容を記述する為に囲む

・「section」「field」や、記事の記述「article」、その記事をまとめた「archive」など

 

 

もう少し具体的なとこだと

・エントリー「entry」

・コメント「comment」

・案内文「lead」

・概要「outline」

・要約「summary」

・説明「description」

・注目や話題の情報なんかだと「topics」「pickup」「spotlight」

・その他にプロフィール「profile」や検索ボックスの「searchBox」

 

 

メニューなんかは

・メニュー「menu」

・パンくずリスト（トピックパス）「topicPath」

・タブメニュー「tab」「tabMenu」

・ページ遷移メニュー「pager」「paging」

・サイト情報や案内関連「siteInfo」「guide」

・補助的なとこだと「option」「assist」

 

 

ざっとこんな感じデス！

 

次回はそれぞれの要素に対する名前の付け方を

「チェェェーック！」

 

]]> http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/id%e5%90%8d%e3%81%a8%e3%82%af%e3%83%a9%e3%82%b9%e5%90%8d%e3%81%a7%e3%81%8a%e5%9b%b0%e3%82%8a%e3%81%ae%e3%82%a2%e3%83%8a%e3%82%bf%e3%81%b8.html/feed 0 CSS3×PIE.htc の記述ルール http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/css3%c3%97pie-htc-%e3%81%ae%e8%a8%98%e8%bf%b0%e3%83%ab%e3%83%bc%e3%83%ab-2.html http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/css3%c3%97pie-htc-%e3%81%ae%e8%a8%98%e8%bf%b0%e3%83%ab%e3%83%bc%e3%83%ab-2.html#comments Tue, 06 Sep 2011 04:52:20 +0000 WebCoding.jp http://www.webcoding.jp/coding_memo/?p=69 続きを読む →]]> 前回の記事 で触れたjavascript (.htcファイル)「PIE.htc」。
今回はそのCSS3 PIE の記述ルールの備忘録。

まずは現時点で無難にクロスブラウザで使えるスタイルのおさらい。

・border-radius（ボックスに角丸をつける）
・box-shadow（ボックスに陰影をつける）
・border-image（境界線に画像を使う）
・multiple background images（背景に最大４つの画像を使用できる）
・linear-gradient as background image
（背景にグラデーションをつける）

基本の記述。

セレクタ {
CSS3プロパティ : 値 ;
CSS3プロパティ : 値 ;
CSS3プロパティ : 値 ;
: ;
: ;
position: relative;
behavior: url(“/PIE.htc”);
}

※ font や background などの色指定は、16進法で指定。(black や red などではなく「#●●●●●●」。)
※ position: relative; はおまじない的に常に表記しておいて損はナシ。

 

そして各プロパティの記述。

 

・border-radius プロパティ

-webkit-border-radius: ○○px; /* Safari, Chrome用 */
-moz-border-radius: ○○px; /* Firefox用 */
border-radius: ○○px; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

 

・box-shadow プロパティ

-webkit-box-shadow: #●●●●●● ○px ○px ○px; /* Safari, Chrome用 */
-moz-box-shadow: #●●●●●● ○px ○px ○px; /* Firefox用 */
box-shadow: #●●●●●● ○px ○px ○px; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

※ 「●」は、影の色。「○」は、左から”横方向のズレ”、”下方向のズレ”、”ぼかし具合”。「box-shadow: inset #●●●●●● ○px ○px ○px;」insetを追記することで、ボックスの内側に影ができる。

 

・border-image プロパティ

border: 1px solid #●●●●●●;
-webkit-border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* Safari, Chrome用 */
-moz-border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* Firefox用 */
border-image: url(“/images/●●●.jpg”) △ △ △ △ / ○px ○px ○px ○px repeat; /* CSS3草案 */
position: relative;
behavior: url(“/PIE.htc”);

※ 「△」は”border-image-slice”の指定、「○」は”border-image-width”の指定。「repeat」は”border-image-repeat”の指定。その他”border-image-outset”の指定も可能。

 

・multiple background images プロパティ

background-image: url(“/images/●●●.jpg”), url(“/images/●●●.jpg”);
background-repeat: no-repeat, no-repeat;
background-position: ○○px center, ○○px center;
behavior: url(“/PIE.htc”);
-pie-background:
url(“/images/●●●.jpg”) no-repeat ○○px center,
url(“/images/●●●.jpg”) no-repeat ○○px center;
position: relative;
behavior: url(“/PIE.htc”);

 

・linear-gradient as background image プロパティ

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#●●●●●●), to(#●●●●●●)); /* Safari, Chrome用 */
background: -webkit-linear-gradient(#●●●●●●, #●●●●●●); /* Safari, Chrome用 */
background: -moz-linear-gradient(#●●●●●●, #●●●●●●); /* Firefox用 */
background: linear-gradient(#●●●●●●, #●●●●●●); /* CSS3草案 */
-pie-background:linear-gradient(#●●●●●●,#●●●●●●);
position: relative;
behavior: url(“/PIE.htc”);

※「●」は、グラデーション上部と下部の指定。

 

最後に先日の作業中に発見したのが、

・IE で filter を使ってグラデーションと角丸 を併用すると、グラデーションが効かない。
・『PIE.htc』IE7,8 box-shadowの「inset」には未対応？。

ただしWindows 7、IE9の開発モード環境のみでの確認だったので、他のOSやIE他のバージョンでは問題ないのかも……？
というか、そもそもWin7＋IE9 環境はPIE.htcが効いてないような……？！

という訳で、
今後のPIE.htcバージョンアップで対応するのか？
はたまた現状でもじゅうぶんな対処法があるのか？
それともIE10 のリリースを待って、
IE9以下を全て排除するのか！？デキルのか！！？？

WebCoding.jp 第1事業部　チーフ専属秘書
左門寺バーバラ久美子でした。

 

 

]]> http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/css3%c3%97pie-htc-%e3%81%ae%e8%a8%98%e8%bf%b0%e3%83%ab%e3%83%bc%e3%83%ab-2.html/feed 0 CSS3×PIE.htc の注意点 http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/css3%c3%97pie-htc-%e3%81%ae%e6%b3%a8%e6%84%8f%e7%82%b9.html http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/css3%c3%97pie-htc-%e3%81%ae%e6%b3%a8%e6%84%8f%e7%82%b9.html#comments Fri, 05 Aug 2011 03:50:52 +0000 WebCoding.jp http://www.webcoding.jp/coding_memo/?p=38 続きを読む →]]> 一部のCSS3をIE6.7.8で機能させる為の便利 javascript (.htcファイル)「PIE.htc」の注意点。

 
  • ・border-radius（ボックスに角丸をつける）
  • ・box-shadow（ボックスに陰影をつける）
  • ・border-image（境界線に画像を使う）
  • ・multiple background images（背景に最大４つの画像を使用できる）
  • ・linear-gradient as background image（背景にグラデーションをつける）
 

CSS3の中でも、実務にも無難に、クロスブラウザでも問題なく動作する、上記リストのスタイルを IE6.7.8 でも機能させてくれる「PIE.htc」。

使い方としては、CSS3 PIE: CSS3 decorations for IE からファイルをダウンロード、その中の「PIE.htc」ファイルのみを適宜アップロード。

CSS3のプロパティを使ったスタイルシートの末尾に「behavior: url(“/PIE.htc”);」と記述する。

だけど、これだけでは動作はしない。上記リストのスタイルごとに、PIE.htcを動作させる為のソースの記述に違いがあるが、それはまた後日。

そんな、もはや定番といえる「PIE.htc」だが、動作させるにあたっての注意点がいくつかある。

注意点その１。

「PIE.htc」へのパスを、基本的に相対パスではなく、”絶対パス” を使う。

例えば…

behavior: url(/PIE.htc);

とか

behavior: url(/js/PIE.htc);

と記述する！

相対パスでも使えるが、その際はCSSファイルからではなく “HTMLファイル” からの相対パスで指定する必要があるので注意！

 

注意点その２。

behaviorプロパティを使って「PIE.htc」ファイルを指定すると、一部のスタイルが無効になってしまうことがある。その場合は、behaviorプロパティを記述した箇所に、positionプロパティを加える。

position: relative;

「zoom: 1;」のように、おまじない的に常に記述しておいて損はナイと思う。

 

注意点その３。

サーバの仕様によっては、デフォルトで .htc ファイルを認識しない場合があるので、その際は「.htaccessファイル」に

AddType text/x-component .htc

を追記する。

 

ちなみにチーフは「Coda×MAMP」のコンビで作業をしているが、

その際は Coda から「ファイルを開く」を選択し、

アプリケーション ＞ MAMP ＞ conf ＞ apache ＞ httpd.conf

の順に開く。

その開いたファイルの 1000行目前後のあたりに

AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm

とあるので、そこへ下記のように追記。

AddType text/html .shtml .html .htm
AddOutputFilter INCLUDES .shtml .html .htm
AddType text/x-component .htc

セーブしてMAMPを再起動すると、IE6.7.8 でも問題なく「PIE.htc」が動作しているはず。

 

といった訳で、「PIE.htc (IE6.7.8)」を捨て去る日が、一日でも早く訪れることを切に願いつずける日々でございます。

WebCoding.jp 第1事業部

チーフ専属秘書　左門寺バーバラ久美子でした。

 

 

 

 

 

]]> http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/css3%c3%97pie-htc-%e3%81%ae%e6%b3%a8%e6%84%8f%e7%82%b9.html/feed 1 Smartyの使いどころ http://www.webcoding.jp/coding_memo/%e3%81%9d%e3%81%ae%e4%bb%96/smarty%e3%81%ae%e4%bd%bf%e3%81%84%e3%81%a9%e3%81%93%e3%82%8d.html http://www.webcoding.jp/coding_memo/%e3%81%9d%e3%81%ae%e4%bb%96/smarty%e3%81%ae%e4%bd%bf%e3%81%84%e3%81%a9%e3%81%93%e3%82%8d.html#comments Tue, 10 Nov 2009 10:18:38 +0000 WebCoding.jp http://webcoding.adflow.co.jp/coding_memo/?p=24 続きを読む →]]>

今日はちょっと横道にそれて、PHPよりの話

最近はSmartyの使いどころが、とんと難しくなりました

数年前までは、デザイナーとプログラマーの分離と謳われ、
一世を風靡したPHPテンプレートエンジンも、

便利なフレームワークの登場で、すっかり影が薄くなって参りました。

Zend,CakePHP,symfony,CodeIgniter・・・・などなど

Smartyのみを使うwebシステムやサイトは、
テンプレートの部分は多少なりとも楽になりますが、上で挙げたツワモノ達に比べると、
やっぱり、作業量は格段に上がります。

逆に、手軽に使おうと、メールフォームやアンケートフォームのみで使うとしても、
やや大袈裟すぎます。（別に使っちゃまずいという事はないんですが）

しかし！

上で挙げたフレームワーク達のほとんどが、プラグインなどで、
使用出来るんです。

彼にもまだ生きる道があったんです。
（実際、そういう使い方する人をあまり聞いた事ないんですが）

まあ、とにかく、Smartyの魅力は何よりあの可読性です！
<?=$hoge?>なんかよりも{$hoge}の方が、
訳の分からない度は、格段下がります。


響き的にもオシャレな気がしたので、何かやる度に、
Smartyを使ったりと若造な時期もあったものですが、
今思うとゾッとするようなくらい、あちこちのサイトに、
Smartyフォルダを忍ばせておりました


今日は有用な情報が一つも無いような気がしないでもないと思いつつ、
また次回よろしくお願いします！

]]> http://www.webcoding.jp/coding_memo/%e3%81%9d%e3%81%ae%e4%bb%96/smarty%e3%81%ae%e4%bd%bf%e3%81%84%e3%81%a9%e3%81%93%e3%82%8d.html/feed 0 xamppを利用してプレビュー環境構築 http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/xampp%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e3%83%97%e3%83%ac%e3%83%93%e3%83%a5%e3%83%bc%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89.html http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/xampp%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e3%83%97%e3%83%ac%e3%83%93%e3%83%a5%e3%83%bc%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89.html#comments Wed, 30 Sep 2009 05:39:01 +0000 WebCoding.jp http://webcoding.adflow.co.jp/coding_memo/?p=22 続きを読む →]]> 案件によっても異なるが、パスの記述方法で作業環境は大きく左右される。

特に制作段階で面倒なのは最近主流の「ルート相対」。

これは通常の相対と異なりとりあえずルート（root=最上階層）に上ってからパスをたどる記述方法。

利点はサイト内共通箇所に大きく表れる。

例えば、全ページに共通のバナー画像を同じレイアウト（同ソース）で配置する場合、

相対であればその画像パスは各階層ページで異なるソースとなる。

しかし、ルート相対を使えばどの階層ページであろうが全く同じソース記述で済む。

※画像へのパスがルートからたどるため共通。

これによって更新作業や修正作業がし易く効率化できる。

 

以上の事を考慮すると、ヘッダーやグローバルナビなどに使用すれば

相対パスでは更新時や修正時に発生していた面倒な問題や心配（一発置換的な）がかなり解決できる。

 

ただし、実はこのルート相対、ローカルでは普通に確認ができない。

ローカルでのルートをたどってしまう。。

仮にCドライブで制作作業をしているなら、Cドラ直下にプレビューファイルを構築すればプレビューできるが、、、

まさかそんな事はしたくないし、しない方が良い。

そこでやっと本題だが、xampp を使う。

基本的にはプログラム開発用の位置づけだが、こういった場合にもかなり使える。

コーディング自体、いかに制作環境を効率化するかで大きな時間短縮につながる場合が多い。

使える便利なものはすべて使う。

使用方法は xampp バーチャルホスト 等の検索で調べてみてください。

]]> http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/xampp%e3%82%92%e5%88%a9%e7%94%a8%e3%81%97%e3%81%a6%e3%83%97%e3%83%ac%e3%83%93%e3%83%a5%e3%83%bc%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89.html/feed 0 コメントアウトの使用方法 http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95.html http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95.html#comments Tue, 29 Sep 2009 09:50:49 +0000 WebCoding.jp http://webcoding.adflow.co.jp/coding_memo/?p=20 続きを読む →]]> コーディング時にその後の更新や利便性を考慮し、

コメントアウトにてそこに記述されている要素が何なのかをマークしておく必要がある。

これはあくまで一般的な使い方。

それとは別に、不要なスペースを消す意味でコメントアウトをする使い方もある。

例えば、

画像を横並びに並べた場合、ソース上は改行くらいして整理しておきたい。

でも、これを普通に改行だけしたのでは画像と画像の間に不要なスペースが入る。

ブラウザにもよるがこの現象を回避するのにコメントアウトを使う。

 

こうする事で、見た目とソースの見た目、

つまりユーザー側と制作側、どちらにとっても良い仕様が出来る。

 

専門的で難しい小技もたくさんあるが、こんな事の積み重ねも大切な小技のひとつ。

]]> http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/%e3%82%b3%e3%83%a1%e3%83%b3%e3%83%88%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e4%bd%bf%e7%94%a8%e6%96%b9%e6%b3%95.html/feed 0 W3C をパスする利点 http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/w3c-%e3%82%92%e3%83%91%e3%82%b9%e3%81%99%e3%82%8b%e5%88%a9%e7%82%b9.html http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/w3c-%e3%82%92%e3%83%91%e3%82%b9%e3%81%99%e3%82%8b%e5%88%a9%e7%82%b9.html#comments Thu, 24 Sep 2009 06:45:14 +0000 WebCoding.jp http://webcoding.adflow.co.jp/coding_memo/?p=18 続きを読む →]]> チェックツールとは少し違いますが、

「W3C」（World Wide Web Consortium）という多くのWeb標準を策定している国際的な団体があります。

ここの定める規定をクリアすると、パスした証にW3Cバナーをサイトに貼ることが許されるのです。

といってもそこまでお堅いものでもありませんが。

 

W3Cをパスする利点は、多少のアクセシビリティアップ？ SEO対策？

つまり正しいマークアップがされていれば自然とついてくる多少の効果各々です。

 

とは言うものの、コーディング代行などそれを売りにする職業やサービスサイトであれば

ないよりあった方がぜんぜん良いでしょう。　印象という意味でも。

 

■Ｗ３Ｃ　公式サイトトップ

■Ｗ３Ｃ　(x)html チェック

■W3C　cssチェック

]]> http://www.webcoding.jp/coding_memo/%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%b3%e3%82%b0tips/w3c-%e3%82%92%e3%83%91%e3%82%b9%e3%81%99%e3%82%8b%e5%88%a9%e7%82%b9.html/feed 0