20200119のCSSに関する記事は10件です。

初学者のレスポンシブデザイン

はじめに

就活で使用しているポートフォリオにレスポンシブなデザインを取り入れたので書きます。
(私は現在就活中の大学生です)

レスポンシブとは

PC、タブレット、スマホなど異なる画面サイズの幅に合わせて柔軟にデザインを調整し、見やすい最適な表示にすることです。
私の大学のホームページにもつい最近導入されました。(うちの大学は遅れてるのかな?

レスポンシブの導入

レスポンシブなデザインを始める前に、まずHTMLのヘッダーに以下を追記します。

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

これによりWebページを閲覧している端末の画面サイズに合わせて表示域を調整してくれます。
これをしないとレスポンシブなデザインを作っても、うまく動作しません。(経験済み)

ブレイクポイントを決める

ブレイクポイントとは、CSSを切り替える画面サイズのことです。
以下が端末の一般的なサイズ表です。

端末 サイズ
PC 1024px以上
タブレット 768px以上
スマホ 480px未満

CSSに指定する

上の表を使ってブレークポイントを決めると
以下のようになります。

@media screen and (min-width: 1024px) {
    1024px以上(PC)のCSS
}
@media screen and (min-width: 768px) {
    768px以上(タブレット)のCSS
}
@media screen and (max-width: 480px) {
    480px未満(スマホ)のCSS
}

まとめ

今回の記事では、簡単にですがレスポンシブなデザインを作る方法を書きました。

レスポンシブなデザインはUIの向上やSEO対策などのメリットがある反面、表示が重くなったり単純に作るのが大変だったりします。
しかし、私がユーザー側に立った時には、やはりレスポンシブなデザインのWebページの方が使いやすいと感じます。大学のホームページでとても感じました。
なので、これから私が作るWebページはレスポンシブを考えたものにしたいと思います。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

エンジニアのポートフォリオを作ってみた

以前からポートフォリオサイトを作ってみたかったので今回作ってみました。

https://sssttt-maker.github.io/portfolio/
image.png

github.ioで公開できる最近まで知りませんでした。

デザイン

デザインは、僕の大好きなブランド会社のTOKYO BASEさんのホームページを参考にさせていただきました。
http://www.tokyobase.co.jp/

パララックスサイトみたいなのがかっこいいなと思ったので導入。
セクションが次々に動いていてとても気持ちいいです。

cssで

position: sticky;

というのをsection指定にして入れるだけで簡単に再現できちゃいます。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【スマホ】トップへ戻るナビを画面下部に固定する場合

画面を少しスクロールした後で「トップページへ戻る」アイコンを画面の下部にフェードイン表示させる。

この場合、Javascriptでウインドウの高さ・幅を取得した後、

CSSでアイコンの位置を、

style.css
top:ウインドウの高さ-70px
left:ウインドウの幅-70px

と設定していた。

スマホのブラウザ(AndroidのChrome、Operaで確認)はある程度下へスクロールするとアドレスバーが自動的に隠れる仕様になっている。
隠れる時(下へスクロールする時)は問題ないけど、再び表示されるとき(上へスクロールする時)に、アイコンの位置がずれることに気が付いた。

そこでウインドウサイズは関係なしで、シンプルにCSSへ
css:style.css
bottom: 70px;

と設定したところ、うまくいった。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

vscodeのmarkdown css変更メモ

初期のcssだと若干見づらいところがあるので、githubのcssに差し替えた際のメモ

github cssの取得

プレビューのcssを上記に変更

  • "markdown.styles": ["C:\Users\<ユーザー名>\.vscode\md_preview.css"] とするとプレビュー時のcssが変わる
    • C:\Users<ユーザー名>.vscode以下に置く必要はないけど、その方がわかりやすいかと

Markdown PDFのcssも上記に変更

  • C:\Users<ユーザー名>.vscode\extensions\yzane.markdown-pdf-1.4.1\styles\markdown-pdf.cssを上書きする
    • 念のため、元ファイルはリネームしておいた

参考にさせていただいたサイト

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Vue.JS】 WebPackを使わずにコンポーネントで遊ぶ

対象読者

  • 1. 環境構築はやりたくないけど、すぐにVueで遊んでみたい方
    • .vueファイルを使用する場合、WebPackサーバーなどの環境構築が必要となる
  • 2. 自分のPC上でとりあえず遊んでみたい方
    • ※ サイトとして公開する場合は環境構築が必要

サンプルアプリ

  • クリックすると赤色→緑色に変化するコンポーネントを作る

手法

  • .vueファイルを使わずに、全て.jsファイルで定義する
  • import文 , export文を使わずにコンポーネントを使用する
    • 通常のJavaScriptでimport文を使用するとエラーとなるため

作り方

フォルダ構成

  • 空のフォルダを作成し、その中に以下の4ファイルを作成する
    • フォルダ名は任意。ここでは sample_folder とした
フォルダ構成
sample_folder
    ┝ application.html
    ┝ application.js
    ┝ parent_vue.js   ← 自作のコンポーネントを記述する
    ┝ vue.js          ← CDNをダウンロードする(後述)

ファイル生成方法

  • 下記のソースコードをファイルごとに丸コピすれば動作します
  • 解説を見たい方
    • 各ソースコードの下に解説がございます

1. HTMLファイル

application.html
<!DOCTYPE html>
<html lang="js">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SampleApp</title>
</head>
<body>
  <div id="app">
    <!-- ② このdiv内で自作コンポーネントを呼び出している -->
    <parent-component></parent-component>
  </div>
</body>
  <!-- ① 同一フォルダ内のファイルをインポートする。-->
  <script src="vue.js"></script>
  <script src="parent_vue.js"></script>
  <script src="application.js"></script>
</html>
  • <script src="○○.js"></script>の部分

    • この部分で同じフォルダ内の.jsファイルを全て読み込む
  • ② 自作したコンポーネントを呼び出すために、<div id="app"></div>タグを作成する

    • このdivの外では、vueコンポーネントを使用できないことに注意
    • id名は何でも良いが、後述するapplication.js内で定義するid名と同名とする
    • <parent-component></parent-component>が自作したコンポーネントタグである
      • 上記のタグ名は何でも良いが、後述するparent_vue.js内で定義するコンポーネント名と同名でなければならない

2. JSファイル(コンポーネント呼び出し用)

application.js
var parent = new Vue({
    el: "#app",
    // application.htmlで定義したid名と同一にする
});
  • このファイルでVueインスタンスを生成する
    • el:には、application.htmlで定義したid名を書く

3. JSファイル(コンポーネント定義用)

parent_vue.js
// Vue.component('コンポーネント名', {定義}) の形式とする
Vue.component('parent-component',{
  template: 
  ` <div id="parent_root">
      <div v-bind:style="myStyle" v-on:click="changeColor">
        {{message}}
      </div>
    </div>
  `,
  // component内ではdataは関数として定義しなければならない
  data: function() {
    return {
        message: "Click! Me.",
        myStyle: {
          color: 'red',
          fontSize: '18px',
          "background-color": '#ebb',
          border: 'solid 2px',
        }
    }
  },
  methods: {
    changeColor: function(){
      console.log("checked.");
      this.message ='confirmed'; 
      this.$set(this.myStyle, 'color', 'green'); 
      this.$set(this.myStyle, 'color', 'green'); 
      this.$set(this.myStyle, 'background-color', '#beb'); 
    }
  },
});
  • このファイルでは、自作のコンポーネントを定義する
    • Vue.component('コンポーネント名', {定義})の形式とし、{ }内に記述する
    • コンポーネント名は、application.htmlで使用するコンポーネントタグと同名でなければならない

補足: templateの書き方(規則)

  • template:部分とは
    • htmlに相当する部分。下記2点を守ること
      • 1. template内では、初めと終わりをバッククォーテーションで囲うこと
      • 2. template内では、必ず単一の<div>タグで囲うこと
参考)templateの書き方
template:
  `<div>
    この中に、htmlタグを自由に記述する
  </div>`,

補足: Style(CSSに相当)の書き方

  • 今回の書き方では<style>タグが使用できないため、代わりに2つの手法を紹介する
    • 1. v-bind:styleを使用し、自作のスタイルをdata:内で定義する
      • 本記事ではこの方法を採用。myStyleとして定義している
    • 2. is属性を使用して、styleタグを偽装する
      • template内に一旦別名のタグを作成し、is属性でstyleタグとして機能させる
      • 方法はこちら

4. CDNファイル

  • Vue公式のCDNダウンロードサイトを開き、直接組み込みの章までスクロールする
  • 開発バージョンボタンをクリックし、ファイルをダウンロード
  • ダウンロードしたvue.jsファイルを上記のsample_folder内にコピーすれば準備完了
    • (記事上部のフォルダ構成の章を参照のこと)
    • 簡単!

動作

  • 作成したapplication.htmlをダブルクリックすれば、ページが表示されます

参考

  • Vue.JS入門
    • たにぐちまこと氏の "ともすたチャンネル" (Youtube)
    • 初心者にもわかりやすく説明されているため、オススメです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

bgsize

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Sassで出来ること【vol.2】入れ子(ネスト)・変数

Sass勉強中の為、出来ることを備忘録がてら纏めて書いていきます。

入れ子(ネスト)

scssでは要素を入れ子にすることが出来ます!
cssでこんなファイルがあるとします。

.css
.main-nav{
   display: flex;
   font-size: 1.5rem;
   text-transform: uppercase;
   list-style: none;
}
.main-nav li{
   margin-left: 30px;
}
.main-nav a{
   color: #000;
   display: inline-block;
   position: relative;
   text-decoration: none;
}

全く同じ内容をscssではこのように書くことが出来ます!

.scss
.main-nav{
   display: flex;
   font-size: 1.5rem;
   text-transform: uppercase;
   list-style: none;
   li{
      margin-left: 30px;
   }
   a{
      color: #000;
      display: inline-block;
      position: relative;
      text-decoration: none;
   }
}

一見そんなに変わらないのですが
例えば「.main-nav」の名前を変更する必要が出た際に記述し直す部分が一カ所だけになり、
メンテナンスやコードの再利用がとても楽になります。

プロパティのネスト

プロパティも入れ子にすることが出来ます。

.scss
p {
   margin-top: 10px;
   font:{
      color: #432;
      size: 15px;
   }  
}

コンパイルするとこの様になります。

変換後のcss
p {
   margin-top: 10px;
   font-color: #432;
   font-size: 15px;
}

これは普通に書いた方が分かりやすそうです。
scssでは入れ子に出来ますが、しなくても生成されるcssファイルは変わらないという点がすばらしいと思います。
他の出来ることについてもそうなのですが、都合の良い時だけ拡張機能を使えるイメージです。

変数

なんと、変数を使用することが出来ます!

変数の名前は$から始め、「:」で区切ります。
上から2行が変数宣言です。

.scss
$text_color: #333;
$top_margin: 20px;
p {
   font-color: $text_color;
   margin-top: $top_margin;
}
h1 {
   font-color: $text_color;
   margin-top: $top_margin;
}

コンパイルするとこの様になります。

変換後のcss
p {
   font-color: #333;
   margin-top: 20px;
}
h1 {
   font-color: #333;
   margin-top: 20px;
}

色やサイズ等、繰り返し使う値を宣言するととても便利です。
「ここの色、変更し忘れた!」とか「あの時使った色何だっけ?」と記述を探す時間が大幅に減りました。

リンク

Sassで出来ること【vol.1】Sassとは?
Sassで出来ること【vol.2】入れ子(ネスト)・変数
Sassで出来ること【vol.3】関数

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Sassで出来ること【vol.1】Sassとは?

CSSやHTMLの勉強をしている時にたまたま "Sass"(サース) に出会い、
「これは便利!」と感動したので備忘録がてらにSassについての記事を書きます。

Sassとは?

Sass : Syntactically Awesome Style Sheets

の略で日本語に訳すと「構分的にすばらしいスタイルシート」なのですが簡単に言うと、
「CSSをより効率よく記述することの出来る言語」です。
間違いなく普通にcssを記述するよりも、効率よく記述することが出来ます!

記法について

Sassには記法が2種類あります。

・拡張子が.sassの「SASS記法」

.sass
.hoge
  margin: 0 auto
  .huga
    color: #000

元々Sassは名前の通りこちらの記述方法だったようです。
インデントで依存関係を示します。rubyっぽいですね。

・拡張子が.scssの「SCSS記法」

.scss
.hoge{
  margin: 0 auto;
  .huga{
    color: #000;
  }
}

よりcssと記法が近く、括弧{}を入れ子にすることで依存関係を示します。
個人的には入れ子に出来るだけでもコピペから解放されて嬉しいのですが
SCSS記法はCSSの完全な上位互換となっていて、
CSSの書き方もそのまま使うことが出来てさらに様々な便利機能が追加されています。

記事ではこちらの「SCSS記法」でSassの出来ることを纏めていきたいと思います。

.cssファイルにコンパイル

変換後の.css
.hoge{
  margin: 0 auto;
}
.hoge.huga{
    color: #000;
}

.cssファイルにコンパイルすると
上のsass,scssファイル両方ともに同じ結果が出力されます。

環境構築について

scssファイルはcssファイルにコンパイルする必要があります。
なのでその為の環境を構築する必要があります。
というとすごく面倒くさそうですが自分は10分位で終わりました。

環境は様々ありますが、
自分は「Atom」というテキストエディタに「sass-autocompile」というパッケージを入れて使用しています。

Atomのsass-autocompileでSassのコンパイルをしてみよう
上記の環境の構築についてすごく分かりやすく解説してくれています。

コンパイルといってもscssファイルを保存すると、
自動でcssファイルを生成してくれるので全く手間になりません。

リンク

Sassで出来ること【vol.1】Sassとは?
Sassで出来ること【vol.2】入れ子(ネスト)・変数
Sassで出来ること【vol.3】関数

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【CSS】RGBとRGBAとopacity

RGB

:sunny: 3つの数字を組み合わせて表示する色を決める

【CSS】基礎 でカラーの指定は

・16進数のカラーコードで色を指定(#ff0000,#008000など)
・主要な色であれば直接色名を指定しても表示される(red,greenなど)

で2種類のカラー指定方法を記入したのですが、今回は RGB というものを追加:smile:

色彩の勉強をしたことがある人はこちらのほうが馴染みがあると思います。
RGBというのは・・・

R ・・・ RED の R
G ・・・ GREEN の G
B ・・・ BLUE の B

つまりは光の三原色と言われるものです:smile:

記入方法は

セレクタ {
 プロパティ: rgb(赤, 緑, 青);
}

今までであれば値のところを red としたり #ff0000 と記入すれば表示されたのですが、RGB で記入するときは rgb と記入し (赤, 緑, 青) の色の部分は数字を指定します。

たとえば背景色を赤にしたいのであれば

例.css
background-color: rgb(255, 0, 0);

というふうに記入します:smile:
背景色をオレンジにしたいときに RGB で表すならば

例.css
    background-color: rgb(243, 152, 29);

Web

スクリーンショット 2020-01-19 1.32.07.png

表示されました:laughing:

RGBA

:sunny: RGB で指定した色を透明にする

さきほど上記で RGB は光の三原色のことだと言いましたが
そこに A が加わることで透明度を指定することができます。
A は ALPHA値 の A で透明度を指定します。

使い方は簡単です:smile:

セレクタ {
 プロパティ: rgba(赤, 緑, 青, 透明度);
}

さきほどのRGBの最後に透明度を加えればいいだけです。
透明度の指定方法は

1.0(不透明)〜0(透明)

で指定します。
では赤いボックスを半透明の 0.5 にしてみますね:smile:

例.css
background-color: rgba(255, 0, 0, 0.5);

スクリーンショット 2020-01-19 2.03.56.png

左が不透明、右が半透明です。
RGBに透明度をプラスするだけで簡単に透明化できます:laughing:

RGBA と opacity のちがい

同じ透明化なら opacity でもいいじゃん:thinking: と思いますが明確な違いがあります。

RGBA ・・・ 指定した色のみ透明化する
opacity ・・・ 要素全体を透明化する

スクリーンショット 2020-01-19 2.16.45.png

左が RGBA で透明化、右が opacity で透明化したものです。
RGBA は指定した赤色のみ透明化されていますが
opacity は赤色だけでなく文字も透明化されているのがわかるかと思います。

なのでこの部分だけを透明化したいというときは RGBA
全体的に透明化したいというときは opacity
と使い分ければいいかと思います:laughing:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

忘年会のために作った昔のテレビみたいに画面遷移するJavaScript

僭越ながら、エヌシーアイ総合システム Advent Calendar 2019 20日目を担当させていただきます。
(投稿が1月中旬になってしまった…)
忘年会のために作ったJavaScriptについて書きます。
ちなみに全体が完成したのは忘年会前日深夜3時でした。

どんな感じで画面遷移するの?

ezgif.com-crop.gif

こんな感じで動きます。
遷移前と遷移後で同じページのように見えますが、別のページに飛んでいます
今や見る影もないブラウン管テレビってこんな感じだった気がします。

大まかな中身としては
 フェードアウトのアニメーション
 ページ移動
 フェードインのアニメーション

の流れになります。

フェードインのアニメーション

順番が逆になりますが、まずフェードインからです。
こちらはCSSだけで作りました。

style.css
body {
    animation: animate_in 1s ease;
}

@keyframes animate_in{
    0%{
        transform: scale(0.2, 0.01);
        opacity: 0;
    }
    70%{
        transform: scale(1, 0.01);
        opacity: 1;
    }
    100%{
        transform: scale(1, 1);
    }
}

@keyframes を使って動きを処理しています。
画面サイズと透明度を変えてそれっぽく見せています

フェードアウトのアニメーション

こちらが本題です。
リンクが押されるとアニメーションが起動するようにJavaScriptを書きます。
またアニメーション終了までページ移動を止める必要があります。

style.css
.animate_content{
    animation: animate_out 1s ease;
}

@keyframes animate_out{
    30%{
        transform: scale(1, 0.01);
    }
    70%{
        transform: scale(0.2, 0.01);
        opacity: 1;
    }
    100%{
        transform: scale(0.2, 0.01);
        opacity: 0;
    }
}
page_transition.js
$(function() {
    $('a:not([href^="#"]):not([target])').on('click', function(e) {

        // ページ移動を止めてURLを取得
        e.preventDefault();
        url = $(this).attr('href');

        // クラスを追加
        $('body').addClass('animate_content');

        // 980ms経ったらページ移動
        setTimeout(function(){
            window.location = url;
        }, 980);

        return false;
    });
});

アニメーションの1s(1000ms)が終わるまでにページ移動しないといけないので、980msで移動させています。
追加するクラス / 追加される属性 を簡単に指定できるので応用は効きそうな気がしますね。

終わりに

学生時代はJavaScriptを避けてきたので勉強しないとですね。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む