WebCoding.jpコーディングと文字校正・校閲を同時進行できるサービス「ウェブコーディング.jp」

ご相談はお気軽にどうぞ 03-5369-1878

カテゴリーアーカイブ: コーディングTips

○秘

ページ内リンクをちょうどいい場所でストップ!

カテゴリ:コーディングTips

2013年12月27日

チーフコーダーのコーディングメモ、今年の更新も今回で最後です!!
そんなウェブコーディング.jpは12月28日〜1月5日までお休みを頂きます。

どうぞ、来年もよろしくお願い致します。


では早速やっていきましょう!
今回はページ内リンクについてです。

縦に長いサイトなどはページ内リンクを使用すると便利ですよね!
ちなみにページの一番下にいった時によく目にする「TOPに戻る」もページ内リンクの仲間です。


そんなページ内リンクですが、いざページ内リンクをクリックして、ページの天井にピッタリくっついて表示されてしまった!なんてことは一度は経験されているハズ・・・!

そんな時に、CSSをちょこっと書いてあげることで見やすくなります!
実際に再現してみましたので、下記よりお試し下さい。


※大きいディスプレイを使用している方は、ブラウザのウィンドウサイズを
小さくして閲覧して頂くとご確認頂けます。

また、表示を確認しやすくするために記事内に余白をとっております。



通常の表示:ここをクリック!

CSS追加後の表示:ここをクリック!











↑ ブラウザの天井にピッタリくっつきます。










↑ こちらには上部に余白をつけました!






















どのようになっているのかといいますと、
「リンク先に指定したID」に以下のCSSを付け加えてみましょう。


#link2 {
  padding-top: 20px;
  margin-top: -20px;
}



追加したpadding-top分をmargin-topで無くすことで、
リンクをクリックした時、上部に余白を持たせながら
レイアウトが崩れることなくページ内リンクのリンク先を調整することができます!


この方法でページ内リンクを使って、今までピタッとなっていた部分に余裕を持たせて上げることで、視認性も向上します!
小さなことでも見逃しません。

それがチーフです。

それでは来年も、、、
「チェェェーック!」

○秘

HTMLが一瞬で見やすくなる置換術!

カテゴリ:コーディングTips

2013年11月28日

社内レクリエーションでブラックバス釣りに行きましたが、1匹も釣れず帰ってきました、チーフです。

そんな悔しい思い出を一瞬にして吹き飛ばす魔法の置換術を今回は皆さんに伝授したいと思います!


<!DOCTYPE HTML>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>あさのあいさつ</title>
</head>
<body>
	<h1>おはようございます</h1>
</body>
</html>

上記のようなコードを例に見ていくことにしましょう。

ファイルサイズを小さくするために、インデントやスペースをとった形にすることはよくありますよね。

<!DOCTYPE HTML><html lang="ja"><head><meta charset="UTF-8"><title>あさのあいさつ</title></head><body><h1>おはようございます</h1></body></html>


こんな感じです。

これをある程度見やすい形にするためには
テキストエディタに付いている「置換」を使用します。

今回はMacに標準で入っている
「テキストエディット」を用いて解説していきます。


編集 -> 検索 -> 検索と置換…
と進んでいただくか

command + option + F
のショートカットキーで置換を行うことができます。


検索ボックスの中に

><

を入力します。

そして検索ボックス下にあります
置換する文字列を指定するテキストボックスの中に

>
<

> と < の間に改行を入れた形にして「すべて」をクリックすると、、、


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>あさのあいさつ</title>
</head>
<body>
<h1>おはようございます</h1>
</body>
</html>

上記の様な形になります!
これである程度どのような構造になっているか確認しやすくなりましたね。

さらにインデントを入れてあげることにより、更に可読性を上げることが出来ます。
皆さんも読みやすいキレイなコードを心がけて作業にとりかかりましょうね!

○秘

text-indentが効かない?!

カテゴリ:コーディングTips

2013年9月11日

どうもチーフです。

最近は新入社員の教育に力を入れており、
更新が滞っておりました。


新入社員の教育をしていると、コーディングを始めたばかりの頃につまづいていた箇所を思い返すものです。

今回はそんな、初心者がはまりがちな穴の一角をご紹介。


「text-indentが効かない?!」
text-indentといえば、文章の段落の1行目のインデント幅を
指定する際に用いるcssプロパティの1つです。

そんなtext-indentを用いたテクニックの1つ
「text-indent: -9999px;」
を使って、テキストを飛ばして画像を置換する方法ですが、これには思わぬ穴が。


「text-indent: -9999px;」を指定している親要素に「text-align: right;」が指定されている場合、テキストが飛んでいってくれないんですね。

いくら飛んでいこうとしても親の「右に寄りなさい!」という命令には逆らえないわけです。親のいうことは絶対。


実際にtext-indentを指定しているのは子要素ですが、
親要素が原因というと、少し気づきにくいところでした。

ということで、「text-indent: -9999px」が効かないときは、まずは親要素を確認してみてください。

○秘

ID名とクラス名でお困りのアナタへ

カテゴリ:コーディングTips

2011年10月7日

どーも、チーフデス。

長年コーディングに携わりながらも、微妙に自分の中のルールも曖昧だったりする「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」

 

 

ざっとこんな感じデス!

 

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

「チェェェーック!」

 

○秘

CSS3×PIE.htc の記述ルール

カテゴリ:コーディングTips

2011年9月6日

前回の記事 で触れたjavascript (.htcファイル)「PIE.htc」。
今回はそのCSS3 PIE の記述ルールの備忘録。

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

・border-radius(ボックスに角丸をつける)
・box-shadow(ボックスに陰影をつける)
・border-image(境界線に画像を使う)
・multiple background images(背景に最大4つの画像を使用できる)
・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事業部 チーフ専属秘書
左門寺バーバラ久美子でした。

 

 

○秘

CSS3×PIE.htc の注意点

カテゴリ:コーディングTips

2011年8月5日

一部のCSS3をIE6.7.8で機能させる為の便利 javascript (.htcファイル)「PIE.htc」の注意点。

 

  • ・border-radius(ボックスに角丸をつける)
  • ・box-shadow(ボックスに陰影をつける)
  • ・border-image(境界線に画像を使う)
  • ・multiple background images(背景に最大4つの画像を使用できる)
  • ・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」だが、動作させるにあたっての注意点がいくつかある。

注意点その1。

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

例えば…

behavior: url(/PIE.htc);

とか

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

と記述する!

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

 

注意点その2。

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

position: relative;

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

 

注意点その3。

サーバの仕様によっては、デフォルトで .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事業部

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

 

 

 

 

 

○秘

xamppを利用してプレビュー環境構築

カテゴリ:コーディングTips

2009年9月30日

案件によっても異なるが、パスの記述方法で作業環境は大きく左右される。

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

○秘

コメントアウトの使用方法

カテゴリ:コーディングTips

2009年9月29日

コーディング時にその後の更新や利便性を考慮し、

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

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

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

例えば、

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

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

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

 

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

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

 

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

○秘

W3C をパスする利点

カテゴリ:コーディングTips

2009年9月24日

チェックツールとは少し違いますが、

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

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

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

 

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

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

 

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

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

 

W3C 公式サイトトップ

W3C (x)html チェック

W3C cssチェック

○秘

抑えておきたいチェックツール

カテゴリ:コーディングTips

コーディング内容のチェックツールには様々あります。

下記は用途によって使い分けるのがベストかと思いますが、

コーダーやウェブ制作に携わる人間としては知っておきたいチェックツールです。

 

それぞれ、違った観点から採点・評価しますので

案件ごとの重視ポイントに合わせて使い分けると良いと思います。

 

Another HTML-lint gateway

採点のほか、減点理由も表記されるので簡易的なチェックには最適です。

 

ウェブアクセシビリティチェックサイトHAREL

アクセシビリティ適合度をチェックする、解説付きでわかりやすいツールです。

 

WebInspector

同じくアクセシビリティを診断するソフトウェアで主に、高齢者や視覚に障害のある方にとって重要な問題を指摘します。

 

以上、代表的なものですが他にもまだまだたくさんあります。

SEO的なソースチェックを行ってくれるものから、キーワード出現率まで・・・

チェック結果を元にすべてを修正していては無駄な時間が多すぎます。

最低ラインはクリアした上で、最終的なチェックツールとして使用するのが良いと思います。

12

読者登録

読者になる

このブログの更新情報が届きます

プロフィール

チーフ

ニックネーム:チーフ

血液型:A型

得意技:ブラインドコーディング

座右の銘:宵越しの金は持たない

口癖:「チェェェーック!」

愛犬:マレーシア生まれカラムーチョ大好きパグの "ジャッキー"

秘書:ニコ動とモンハンが生き甲斐 "左門寺バーバラ久美子"

カレンダー

2017年12月
« 1月    
 123
45678910
11121314151617
18192021222324
25262728293031

アーカイブ