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

CSSのアニメーションを使って、うねうね動く円を作成することができます。
滅多に使用することはないとは思いますが、独特な雰囲気のサイトややわらかい雰囲気のサイトなどに使用できるのではないでしょうか。

作り方は、border-radiusをキーフレームを使用して動かしてくだけです。

.wave-circle {
  border: 5px solid #87CCA1;
  animation: uneune 5s linear infinite; /* 5秒アニメーションをループ */
  width: 300px;
  height: 300px;
}
@keyframes wave {
  0% {
    border-radius: 30% 50% 80% 50% / 60% 40% 30% 50%; 
  }
  20% {
    border-radius: 70% 60% 60% 90% / 70% 80% 40% 90%; 
  }
  40% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }
  60% {
    border-radius: 90% 60% 40% 70% / 70% 50% 80% 40%; 
  }
  80% {
    border-radius: 60% 40% 70% 60% / 40% 60% 50% 60%; 
  }
  100% {
    border-radius: 30% 50% 80% 50% / 60% 640% 30% 50%; 
  }
}

SVGやJQueryを使用するほうが、より細かく設定が可能ですが、調整が難しい場合が多いので、CSSで実現可能なところはkeyframeアニメーションを使用するほうがよいでしょう

WordPressをインストールした後、
サイトのURLの変更や、インストール先ディレクトリ変更を行いたいという場合が、時々あるかもしれません。

WordPressでは後からディレクトリの変更やURLの変更が可能です、

ドメイン直下にインストールしてしまった場合、WordPress以外のファイルでサーバー内のファイル構成が乱雑になりがちです。
WordPressではWpやSystemなどの名前のサブディレクトリを作成して、インストールし、TOPページのみドメイン直下に配置する構成が好ましいでしょう。

●WordPressをサブディレクトリへ移動
■手順■
1,WordPressの格納場所、サブディレクトリを作成します。
xxx.com/public_html(ルートディレクトリ)/system

2,ダッシュボードの設定画面で、「WordPressのアドレス（URL）」をサブディレクトリに合わせる
3,WordPressファイルを、先ほど作成した、サブディレクトリに移動
4,index.phpと.htaccessファイルをコピーし、index.phpを修正する

修正前
require( dirname( __FILE__ ) . '/wp-blog-header.php' );
修正後
require( dirname( __FILE__ ) . '/system/wp-blog-header.php' );

5,パーマリンク設定の更新をします。

●WordPressのサイトURLとインストール先ディレクトリ変更

インストール先ディレクトリとサイトURLを変更します。

「http://example.com/wp」にインストールしたけれども、「http://example.com/system」にしたい場合などです。

WordPressの設定ページで、「WordPressのアドレス（URL）」と「サイトのアドレス（URL）」を両方とも、
新しいアドレスに変更する（http://xxx.com/wp -> http://xxx.com/system）
変更後ログアウトし、サーバー上のディレクトリ名を変更します（wp > system）
再度ログインしてパーマリンク設定を更新すれば完了です。

Sassの@mixinという機能を活用すれば、今まで面倒くさかった記述も、効率的にコーディングが可能です。

@mixin に任意で名前を指定してスタイルを指定することでひとまとまりの定義とすることができます。

使用するときには、@includeで呼び出します。

@mixin font {
     color:#333;
     font-size:14px;
     font-weight:bold;
}
.text {
     @include font;
}

また変数を使って

@mixin box($size) {
     width: $size;
     height: $size;
}
■scss
.content {
     @include box(300px);
}
■css{
     width: 300px;
     height: 300px;
}

変数$sizeに格納されたpxの値がwidthとheightに適用されます。

上記を活用して、指定の多いポジションの指定などを@mixinを使用すると

@mixin position ($top: auto, $right: auto, $bottom: auto, $left: auto) {
     position: absolute;
     top: $top;
     right: $right;
     bottom: $bottom;
     left: $left;
}

.content {
     @include position(10px, 50px, 50px, 0);
}

.content {
  position: absolute;
  top: 10px;
  right: 50px;
  bottom: 50px;
  left: 0px;
}

位置の指定が@include position(10px, 50px, 50px, 0);の一行だけで済むので、メンテナンス性や作業効率にもつながります。

2018年の4月にInstagramのAPIの機能が一部廃止されており、
2020年までに、すべての機能が停止する予定だということです。

Instagram APIの代わりに
Instagram Graph APIを使用を推奨されていますが、
ビジネスアカウント専用のAPIのため、
Facebookの認証を受けたビジネス用アカウントでしか使用できず、一般ユーザー向けには提供されていません。

インスタグラムは個人利用だけでなく、
ショッピングサイトでも商品画像の紹介でも多く利用されており、
多くの企業にとっても必要なものとなっています。

投稿画像の閲覧数から人気商品を分析など、Instagram APIを利用したツールを利用していたので、
Instagram Graph APIを利用したものに移行するなど対策が必要になってきています。

Flexboxは様々なレイアウトを、従来の方法よりずっと簡単に実装できる優れたプロパティです。
最近ではfloatではなくFlexboxを使ってレイアウトを組んでいる人も多いのではないでしょうか。

そんな便利なFlexboxですが、IE8や9に対応していないため、古いブラウザーをサポートした案件では使用することができません。
flexboxを使用すれば簡単なレイアウトでも諦めるしかない、なんて場面もあるかもしれません。

ですが、旧式のブラウザーでもFlexboxを使用する方法があります。

flexibility.js

上記からダウンロードし、flexibility.jsを読み込ませるだけです。

■JS


■CSS
.flex-box {
  display: flex;
    -js-display: flex;
}

CSSには適応させたいクラスに対して、ベンダープレフィックスのようにプロパティの前に-js-と追記するだけでOKです。

古いブラウザーに対応させるためのスクリプトは大変便利です。
後は、動作確認と読み込み速度など気を付けて使用していきたいですね。

XAMPPのローカルホストのパスは，
XAMPPを設定を変更せずにインストールした場合、

C:\xampp\htdocsがサーバールートとして設定されていますが、
それ以外の場所を指定したい場合の設定方法です。

■設定用のファイル
C:\xampp\apache\conf\extra\httpd-vhosts.conf
上記のファイルにアクセスして

その中に記述してある
##NameVirtualHost *:80
のコメントアウトの##を削除して、

DocumentRoot “C:\Users\user\Documents\index”
ServerName localhost_documents

例)C:\Users\user\Documents\index

設定したい場所を指定します。（例ではドキュメントのindexフォルダー）
ServerNameには任意のドメイン名を設定します。

記述が完了したら
アクセス権限を付与するため
下記を記述します。

Options Indexes
AllowOverride All
Require all granted

最後に
C:\Windows\System32\Drivers\etcの中にある
hostsファイルを開いて、設定したドメイン名を追記します。

127.0.0.1 localhost_documents

スマートフォンやタブレットなどのレスポンシブ対応でユーザーの端末に合わせて相対的にフォントサイズを変更する必要があります。
{font-size: 62.5%;}です。

font-sizeのサイズ指定には、pxやem、%があります。
デザイン的な特例がない限り、読ませるためのテキストは基準となるfont-sizeに対してこれらの単位で指定することになります。

ブラウザのfont-sizeのデ基準値は16pxサイズです。
基準値16pxの62.5%、となるのでhtmlのフォントサイズが10pxとなります。

html{
font-size: 62.5%;
}

フォントサイズを10pxとすることで18px= 1.8remと計算が楽になります。
フォントサイズをremで指定するのは親要素のフォントサイズに影響されることなく、サイズを変更することができます。

また、クライアントからもう少しサイトの文字サイズをあげてほしいといった要望があったとき、
htmlのフォントサイズを62.5%の数値を大きくすることでサイト全体のフォントサイズを相対的に上げることができ、
大幅な修正をすることがなくなるためです。

ユーザーのサイト閲覧の幅が広がった現在では、pxや%を指定するよりも便利な指定方法ではないでしょうか

navタグはグローバルナビゲーションなどによく使われています。

利用される場所は、
アンカーリンクやハンバーガーメニュ-など、ヘッダーやサイドバーなど、
フロー・コンテンツとされるような場所です。

リンクであるからといって、すべて

フッターに記載するコピーライトには年号が含まれていることが多いかと思います。

コピーライト(発行年) 著作権名で記載されているかと思います、
更新年度が毎年更新されている会社であると、サイトがきちんと管理されている印象を受けます。

やはり古い状態のままよりも更新年度を記載したほうが良いでしょう。
ですが、サイトの管理に慣れていない方や、静的なサイトでいちいち更新するのが面倒くさいといった方もいるでしょう。

そんな場合にコピーライトの年号の自動で更新する方法があります。

javaScriptの場合は

Copyright © 

  

All Rights Reserved.

を記述するだけで自動更新してくれます。
JavaScriptの場合、年号はユーザーのパソコンの時間設定に依存して取得されてしまうため注意が必要です。

WordPressのサイトの場合は、footer.phpに以下の記述をすればOKです。

Copyright © 
  
All Rights Reserved.

PHPの場合、サーバーサイドの時間設定に依存するので、ユーザー側の時間設定を気にする必要はありません。

CSSをSCSSに変換する

SCSSを使用してcssよりも効率的にサイトの制作を進めたい人がいるかと思います。
自分が担当している案件や、
自社の他のメンバーの案件の引継ぎなどではそのままSCSSを利用できますが、
他社がコーディングしたソースを使用する案件などでは、
場合によってCSSで組まれていたりすることも少なくありません。
その場合CSSからSCSSへ変換してくれるサービスを使うことで楽に移行することができます。

その便利なサイトが『css2sass』です。

http://css2sass.herokuapp.com/

ATOMのプラグインやWordPressのプラグインでは、
SCSSからCSSへ変換してくれるプラグインはありますが、
CSSからSCSSへ変換してくれるプラグインはあまり見かけないので、
貴重なサービスといえるでしょう。

使い方は簡単でCSS (paste your CSS code and convert!)と、
書かれた場所に変換したいcssの内容をペーストして、
SCSSかSASSに変換するかを選択するだけです。

このサービスは、
今までCSSで構築してたけど、
メンテナンス性を向上させるためにSCSSを導入したいという方にも便利なサービスですね。