subtechild

Playful Technology & Design.

レイアウト、表示領域を真ん中に指定する、幅を調整する

CSS コード書いた

コンテンツが常に真ん中に表示されるように

覚えたので覚え書き。 BEMで言う、ところのレイアウトに当たる部分でしょうか。

サンプルコード

ウインドウの幅を変えてみてください。常に幅に合わせてdivとh4が真ん中に表示されると思います。

解説

bodyに幅を指定

body {
  width: 100%;
}

headerをpositionの基準に指定

header {
  position: relative;
}

内包されるコンテンツのpositionの基準とするため、position: relative;を指定します。

divをbodyに対して90%幅にし、中央揃えする

header div {
  left: 0;
  right: 0;
  margin: auto;
  width: 90%;
  position: absolute;
}

leftとrightの両方の位置を0に指定し、 それだけだと間隔がわからなくなるのでmargin: auto;を当てます。

横幅はbodyに対しての90%になります。

h4をdivに対して60%幅にし、中央揃えする

header div h4 {
  left: 0;
  right: 0;
  margin: auto;
  width: 60%;
  position: absolute;
}

上と同じくleft``rightの指定、margin: atuo;を当てて、中央に揃えます。 幅は親のdivに対して60%となります。

ターミナルを1から10まで覚えたいわけじゃないノンプログラマーのための最も無駄のないGulp導入手順

Gulp Node.js タスクランナー 効率化

f:id:nknkt:20161227210638j:plain

まず前提に...

この記事はほとんど自分向けメモです！ Gulp導入の記事はあるけどもっと必要最低限の情報に絞られた記事が欲しいと思い自分で書きました。

この記事が役に立つかもしれない人

  • 以前一度でもGulpを導入したが手順を思い出すのがだるい
  • 今まで導入したことないが、JSとかコマンドラインとか深く知らんでいいからとにかく使いたいんや、早く！
  • コピペ！コピペ！コピペ！

では、淡々と書きます。

Gulp導入手順

Node,jsのインストール

サイトから落とす

https://nodejs.org/ja/nodejs.org

コマンドラインの起動

  • Windows:コマンドプロント
  • Mac:ターミナル

Node.jsのバージョンを確認する場合(必要なければとばして良い)

node -v

Gulpをグローバルにインストール

npm install -g gulp-cli

プロジェクトの初期設定をする

プロジェクトフォルダへ移動

Windowsの場合

cd C:¥Users¥MyName¥フォルダ名

Macの場合

cd /Users/MyName/フォルダ名

Macの場合cd ドラッグ＆ドロップでも可能

package.jsonファイルを作成

npm init

プロジェクト名やらなんやら設定が出てくるから必要なら設定

私の場合MacOSでプロジェクト名に半角大文字を使っていてエラーが出ました(Windowsは知りません)、元々のプロジェクト名から変更しましょう。

プラグインをインストール

npm install --save-dev プラグイン名

プラグインはここで探す

www.npmjs.com

後でベタなやつを書いておくかも

gulpfile.js作って動かす

コピペ！自動化したいならwatch()忘れずに！

後でもうちょっと書くかも

今いるローカル環境にGulpをインストール

npm install --save-dev gulp

以上！！！

とりあえず使える準備はできるはず！ ひたすら、コピペしたコマンド叩いてもらったらすぐだと思う。

Gulp自体の説明とか、もっと初期設置の細かな説明はググってみてみたらいいと思うんだ。

ここでも書きました！ qiita.com

スマホサイトの制作時に注意することと対策まとめ

HTML CSS ディレクション 今からWebデザイナーになりたい人向け

始めに

f:id:nknkt:20161226102735j:plain

スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました。

あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。

(また別の注意点があるということですね)

スマホサイトの制作時に注意すること

デバイス幅は固定されている

PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできません。 デバイス幅は固定幅になります。

どうする？

viewport設定をしてあげます。

<meta name="viewport" content="width=device-width,initial-scale=1">

viewportとは

meta要素に name="viewport" を追加すると、文書の表示領域を設定することができます。

HTML5/ページ全般/meta要素 表示領域を設定する - TAG index

詳しい説明は割愛しますが、スマホの時はこの幅で表示しますよ、って設定してあげることができます。

スマホの画面の大きさに合わせて表示幅を変化させてあげることも出来ます。

(機会があればviewportの詳しい記事も書くかも。)

デバイス幅が機種でバラバラ

iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限です。

どうする？

リキッドデザインで作ります。 幅はpxで指定しません。

 % rem em

上のviewportで表示領域を変化させたら、 次は画像や文字をブラウザの大きさに合わせて変化するように設定します。

www.nda.co.jp

wi-fiのない3G回線など遅い環境を想定

ブロードバンド環境やwi-fiのないところでは、スマホはまだまだかなり遅いスピードになるかもしれません。

重いサイトは表示に時間がかかってしまうので、軽量化を考えなければいけません。

画像やJavaScript、動画を極力減らします。

またはスマホ用の軽量なものを用意するといいでしょう。圧縮はもちろんしましょう。

どうする？

CSS3のanimationの利用も考えます。 JavaScriptでの表現に近いことがanimationでも可能だったりします。

状況に合わせて使い分けるのも大事です。

www.htmq.com

タッチパネル操作で作る

スマホでは、タッチ、フリックなど指を使って操作します。よってマウスやスマートパッドを用いて小さなカーソルでの操作とはまた違う画面設計が必要です。

手の大きさ、小さな画面の中でも使いやすいことを意識しなければいけません。

どうする？

直感的に操作できる設計にします。

タッチ操作の指の大きさを意識します。

まとめ

大きく分けてですが、PCサイトの制作と比べてもこれはどの違いが出てきます。

レスポンシブのサイトにしてもそのまま縮めるだけでは、これらの使いやすさは実現しません。

ユーザビリティを意識した設計をしましょう。