February 2018  |  01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Website(ウェブサイト)

ウェブサイト (英:Website) は、World Wide Web (WWW) 上にあり、一般に特定のドメイン名の下にある複数のウェブページの集まりのこと。サイトと呼ばれることもある。企業などの団体が自身を紹介するため自ら構築したサイトを、その団体の公式サイトなどと呼ぶ。

ホームページと呼ばれることもあるが、この用法は誤用とされる場合もある。また、ウェブサイトのトップページのみをさしてホームページと呼ぶ場合もある。詳しくはホームページの項を参照。

Wikipedia

JUGEMブログの新規作成

JUGEMテーマ:ASP

現在、使用してるbiglobeの「ウェブリブログ」から、GMOペポパの「ロリポブログ(JUGEM)」へブログの引越しをしたいという依頼を受けたので、自身の環境でも「新規」に作ってみる事にした。

※ちなみに依頼人(契約プラン:ライト)も自身(契約プラン:スタンダード)も同じロリポップのレンタルサーバーサービスを使用の為、ライトプランで3個まで、スタンダードで5個までプランの範囲内でロリポブログを持つことが可能。

◆ライトプランの構成


◆スタンダードプランの構成


 
» read more

JUGEMブログ基本設定(ブックマークレット)

JUGEMテーマ:ASP



,泙此JUGEM IT!をブックマークに追加します。

このマークの上で右クリックして「このリンクをブックマーク(L)」してください。
※Macではcontrol+クリックで登録できます。
※safariの場合はツールバーにドラッグ&ドロップで登録できます。


、、、といった具合に、このページではGoogle Chromeへのブックマーク方法が記載されていない。Google Chromeのショートカットメニューには「ブックマークへの追加」がない為、一旦、「リンクのアドレスをコピー」して

「ブックマークマネージャー」を開いて「ページを追加」を選択

「名前」と「URL(先ほどコピーしたアドレスを貼りつけ)」を入力

これで他のブラウザと同じくブックマークされます。

他のブログやWebサイトを閲覧中に、その記事に関する記事を自分のブログに書きたくなったらブックマーク(お気に入り)から【JUGEM IT!】を呼び出します。

すると、引用元の記事のタイトル・リンク引用文、トラックバックURLなどが入力された状態でエントリーフォームが表示されますので、記事を書いて投稿します。

い舛覆澆法△海硫萍未任療蟾討魯ャンセルして、タグだけをHTMLモードにコピペしたのが下の記事になります。

JUGEM IT!の使い方について教えて下さい。 | JUGEM よくある質問集 FAQ  

JUGEMブログ基本設定(サイトマップの設定)

JUGEMテーマ:ASP

・サイトマップURL    
・XML形式のサイトマップ(※)

※但し、これは依頼人用でこのブログではとりあえず初期値(XML形式のサイトマップ設定なし)

※詳細については、現在未解読の為、後ほど追記

JUGEMブログ基本設定(記事投稿の設定)

JUGEMテーマ:ASP

・記事投稿フォームの選択    
・記事のカテゴリーの初期設定(※)

※よく使うカテゴリーに関しては、初期設定で入力しておくと記事を書くときに選択しわすれが無いので便利

(※)カテゴリーの設定については「ブログを書く」⇒「カテゴリーの設定」で設定

JUGEMブログ基本設定(更新情報の通知設定)

JUGEMテーマ:ASP

・JUGEM 更新情報    
PINGサーバーの設定(※)




【2015年最新ping送信先】

※実際にPingを飛ばしてエラーで帰って来たものは省いてます(2015.10)。

http://rpc.reader.livedoor.com/ping
http://blog.goo.ne.jp/XMLRPC
http://ping.fc2.com/
http://ping.feedburner.com/
http://rpc.pingomatic.com/
http://ping.blogranking.net/
http://ranking.kuruten.jp/ping
http://www.blogpeople.net/ping/
http://xping.pubsub.com/ping/
http://blogsearch.google.com/ping/RPC2
http://ping.freeblogranking.com/xmlrpc/
http://rpc.weblogs.com/RPC2
http://ping.blo.gs/
http://services.newsgator.com/ngws/xmlrpcping.aspx
 
» read more

JUGEMブログ基本設定(ブログの表示設定)

JUGEMテーマ:ASP

・ブログ名    
・ブログの説明文    
・記事の表示件数
・カテゴリーの表示件数
・アーカイブ(月別/日別)の表示件数
・コメントの並び順(※)
・トラックバックの並び順(※)
・ソーシャルボタン設定


(※)コメント・トラックバックの設定⇒「スパム(あらし)対策」⇒「コメント・トラックバックの制限」で設定

ご予約

鯖(ca va?)屋へのご用命は下記のカレンダーからお願いいたしますm(_ _)m

〇ご要約受付中/△時間により空き有/×受付終了

※18時以降のご予約に関しましては、リモート対応のみとさせて頂きます。

※打合せ等のアポイントに関しましては、開始時間のみご指定頂き、所要時間等を「要望」にご記入下さると当方にて後の時間帯を調節させて頂きます。

※既存の予約システムを使用しておりますので、1時間単位での予定組しか出来ませんが、細かい時間のご要望等ありましたらこちらも「要望」の方にご記入下されば当方にて調節させて頂きます。

※コワーキングスペース(新大阪)をご利用の場合は、場所確保の為、2日前までのご予約をお願いいたします。又、別途場所指定、ご自宅訪問をご希望の場合は、移動等の時間調整が必要になりますので、お手数ですが予約時の「要望」欄に所在地をご記入頂けます様、よろしくお願いいたします。

※当方は現在1名のみで運営しておりますところから、同一日に別の方の予約が入った場合は、移動時間等の問題で、当方で時間の調整をさせて頂く場合がございますので、あらかじめご了承頂きたくよろしくお願いいたします。




フューチャーフォンの方は、こちらより承ります。
こちらをクリック頂くか、アプリのQRコードリーダーより以下のQRコードを読み取って下さい。




 

ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介

twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。

今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。

実物は別サーバーにアップしていますので、こちらでご確認ください。

今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。

で、まず最初にアイコン形式のフォントを読み込む設定をします。

01 @font-face {
02     font-family'WebSymbolsRegular';
03     srcurl('websymbols-regular-webfont.eot');
04     srcurl('websymbols-regular-webfont.eot?#iefix'format('embedded-opentype'),
05          url('websymbols-regular-webfont.woff'format('woff'),
06          url('websymbols-regular-webfont.ttf'format('truetype'),
07          url('websymbols-regular-webfont.svg#WebSymbolsRegular'format('svg');
08     font-weightnormal;
09     font-stylenormal;
10 }

次からは実際にアイコンを表示していく設定になります。

最初

まずは普通に並べてみます。

1 <div id="social-icon">f g k r v</div>

HTMLはこのようにアルファベットを並べただけになります。

1 #social-icon {
2     font-size:50px;
3     font-family'WebSymbolsRegular';
4 }

CSSで最初に読み込んだアイコン形式のフォントを指定すると、そのアルファベットに該当するアイコンが表示されます。

リンクにしてみる

リンクにしないと意味がないのでリンクを指定してみます。すると当然青くなって下線が入ります。

1 <div id="social-icon">
2   <a href="#">f</a>
3   <a href="#">g</a>
4   <a href="#">k</a>
5   <a href="#">r</a>
6   <a href="#">v</a>
7 </div>

先ほどと同じようにHTMLはこのようにアルファベットを並べただけになります。コードを見ただけだとアイコンだと分かりませんし、検索エンジン様に誤解を与えるかもしれません。解決方法は次で紹介します。

アイコンごとに色を付けてみる

アイコンごとに色を付けてみます。さらに、表示したいアイコンに該当するアルファベットをHTMLではなくCSSで記述します。

1 <div id="social-icon">
2   <a href="#" class="facebook"></a>
3   <a href="#" class="google-plus"></a>
4   <a href="#" class="twitter"></a>
5   <a href="#" class="feed"></a>
6   <a href="#" class="hatena"></a>
7 </div>

HTMLはこのように空のリンクになります。この先色々変形させていきますが、HTMLは変えずにCSSを変えていきます。

そして、それぞれのアイコンに該当するアルファベットはCSSで指定します。セレクタが長くなっていますが、別にクラス名だけでも大丈夫です。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     padding0 5px;
07 }
08 #social-icon a.facebook:before {color#3b5998content"f";}
09 #social-icon a.google-plus:before {color#c53727content"g";}
10 #social-icon a.twitter:before {color#00a1e9content"k";}
11 #social-icon a.feed:before {color#ff8c00;content"r";}
12 #social-icon a.hatena:before {color#0075c2;content"v";}

個人的にほとんど使うことがない「:before擬似要素」を使っています。「.facebook:before {content: "f";}」だとfacebookというクラス名がついた要素の前にアルファベットの「f」が挿入されることになります。

テキストシャドウを使ってみる

テキストシャドウを使ってみます。これがあるとかなり見栄えが良くなります。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 5px;
08 }
09 #social-icon a.facebook:before {color#3b5998content"f";}
10 #social-icon a.google-plus:before {color#c53727content"g";}
11 #social-icon a.twitter:before {color#00a1e9content"k";}
12 #social-icon a.feed:before {color#ff8c00;content"r";}
13 #social-icon a.hatena:before {color#0075c2;content"v";}

オンマウスで色を変えてみる

最初は白くてマウスを乗せたときに色が変わるようにします。アルファベットと色を別々に指定することになるので、ちょっと長くなります。

01 #social-icon a {
02     font-size:50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 5px;
08 }
09 #social-icon a.facebook:before {content"f";}
10 #social-icon a.google-plus:before {content"g";}
11 #social-icon a.twitter:before {content"k";}
12 #social-icon a.feed:before {content"r";}
13 #social-icon a.hatena:before {content"v";}
14 #social-icon a.facebook:hover {color#3b5998;}
15 #social-icon a.google-plus:hover {color#c53727;}
16 #social-icon a.twitter:hover {color#00a1e9;}
17 #social-icon a.feed:hover {color#ff8c00;}
18 #social-icon a.hatena:hover {color#0075c2;}

transitionを使ってみる

先ほどとほぼ一緒ですがtransitionを使って滑らかに色が変わるようにします。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 5px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10 }
11 #social-icon a.facebook:before {content"f";}
12 #social-icon a.google-plus:before {content"g";}
13 #social-icon a.twitter:before {content"k";}
14 #social-icon a.feed:before {content"r";}
15 #social-icon a.hatena:before {content"v";}
16 #social-icon a.facebook:hover {color#3b5998;}
17 #social-icon a.google-plus:hover {color#c53727;}
18 #social-icon a.twitter:hover {color#00a1e9;}
19 #social-icon a.feed:hover {color#ff8c00;}
20 #social-icon a.hatena:hover {color#0075c2;}

transitionについては、ChromeやSafariのWebKit系とFirefoxがベンダープレフィックス付きで対応しています。また、WebKit系は一括指定できますが、Firefoxは一括指定できませんので、「-moz-transition-duration」で指定しています。

transitionについてはこの画像をご参考に。

RGBaカラーを使ってみる

元の色にRGBaカラーを使っています。サンプルのように背景に画像を使っているときなどに効果的です。RGBaカラーに対応していないブラウザのために、「color: #fff;」は残しています。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     color: rgba(0,0,0,0.1);
06     text-decorationnone;
07     padding0 5px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10 }
11 #social-icon a.facebook:before {content"f";}
12 #social-icon a.google-plus:before {content"g";}
13 #social-icon a.twitter:before {content"k";}
14 #social-icon a.feed:before {content"r";}
15 #social-icon a.hatena:before {content"v";}
16 #social-icon a.facebook:hover {color#3b5998;}
17 #social-icon a.google-plus:hover {color#c53727;}
18 #social-icon a.twitter:hover {color#00a1e9;}
19 #social-icon a.feed:hover {color#ff8c00;}
20 #social-icon a.hatena:hover {color#0075c2;}

オンマウスで大きくしてみる

マウスを乗せたときにアイコンが大きくなります。単純ですがtransitionを使うと滑らかに大きくなり印象はぐっと良くなります。

01 #social-icon a {
02     font-size42px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #0002px 2px 2px #aaa;
07     padding0 3px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10     vertical-align:text-top;
11 }
12 #social-icon a.facebook:before {color#3b5998content"f";}
13 #social-icon a.google-plus:before {color#c53727content"g";}
14 #social-icon a.twitter:before {color#00a1e9content"k";}
15 #social-icon a.feed:before {color#ff8c00;content"r";}
16 #social-icon a.hatena:before {color#0075c2;content"v";}
17 #social-icon a:hover {
18     font-size60px;
19 }

オンマウスでくるっと回る

0.3秒かけてくるっと回ります。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 10px;
08     -moz-transition-duration: 0.3s;
09     -webkit-transition: 0.3s;
10     displayblock;
11     floatleft;
12 }
13 #social-icon a.facebook:before {color#3b5998content"f";}
14 #social-icon a.google-plus:before {color#c53727content"g";}
15 #social-icon a.twitter:before {color#00a1e9content"k";}
16 #social-icon a.feed:before {color#ff8c00;content"r";}
17 #social-icon a.hatena:before {color#0075c2;content"v";}
18 #social-icon a:hover{
19     -moz-transform: rotate(360deg);
20     -webkit-transform: rotate(360deg);
21 }

もっと回してみる

先ほどと一緒ですが、今度は2秒かけて20回転します

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 10px;
08     -moz-transition-duration: 2s;
09     -webkit-transition: 2s;
10     displayblock;
11     floatleft;
12 }
13 #social-icon a.facebook:before {color#3b5998content"f";}
14 #social-icon a.google-plus:before {color#c53727content"g";}
15 #social-icon a.twitter:before {color#00a1e9content"k";}
16 #social-icon a.feed:before {color#ff8c00;content"r";}
17 #social-icon a.hatena:before {color#0075c2;content"v";}
18 #social-icon a:hover{
19     -moz-transform: rotate(7200deg);
20     -webkit-transform: rotate(7200deg);
21 }

めくってみる

最後はめくれるように回ります。

01 #social-icon a {
02     font-size50px;
03     font-family'WebSymbolsRegular';
04     color#fff;
05     text-decorationnone;
06     text-shadow0 0 1px #000,2px 2px 2px #aaa;
07     padding0 10px;
08     -moz-transition-duration: 1s;
09     -webkit-transition: 1s;
10     displayblock;
11     floatleft;
12 }
13 #social-icon a.facebook:before {color#3b5998content"f";}
14 #social-icon a.google-plus:before {color#c53727content"g";}
15 #social-icon a.twitter:before {color#00a1e9content"k";}
16 #social-icon a.feed:before {color#ff8c00;content"r";}
17 #social-icon a.hatena:before {color#0075c2;content"v";}
18 #social-icon a:hover{
19     -moz-transform: rotateY(360deg);
20     -webkit-transform: rotateY(360deg);
21 }

CSSの@importはどれだけ悪影響なのか自分で試してみる

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。
問題となるのはパラレルロード(複数のリソースを同時にロードする)ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。
実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。

比較する3つの読み込み方

今回はこの3つで読み込みを比較してみます。

  1. CSSの@import url();で読み込む
  2. HTMLのlink要素で別々に読み込む
  3. Sassで@importして1つにまとめてlink要素で読み込む

対象ブラウザ

今回の検証ブラウザはChromeとInternet Explorerです。
どちらも備え付けの開発者ツールで検証します。

今回計測したサンプル

サンプルはこちらに公開しているので問題があれば指摘してください。

1,準備

HTMLのbody部分は共通になります。

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
<body>
  <header>
    <h1>Site ID</h1>
    <nav>
      <ul>
        <li><a href="#">nav 01</a></li>
        <li><a href="#">nav 02</a></li>
        <li><a href="#">nav 03</a></li>
      </ul>
    </nav>
  </header>
 
  <section id="container">
    <header>
      <h1>Main title</h1>
      <p>Sub title</p>
    </header>
    <main class="editable">
      <h2 id="toc-title">title</h2>
      <p>this is dammy text.</p>
    </main>
  </section>
 
  <footer>
    <p>Copyright</p>
  </footer>
</body>

1.1,CSSの@import url();で読み込む

検証サンプル

以下のようなファイル構造にします。

  • css/
    • module/
      • header.css
      • container.css
      • footer.css
      • editable.css
      • button.css
    • common.css
    • style.css(import)
  • css_import.html

ポイントとなる読み込み部分:style.css

1
2
3
4
5
6
7
8
9
10
11
/* *****************************
 *
 * Import CSS file.
 *
 **************************** */
@import url('common.css');
@import url('module/header.css');
@import url('module/container.css');
@import url('module/footer.css');
@import url('module/editable.css');
@import url('module/button.css');

1.2,HTMLのlink要素で別々に読み込む

検証サンプル

こちらは上記の構造とほぼ同じですが、import用のstyle.cssを省きます。

  • css/
    • module/
      • header.css
      • container.css
      • footer.css
      • editable.css
      • button.css
    • common.css
  • css_import.html

ポイントとなる読み込み部分:css_link.html

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Link Tag Sample</title>
<link rel='stylesheet' href='css/common.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/header.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/container.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/footer.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/editable.css' type='text/css' media='all' />
<link rel='stylesheet' href='css/module/button.css' type='text/css' media='all' />
</head>

1.3,Sassで@importして1つにまとめてlink要素で読み込む

検証サンプル

Sassを使いコンパイル後のまとめられたCSSのみをlink要素でHTMLに読み込みます。
モジュール化されたSCSSファイルはパーシャルという「_」を付けた読み込み専用ファイルにしてstyle.scssに読み込ませます。

  • scss/
    • module/
      • _header.scss
      • _container.scss
      • _footer.scss
      • _editable.scss
      • _button.scss
    • _common.scss
    • style.scss
  • output/
    • style.css
  • css_import.html

ポイントとなる読み込み部分:style.scss

1
2
3
4
5
6
7
8
9
10
11
/* *****************************
 *
 * Import file to Scss or Sass.
 *
 **************************** */
@import "common";
@import "module/header";
@import "module/container";
@import "module/footer";
@import "module/editable";
@import "module/button";
1
2
3
4
5
6
7
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>SCSS @import Sample</title>
<link rel='stylesheet' href='output/style.css' type='text/css' media='all' />
</head>

2,読み込んだ結果を比較検証

結果は以下の比較表を見て貰えるとわかりますが、link要素で連続的に読み込むよりも@importが遅いことがわかります。
また、Sassでコンパイルしたものがリクエストも少なくロードしたサイズまで1/3程度になっています。

比較表

対象ブラウザ 読み込み方法 リクエスト数 サイズ 読み込み時間
Chrome CSS @import 8 1.75KB 607ms
link 7 1.53KB 437ms
Sass compile 2 448B 388ms
Internet Explorer CSS @import 8 1.23KB 924ms
link 7 1.07KB 390ms
Sass compile 2 315B 374ms

Chromeで検証したタイムライン

CSS @import

インポート用のstyle.cssを読み込んでから@import対象のファイルのリクエストを出しているのでその分読み込み完了時間が遅くなっています。
また、若干ですが@importしているファイルの読み込み時間に差があり、パラレルロードが行えていないように見受けられます。@import対象のファイルサイズが重くなるとロードの順序が顕著に表れてくるかもしれません。

Chrome CSS @import

CSS link要素

スムーズに読み込まれていますが、リクエスト数が多いため待機時間とリクエストヘッダの分ファイルサイズが大きくなっています。

Chrome CSS link要素

Sass compile

リクエスト数も少なくファイルサイズも小さいためとても理想的です。

Chrome Sass Compile

Internet Explorerで検証したタイムライン

CSS @import

Chromeと違い@import部分でも読み込みに大きな差がでています。
何が原因なのかはこれだけではわかりませんね。

IE CSS @import

CSS link要素

Chromeとほぼ変わらず安定して読み込んでくれます。

IE CSS link要素

Sass compile

Chromeと変わらず最速です。

IE Sass Compile

CSSもモジュール化・コンポーネント化するメリットとまとめ

実はこの記事で言いたいことは@importの問題というよりはCSSをモジュール化・コンポーネント化するメリットにあります。

最近公開されたこちらの記事「画面ではなく部品から始めてみよう」でも言われているように固定の画面サイズに合わせたCSSをだらだらと記述するより、モジュール・コンポーネントを必要に応じて読み込む方が変化に強いのではないかと最近思い始めました。
Bootstrapは顕著な例でしょう。

モジュール化やコンポーネント化はiOSやAndroid、Adobe Flexや大規模なWebサイト開発ではすでに行われているかと思います。
個人的な主観ですが、小規模なWebサイトを作る際は、ページ単位でCSSを記述することが多く作っている時は良いけれども、運用中に変更する事があると手間が多く作りにくいなと感じていました。(変更は可能だが不要なCSSの消し忘れや消して他のページにも影響したなど手間がかかる)

Sassが使えなかった時はモジュール化するには@importを使うしか方法がなく管理のしやすさとサイトの表示速度のどちらかしか実現できません(正確にはサーバー側で処理させるなど方法はある)。
これからは、Sassなどのメタ言語を利用しコンパイルを行うことで今回のサンプルのように管理のしやすさを維持しつつ、サイトの高速化も実現することができます。

今後はWeb Componentsも利用できるようになるとHTMLのコンポーネント化が可能になりよりモジュール化やコンポーネント化を意識した構築方法にく変化していくと思います。
考え方を今から少しずつ変えていきたいですね。

@importの問題についてはより詳しい検証を行っているこちらの記事も参考になります。
@importを使うべきでない理由

12>|next>>
pagetop