サイトのページやブログ記事など数が多くなるほど、文章構成は大変なものになります。

企業のサイトなどでは、タイプミスや誤字脱字は信頼を失う結果にもなります。
またブログなどでは、記事の価値を下げてしまうことになります。

ですが、一人で膨大な数のページをチェックするのはなかなか時間のかかる作業ではないでしょうか。

完全とは言い切れませんが、明らかな文章の間違いをチェックしてくれるツールがWEBには存在します。

日本語の変換、誤字脱字ではEnnoというサイトがあります。

Enno

WEBサイトの管理、運用を行うにあたって、代表的なのは、WordPressですが、
ほかにも、CMSはほかにも多くの種類が存在します。

CMSによってできることがそれぞれ異なるため、自分のサイトの運用方法などにあったCMSを選択するのも大切ななことです。

代表的なWordPressのほかにMovableType(MT)といった名称のCMSが存在します。

■サーバー負荷に関して
WPはブログなど投稿記事などを、データーベースから情報を読み取り、動的にページを表示するため、表示に時間がかかります。
サーバー負荷によって、サイトの表示速度にも影響が出てしまうため、悪説集中などの対策をとることもあります。

一方、MTは静的ページです、すでにページが作成された状態ですので、重いサーバー負荷にも耐えることが可能になります。

■マルチサイト機能
また、MTはマルチサイト機能を標準で備えており、複数のブログなどと連携して、新着情報を一つにまとめて表示したりなどできます。
WordPressでもマルチサイト機能は存在しますが、対応できないプラグインや、サーバー環境によってうまく機能しないなど、問題が起こることもあります。
シングルでの運用はWp、大規模なサイトの運用となると、MTでの使用が好ましいでしょう。

■カスタマイズの自由度
WPではテーマやプラグインなども豊富で、ある程度までは素人でもカスタマイズが可能ですが、
PHPを使用しての構築になりますので、高度なカスタマイズなどになると、実装などが難しくなってきます。
PHPの知識を持った人でないと深いカスタマイズができないのも事実です。
ですがMTはHTMLベースでカスタマイズしていくことができるので、自由に変更が可能です。

お互いに比較をしましたが、選ぶうえで、一番はサイトの規模によるところが大きいでしょう、
そのため、どのような規模のサイトでどのように管理していくのか、よく考慮していきましょう。そうすることでサイト管理をぐっとしやすくなります。

iPhoneでフォーム送信ボタンにオリジナルデザインを適用する方法です。

pcのブラウザ上でsubmitボタンのデザインを変更したにもかかわらず、実機で見たときに、デフォルトのスタイルでボタンが表示されていたなんてことはよくあります。

/* iOSのスタイルを消去*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}

-webkit-appearanceはiosのsafariなどブラウザが標準で設定しているデザインを標準的なUIにすることができるCSS3プロパティです。

PCﾔスマートフォンなど対応する機種が増えるほど、原因を把握するのは大変ですが、iphoneでの表示がおかしい場合には、-webkit-appearanceの記述をしてあげるとよいでしょう。

グローバルナビゲーションを例に挙げると、5項目あるナビゲーションだとロールオーバー時を含めて最大10枚の画像が必要になります。
一つ一つの画像のサイズは小さくても数が増えるとどうしてもよっ見込みに時間がかかってしまいます。

その結果、サーバーへのリクエスト回数が増えてしまうため、表示速度が低下してしまいます。

ですが、CSSスプライトでは、
グローバルナビゲーションの画像を使用ロールオーバー時を含めて、一枚の画像にまとめるため、
サーバーへのhttpリクエスト回数を減らすことができます。

サイト表示速度が向上と、ロールオバーの画像の切り替えの時、読み込むことがないため、
画像の管理が楽になるといった利点があります。

デメリットとしては、
CSSスプライトではbackground-positionの背景画像の表示位置を指定することで、画像切り替えを行っているため、

項目の名前の変更や画像のサイズに変更がある場合、画像の変更やcssの変更などに時間がかかってしまいます。

.nav_01{
background-image: url(); //スプライト画像の背景
background-position: 0px 0px; //座標
width: 360px;
height: 50px;
}
.nav_01:hover{
background-position: 0px 50px; //座標
}

スプライト画像を作成する便利なサイトとして
Stitchesというサイトがあります。

メニューのOpenからスプライト化したい画像をアップロードすると、自動的に画像を作成してくれます。

CSSスプライトはSEOの観点からも推奨されるものですが、更新面も考慮して、採用する場合は、管理しやすいよう設計をしないといけませんね。

フォントはサイトのデザインを決めるうえで、重要なものです。

使用するフォントによって、サイトの表示速度や、
ブラウザなどの環境によっては、表示がおかしく見えてしまったりなど、注意深く検証する必要があります。

今回は游ゴシックを使うときの問題点です。

一番の問題はIEでの表示が、テキストの下に余白ができてしまうことです。

対策として一番簡単なのは、IEのみフォントををメイリオにすることです。

html{
font-family: "游ゴシック", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
/*IE用の記述*/
_:-ms-input-placeholder, :root{
  font-family: Meiryo, sans-serif;
}

見出しなど限定的に使用したい場合などは

.tittle {
  padding: 6px 15px;
}

/*IE用の記述*/
_:-ms-input-placeholder, :root .tittle {
  padding: 10px 15px 4px 10px;
}

余白などをIE用のハックで別に余白を設けてあげるなど、個別に指定してあげることです。

游ゴシックを使用したデザインを作成する場合、見出しやナビゲーションで使用するのかよく考慮して製作する必要がありますね

テストサイトを公開状態にしたときにキャッシュが残っていて、以前の状態のまま表示されていたり、
修正をしてもキャッシュのせいで、古いほうしか閲覧できない場合もあります。

本番公開する前などのテスト状態の場合はキャッシュを残さない設定のほうが良いかもしれません。

.httaccess
■キャッシュを残さないようにする設定

Header set Pragma no-cache
Header set Cache-Control no-cache

上記だと全てのキャッシュを残さないようにできます。

■特定のファイルの拡張子のみキャッシュさせない

Header set Pragma no-cache
Header set Cache-Control no-cache

(html|php|jpg|jpeg|gif|png)の部分を変更してあげれば、
画像限定やhtml限定でキャッシュを残さないように詳細に設定できます。

■特定の期間だけキャッシュ

Header set Cache-Control "max-age=86400"
上記だと、1日＝86400秒の設定になります。

キャッシュは、webページの情報として残しておけるので、次に同じページにアクセスした場合などに、サーバーから再び読みさせずに、ページ高速化できるので、
更新頻度が少ないものは、キャッシュさせる設定のほうがユーザーライクな設定です。

noindexとは、メタタグの一種で、サイト内の指定したページを
グーグルなどの検索エンジンにインデックスさせないために使います。

そのためnoindexを指定すると、検索結果には表示されなくなります。
あまり意味の内容に感じるかもしれませんが、適切に使うことで、
不要なページや未公開のページをnoindexすることで、サイト全体の価値を上げることができます。

noindexを指定するとすれば、テストでアップしたページやコンテンツの内容が不完全な状態のページなどです。

低品質なページでサイトに必要がないページは、noindexを使うより、削除したり、コンテンツ内容の品質を上げることが好ましいです。

ただし、404エラーページなどは、コンテンツ内容が充実したものではありませんが、ページが見つからないということを示すには必要なので、
noindexをかけて残しておいたほうがよいでしょう。

コンテンツを上下中央に配置する場面がよくあります。

flexを使用すれば簡単に実現できるのですが、IEでのブラウザで見たときとほかのブラウザでの動きに注意しなければなりません。

   

      
コンテンツ
   


.content{
        display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
.content-inner {
  max-width: 300px;
  margin: 0 auto;
}

クロームなどのブラウザでは上下中央揃えになりますが、
IEでは右中央に表示されてしまいます。

flexをかけた直下の子要素にmargin autohを指定していると、IEでは中央揃えにならないため
解決策としては、

  

     

      
コンテンツ
     
  

mzrgin:autoが指定されている要素をdivで囲うことで解決ができます。
flexは便利ですが、IEなどのブラウザなどの見え方に気を付けないと、時間がかかってしまうので、理解して使用していきたいですね

SVGはレスポンシブなどに便利で、
JPEGやGIF、PNGなどの、ビットマップ画像ではなく、
ベクター画像なので、拡大・縮小しても画質の影響などで、荒れたりしません。
スマホや、Retinaディスプレイなどでは非常に重宝します。

コーディングの際では、普通にimgファイルとして使用でき、

上記のようにsrc属性で指定できます。

便利なSVGですが、サーバー環境によってブラウザ側でうまく表示されない場合があります。

その場合.htaccessに以下のコードを追加します。

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

これを記述した.htaccessをサーバー側にアップすることで、SVG画像が使用可能になります。

JavaScriptの記述場所といえばheadの内部に記述するケースが多いと思いますが、
bodyの終了タグの直前に記述するケースも増えてきました。

ページの最後にjsを記述する利点として、
script要素の記述位置によってページの表示速度が変わるということです。

javascriptを読み込んでいる時間HTMLの表示が止まってしまうため、WEBサイトが表示されるのが遅くなってしまいます。
なので、jsをページ末尾に記述してやることで、ページ全体の描画画を止めることなく、スムーズに表示させることが可能になります。

ユーザーのボタン操作や、ページが表示されてから機能するjsなどや、アクセス解析用のタグなどは、ページ下部で機能させてもよいですが、
パララックスなどのスクロールして、jsが機能していないと表示されないようなページの作りの場合などhead内に記述したほうが良い場合もありますので、
レイアウトや表示スピードを見て、読み込み位置を調整したほうがよいでしょう。