投稿日：2020-01-19T23:27:41+09:00

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

はじめに

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

レスポンシブとは

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ページはレスポンシブを考えたものにしたいと思います。

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T22:06:44+09:00

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

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

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

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

デザイン

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

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

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T22:06:03+09:00

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

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

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

CSSでアイコンの位置を、
style.css
top:ウインドウの高さ-70px
left:ウインドウの幅-70px
と設定していた。

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

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

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T22:05:01+09:00

vscodeのmarkdown css変更メモ

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

github cssの取得

https://github.com/sindresorhus/github-markdown-css ダウンロードしてくる

「.markdown-」を「（空白）」にリプレースする

「」はいらない。念のため

プレビューの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を上書きする

念のため、元ファイルはリネームしておいた

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

参考というか、もうそのままですね。ありがとうございました。

https://qiita.com/08thse/items/205eea7ed85188ae38bf

https://qiita.com/__mick/items/c80fab6c185a41882880

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T21:25:26+09:00

【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">
    
    <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)

初心者にもわかりやすく説明されているため、オススメです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T19:58:19+09:00

bgsize

http://www.htmq.com/css3/background-size.shtml

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T19:09:42+09:00

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ファイルは変わらないという点がすばらしいと思います。
他の出来ることについてもそうなのですが、都合の良い時だけ拡張機能を使えるイメージです。

変数

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

変数の名前は$から始め、「：」で区切ります。
上から２行が変数宣言です。
.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】関数

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T19:06:47+09:00

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

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

Sassとは？

Sass :　Syntactically Awesome Style Sheets

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

記法について

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

・拡張子が.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】関数

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T15:34:45+09:00

FileMaker の DDR を見やすくする JavaScript

簡単な JavaScriptファイルをひとつ追加して、DDR（データベースデザインレポート）の可用性を向上させてみました。もちろん DDRを基にした FileMakerアプリ解析ツールは様々あるのですが、そこまでの大分析が目的ではなくて、WEBブラウザ利用はそのまま軽く閲覧と検索をしたいのだけれど、デザイン的な不便さを何とかしたい、という用途のものです。このツールで変わる事スクリプトステップの行番号を表示するようになるよ。スクリプトステップ内の式や、カスタム関数が、コードそのまま表示になるよ。スクロールしても、スクリプト名が常に表示されるので、迷子にならないよ。前後のスクリプトへ移動するナビゲーションを除去したよ。行番号を表示し、式や関数はそのまま表示 FileMakerのステップは行番号が表示される（Pro 14～）ものの、DDRではリストスタイルが標準の黒丸「list-style-type: disc」のため、分析時に何行目なのか即座に判らないままです。このスタイルを「list-style-type: decimal-leading-zero」に変え、行番号を出すようにしました。また、ステップ内の式を、記述そのまま（<pre>）の表示にすることで、1ステップ1行に強制されず読み下ししやすくなり、素早い箇所の特定に役立つようになります。こっちもスタイル「white-space: pre」を追加しただけです。 before 行番号が判らず、計算式を指定されているステップ行では式が改行されておらず読めません...? スクリプト名も判り難いと思います。 after 行番号が判るだけでなく、オプションの計算式は記述したとおりに確認できるようになりました。? インポートステップなども、行展開されて表示されます。 before カスタム関数カタログも、これではどんな式なのか判らない...? after こうなります。? 引っ付いてくれば迷子にならないスタイル「position: sticky」を使って、スクロールしていても、スクリプト名などがウィンドウ上部に常に固定表示されるようにしました。 ※ Chrome、Firefox のみで機能します。 before 検索ハイライトされている箇所が、何というスクリプトの何行目なのかさっぱり判らない。? after スクロールダウンしていても、表示箇所のスクリプト名と行番号が判ります。? 前後のスクリプトと上位フォルダへの移動ナビゲーション除去個人的にこのナビゲーションを機能的に利用したことがなく、何より WEBブラウザでスクリプト名で検索した時に余計に検知されるので、要素そのものを除去（jQuery「$(elements).remove()」）しました。 before このように、スクリプト名で検索した時に、余計にハイライトされ、検索結果数も正確でなくなってしまいます。? ダウンロードこのリンク先を保存してください。使い方【注意】 CDNでホストされている jQueryを参照しているので、インターネット接続が必要です。オフラインで利用する場合は、jQueryも別途ダウンロードして、代わりに参照させてください。 DOM操作だけを行うのが目的なので、jQueryでいいでしょう。【手順】 DDRをHTMLで生成する。 Summary.html（概要.html）の階層に本JSファイルを置く。各「{{FileMakerファイル名}}_ddr」サブフォルダの「{{FileMakerファイル名}}.html」内の適当な位置に以下のスクリプトタグのリンクをつける。あとは、ブラウザでページをリロードするだけです。 {{FileMakerファイル名}}.html ... <script src="../ddrfix.js"></script> </head> ... ご意見、改善点などございましたら、ぜひフィードバックをください。

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T02:29:06+09:00

【CSS】RGBとRGBAとopacity

RGB

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

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

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

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

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

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

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

記入方法は
セレクタ {
　プロパティ: rgb(赤, 緑, 青);
}
今までであれば値のところを red としたり #ff0000 と記入すれば表示されたのですが、RGB で記入するときは rgb と記入し (赤, 緑, 青) の色の部分は数字を指定します。

たとえば背景色を赤にしたいのであれば
例.css
background-color: rgb(255, 0, 0);
というふうに記入します
背景色をオレンジにしたいときに RGB で表すならば
例.css
    background-color: rgb(243, 152, 29);
Web
↓

表示されました

RGBA

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

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

使い方は簡単です
セレクタ {
　プロパティ: rgba(赤, 緑, 青, 透明度);
}
さきほどのRGBの最後に透明度を加えればいいだけです。
透明度の指定方法は

1.0（不透明）〜0（透明）

で指定します。
では赤いボックスを半透明の 0.5 にしてみますね
例.css
background-color: rgba(255, 0, 0, 0.5);
左が不透明、右が半透明です。
RGBに透明度をプラスするだけで簡単に透明化できます

RGBA と opacity のちがい

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

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

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

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-01-19T00:44:59+09:00

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

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

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

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

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

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

順番が逆になりますが、まずフェードインからです。
こちらは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を避けてきたので勉強しないとですね。

　 Tweet
Qiitaで続きを読む

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

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

はじめに

レスポンシブとは

レスポンシブの導入

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

CSSに指定する

まとめ

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

デザイン

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

vscodeのmarkdown css変更メモ

github cssの取得

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

Markdown PDFのcssも上記に変更

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

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

対象読者

サンプルアプリ

手法

作り方

フォルダ構成

ファイル生成方法

1. HTMLファイル

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

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

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

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

4. CDNファイル

動作

参考

bgsize

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

入れ子(ネスト)

プロパティのネスト

変数

リンク

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

Sassとは？

Sass : Syntactically Awesome Style Sheets

記法について

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

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

環境構築について

リンク

FileMaker の DDR を見やすくする JavaScript

【CSS】RGBとRGBAとopacity

RGB

RGBA

RGBA と opacity のちがい

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

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

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

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

終わりに

日付別

タグ一覧

Sass :　Syntactically Awesome Style Sheets