マークアップ

マークアップ

Flexboxを使いこなそう!-基本の書き方-

仕様も安定していそうだしそろそろ現状のブラウザのシェアのことを考えるとガンガン使ってもいいかなと思うFlexbox。 各プロパティが豊富すぎてよく調べてしまうことになるので、使い方をまとめてみようと思います。 今回はとりあず入門ということで要素を横に並べる方法をご紹介します。 Flexboxって? Flexboxとは、おおざっぱに言うと要素を簡単にレイアウトできるCSS3の新しい要素です。 今までは可変要素を同じ割合で並べたいときはcalcで計算。 横並びになっている複数個の […]

マークアップ

YouTubeの埋め込み動画をYouTube Player APIでコントロールしよう!

こんにちは、工藤です。 今回はYouTubeの埋め込み動画をjsでコントロールする方法をご紹介します。 例えば埋め込みの際に『自動再生にした時にミュートにしたい』なんて場合はただ埋め込みではできないのでこちらの方法で実現させます。 IFrame Player APIを読み込ませよう まずjsを読み込みます。 以下は直接htmlの方に記述できる方法 またはjsの方で読み込ませる方法もあります。 お好みの方でどうぞ。 youtubeにアップした動画を表示させる 次にyoutube […]

マークアップ

様々なタブの切り替えを簡単に実装!Tabsletを使おう

割と使うタブの切り替え。 単純なものであれば自分でもコードを覚えれば書けないこともないのですがもうちょっと様々な効果を使ってみたい…なんて時もあります。 そんな時に役立つのが『Tabslet』です。 使い方 とりあえずダウンロードしましょう。下記サイトから『DOWNLOAD』ボタンでダウンロードしてください。 Tabslet ダウンロード後はcssとjsを読み込ませます。 ダウンロードしたフォルダにある『jquery.tabslet.js』とdemo>stylesheetsフ […]

Webデザイン

フリーで使えるwebフォント「Google Fonts」を試してみました

こんにちは、工藤です。 今回はフリーで使えるwebフォント「Google Fonts」を試してみました。 Noto Sansは結構お世話になっているのですが、よく考えると他のフォントはきちんと試したことが無かったもので…。 以降の画像は上段は通常のウェイト、下段は800のウェイトをかけています。 なんとなく表示の参考になりましたら幸いです。 Google Fonts + 日本語 早期アクセス M+ 1p フリーフォントでおなじみM+ 1pです。ちょっと角ばったゴシック体です。 […]

マークアップ

SVGとCSSを使って複雑な形のボタンのhoverを設定する

リンクやボタンにマウスオーバーの動きを設定する際、CSSアニメーションを利用するのもすっかりと一般的になりました。 ここで問題になってくるのが、透過画像にアニメーションを設定すると、一件図形の範囲外である透過部分でもhoverの判定がされてしまいます。 透明チェック部分にマウスカーソルを当てると、アニメーションが出てしまう。 PCから動作を確認してください。 別タブで表示 これをimgではなく、SVGのpathやpolygonに設定すると、無事解決することが出来ます。 SVG […]

マークアップ

HTMLに「role属性」を付与してWebアクセシビリティの向上を目指す

今日は、HTML5より正式に採用された「role属性」について書きたいと思います。 role属性とは role属性は、このように使用します。 見ればどういったものかなんとなく分かると思いますが、この場合はdiv要素に対して「ナビゲーション」の意味を付与しています。 では、実装する必要はあるのか 2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されました。「障害を理由とする差別」の解消に努めるという主旨の施策なのですが、その中に「情報アクセシビリティ」も […]

マークアップ

コンテンツを魅力的に演出できるjQueryプラグインのまとめ2

こんにちは、工藤です。 今回はコンテンツを魅力的に演出できるjQueryプラグインのまとめの2です。 [前回] コンテンツを魅力的に演出できるjQueryプラグインのまとめ Enllax.js   パララックス効果を得られるプラグインです。 このプラグインの特徴は画像などの前景と背景を簡単な指定で再現できるところです。 軽量ですし、使い勝手のいいプラグインかと思います。 ScrollMagic    こちらもスクロール位置をトリガーにアニメーションをしてくれるパララックス効果 […]

マークアップ

知っておくと便利なcssの小技 part9

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part9です。 バックナンバー 知っておくと便利なcssの小技 part8 知っておくと便利なcssの小技 part7 知っておくと便利なcssの小技 part6 ナビをhoverしたときに、中央から線を出す ナビなどをhoverしたときに、テキスト下部の中央から線が表示されるあれです。 なんとなくおしゃれになります。 ソースは一見複雑そうですが、登録しておけばちょっとだけ値などを変えるだけで簡単に […]

マークアップ

知っておくと便利なcssの小技 part8

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part8です。 バックナンバー 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 知っておくと便利なcssの小技 part7 テーブルを均等配置にしたい テーブルを特にサイズ指定することなく、幅を全部均等にしたい!という時に便利なcssです。 thやtdなどに指定するわけではなく、そのままtableに対して『table-layout: fixed;』を設定してし […]

マークアップ

オブジェクトを生成する関数を作ろう CreatJS

その他の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2 === 基本的な、オブジェクトの生成からトゥイーンモーションをまで設定する方法を作成しました。今回は、オブジェクトを生成する関数をinit関数の外に出して、何度でもパーツ化する手法を記事にしたいと思います。 今まではinitの中にあったものをinit関数の外に […]

マークアップ

トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その2

前回の記事はこちら↓ トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1 === 前回はオブジェクトを生成してアニメーションさせるところまでを記事にしましたが、実際に使用するにはもっとたくさんのオブジェクトが必要で、複雑なアニメーションが求められると思います。では、複数のオブジェクトを作るにはどうするか。今回はそちらを書いていきたいと思います。 単純にオブジェクトを複数作ると… まずオブジェクトを1つ作る場合はこうでしたね。 単純 […]

マークアップ

トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1

後学のためにトレンドのJSを調べていたのですが、 jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。 CrateJSとは? CreatJS こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理を繋げることができます。 イージングもききます。アニメーションをループさせることもできます。 もうひとつ大きいのが、トゥイーンモーションが使えます。 過去にFlashでアニメーション […]

マークアップ

グラフを描画できるライブラリのまとめ

こんにちは、工藤です。 今回はグラフを描画できるライブラリをご紹介します。 vis.js ネットワーク図を引っ張った時の動きが面白くて個人的に好きです。 あまりに複雑なものでなければアニメーションもサクサク動きます。 D3.js   かなり自由度が高いライブラリらしく、とにかくサンプルの数が豊富にあります。 慣れている人は自分で細かい作りこみもできそうですね。 cola.js サンプルはネットワーク図のようなものが豊富な印象です。 ブラウザ上で数値など変更して確認できるのが便 […]

マークアップ

知っておくと便利なcssの小技 part7

こんにちは、工藤です。 今回は個人的に知っておくと便利だなと思うcssの小技part7です。 今回はリセット系の2つです。 バックナンバー 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 知っておくと便利なcssの小技 part6 safariのようなwebkit系のモバイル用ブラウザのフォーム要素をリセット safariのようなwebkit系のモバイル用ブラウザだと、input等のフォーム要素のデフォルトのデザインが強く残ってしまい、 […]

マークアップ

jQueryしか使えないデザイナーが流行りのReact.jsでHello Worldしてみる。

React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。 React.jsが来るらしい jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならないんだなと感じました。 しかし、時間は待ってくれないので、もうHTMLにソースを書いてみようと思い […]

マークアップ

【jQuery】〇月×日△時になったら表示を切り替えたい

例えばキャンペーン応募受付が夜中の0時までなので、その時間ピッタリにリンクを削除して、終了のメッセージを出したい。しかしその時間には寝ていたい、そんなとき。 「〇月×日△時になったら表示を切り替える」jsを組み込んでみましょう ※ただjsなので、厳密にソースを見られるとリンク先などがバレてしまいます。朝起きたらちょいと書き換えるくらいの温度感で済む場合なんかにご利用ください。 ※もうひとつ。画面を読み込んだタイミングでのみ動作します。表示中に時間が経過しても、リロードしないと […]

マークアップ

コンテンツを魅力的に演出できるjQueryプラグインのまとめ

こんにちは、工藤です。 今回は背景を魅力的に見せてくれるjsについてまとめてみました。 covervid   背景いっぱいに動画を表示してくれるプラグインです。 動画を使用するのにすごく軽量なところが魅力的です。 particles.js   幾何学模様を背景に表示してくれるプラグインです。 マウスの動きに合わせて幾何学模様が動いてくれてちょっと楽しいです。 模様の点の数や動きの等もカスタマイズが可能です。 StickyStack   複数のグラデーションが重なり合う背景を作 […]

マークアップ

【2017年版】CSSジェネレーターのまとめ

こんにちは、工藤です。 今回はCSSジェネレーターのまとめ2017年版です。 コーディングの際にいつも本当にお世話になっています…。 グラデーション Ultimate CSS Gradient Generator シンプルながらも使い勝手がよいジェネレーターです。 Blend 2色を選択して、中央の『Let’s Blend!』をクリックするとグラデーションが出来上がります。 右上のアイコンからコードの取得やグラデーションの設定を行うことができます。 動きが面白くて […]

マークアップ

コピペ可!CSSだけでレスポンシブテーブルをつくろう

こんにちは工藤です。 今回はレスポンシブのテーブルの組み方の1例をご紹介します。 PC表示の時はこんな感じです。 PC表示の時 今回はちょっと扱いに困るthead部分について、こんな感じで表現してみます。 スマートフォン表示の時 tbody内のtdの箇所に、theadの項目を表示させてみました。 ソースは下記のようになります。 ソースコード html css ポイント レスポンシブ時にtheadは非表示にします。 tbody内thとtdはブロック要素にして、幅を100%に設定 […]

マークアップ

WEBブラウザからプッシュ通知を送信 【Push.js】の使い方

2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。 確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。 ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。 調べたところ、なんと便利なjsライブラリが存在するそう […]

マークアップ

スマートフォン用メニューのjQuery/CSS3プラグインまとめ【2017年版】

こんにちは、工藤です。 今回はスマートフォン用メニューのプラグインをまとめました。 実用的なものから動きが面白いなと思ったものまで様々です。 アコーディオンメニュー slicknav 個人的にかなりお世話になっている『slicknav』です。 デバイスごとの不具合が少なく、カスタマイズもしやすく重宝しています。 こちらの特徴は、ブレイクポイント以下になると指定した要素を複製してくれるところです。 例えば『#mainnavi』を指定していると、その中の要素をブレイクポイント以下 […]

マークアップ

社会人のための三角関数復習[基本編]

前回書いた扇形状にアニメーションする記事、非常に残念な動きをしています。無念としか言いようがありません。 これを機におさらいをしてみようと、過去の薄れかけている記憶を呼び覚まし、高校数学の「三角関数」を調べてきました。 円弧上の点の座標を求める必要がある場合、これの理解がもう必須なんですよね。「Math.sin(x)」とかで値だけ出すことは可能なのですが、そもそも関係を理解していないと正しく関数を組めません。 sin、cos、tanの基本の公式 このような直角三角形の場合、三 […]

マークアップ

svgで扇形を書きたかった。

勉強も兼ねて、円グラフのようにぐるっと描写するjsを書きたかったのですが、どうにもうまくいきませんでした。。 角度の計算がおかしいんだろうなと思うのですが、どうにも数学が苦手で、もう少し調査してリベンジしたいです。 単純に90度ごとだととても簡単なのですが、終点の座標が曲線の部分にかかってくると三角関数が関わってくるので数学が苦手な人間にとってはとても大変なんですよね。 このソースコードだと、こんな図形になります。90度の単純な扇形。 pathタグの「d=”M 0 […]

マークアップ

知っておくと便利なcssの小技 part6

こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part6をご紹介します。 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 知っておくと便利なcssの小技 part5 括弧付きの数字リスト 単純に数字だけではなく、括弧付きでリストを作りたいときはありませんか? そんな時に使える方法です。 今回のポイントはcounter-incrementプロパティを使うことです。 まずliにcounter-incrementでカウ […]

マークアップ

知っておくと便利なcssの小技 part5

こんにちは、工藤です。 個人的に知っておくと便利だなと思うcssの小技part5をご紹介します。 今回はレスポンシブ関連のものです。 知っておくと便利なcssの小技 part1 知っておくと便利なcssの小技 part2 知っておくと便利なcssの小技 part3 知っておくと便利なcssの小技 part4 ウィンドウサイズによってテキストを改行させたい レスポンシブの時、例えばテキストをPC表示の時は改行させてスマホ表示の時は改行を解除したい、なんて時に使える方法です。 便 […]

1 2 3 4 5 6