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

IE10でのみ長文のテキストがflexboxを指定しているときに文字が折り返されず横にはみ出してしまう現象があります、

chromeやfirefoxなどではflex-shrinkプロパティの基本の値が1担っていますが、

IEでは、flexプロパティが未指定の場合「flex:0 0 auto;」が適用されているため、
flexコンテナの幅に応じて縮小ができず、文字がはみ出してしまうことになります。

なので、対処法は、ベンダープレフィックスを付けて、IE10用にflex-shrinkプロパティが1になるよう
以下の記述をしてあげることで解決します。

-ms-flex: 0 1 auto;

SVGはベクターデータで作成されているので拡大縮小をしたときに、解像度に関係なく綺麗に見えるという利点があります。

ですが、IE11やEdgeで、SVG画像をバックグラウンド指定すると、
background-sizeで指定したサイズよりも小さくなってしまう不具合が存在します。

IE11もEdgeもSVG形式の画像をサポートしているので表示は問題ないのですが、SVGのタグにwidth,heightの記述がないと
サイズが変になってしまいます。

タイトル

h2{
　　background: url(../img/icon.svg) no-repeat left center;
　　background-size: 20px;
}

SVG画像自体にwidth heightを指定してあげることで、解決します。

■変更前

又、書き出し方によって、viewBoxとwidth,heightの値がずれていることもあるので、
値をそろえるようにしましょう。

WP-SCSSというプラグインは、
FTPなどでアップロードしたscssファイルを、
自動的にCSSにコンパイルしてくれるというものです。

なのでいちいちATOMなどのエディターでコンパイルしてSCSSとコンパイルしたCSSをアップロードして、、、といった余計な作業がなくなり、
大変便利です。

WP-SCSS
https://wordpress.org/plugins/wp-scss/

インストールが完了したら、
設定のSCSS LOCATIONとCSS LOCATIONにそれぞれ、

SCSS LocationにSCSSファイルのある場所を指定。
CSS LocationにコンパイルしたCSSファイルを置く場所を指定します。

コンパイルが手間という方は、このプラグインをインストールしてみるとよいでしょう

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

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

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

完全とは言い切れませんが、明らかな文章の間違いをチェックしてくれるツールが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をかけて残しておいたほうがよいでしょう。