【SEO対策】itemtype、itempropの調べ方【schema.org】
————————– 前回の記事 → 「【SEO対策・schema.org】itemscope、itemtype、itempropの基本」 基本についてはこちらの記事をご一読ください。 ————————– 今回は「自分のサイトに合うitemtype、itemprop […]
投稿者: 森島
【SEO対策・schema.org】itemscope、itemtype、itempropの基本
—————————– 続編の記事を公開しました→「【SEO対策】itemtype・itempropの調べ方【schema.org】」 —————————– HTML5より、新しいプロパティが追加されました。（実質HTML4でも使えます） i […]
バナー・メインビジュアル デザイン集
今回はバナーとメインビジュアルを集めました。 個人的には、人物モデルの写真を組み合わせて作るデザインが気に入っています。 普段から、勉強も兼ねてこのデザインいいなと思った時には手元にデザインを残していたりします。
jQueryしか使えないデザイナーが流行りのReact.jsでHello Worldしてみる。
React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。 React.jsが来るらしい jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならないんだなと感じました。 しかし、時間は待ってくれないので、もうHTMLにソースを書いてみようと思い […]
【jQuery】〇月×日△時になったら表示を切り替えたい
例えばキャンペーン応募受付が夜中の0時までなので、その時間ピッタリにリンクを削除して、終了のメッセージを出したい。しかしその時間には寝ていたい、そんなとき。 「〇月×日△時になったら表示を切り替える」jsを組み込んでみましょう ※ただjsなので、厳密にソースを見られるとリンク先などがバレてしまいます。朝起きたらちょいと書き換えるくらいの温度感で済む場合なんかにご利用ください。 ※もうひとつ。画面を読み込んだタイミングでのみ動作します。表示中に時間が経過しても、リロードしないと […]
WEBブラウザからプッシュ通知を送信 【Push.js】の使い方
2017年のトレンド予測で「ネイティブアプリが減少、WEBアプリケーションに移行が本格化」というものがありました。 確かにAndroidとiOSで言語も異なるし、開発コストはいつもよりかかるし、ARなどの複雑な内容でなければわざわざネイティブアプリを作る必要はありません。 ネイティブアプリは少し前までプッシュ通知が送信可能という大きな利点を持っていたのですが、ついにWEBブラウザでもプッシュ通知が可能になりつつあります。 調べたところ、なんと便利なjsライブラリが存在するそう […]
人物の写真を補正する
今回は人物のレタッチを紹介していきます。 使用するのはこちらの写真。 ヘアスタイルを修正 まず、看護師さんなので髪をまとてもらいましょう。 必要な箇所を選択し、切り抜いていきます。 とびでている髪の毛なんかも、除外してしまいましょう。 清潔感が欲しいので、耳を出します。 他の写真から耳を切り抜いて、色調を補正し、合成します。今回はカラーバランスで調整しました。 耳合成しました。これでヘアスタイルは完了です。 服や小物の色を調整する 聴診器がおもちゃみたいな色なので、調整します […]
写真を美しく補正する
案件によっては、撮影などの機会がなく、担当の方が撮った写真を素材としてデザインをまとめるという状況も多々あります。 その時に少しでも写真が美しく見えるよう、写真の補正や簡単なレタッチを行うことがあります。 そのうちによくやる補正の方法をいくつかご紹介したいと思います。 photoshopでどんどんこなしていきましょう。 全写真共通 写真の輪郭をくっきりさせる 室内の写真なんかでありがちな、トーンカーブやレベル補正ではちょっと足りないという時に最適です。 今回はこの写真を使用し […]
社会人のための三角関数復習[基本編]
前回書いた扇形状にアニメーションする記事、非常に残念な動きをしています。無念としか言いようがありません。 これを機におさらいをしてみようと、過去の薄れかけている記憶を呼び覚まし、高校数学の「三角関数」を調べてきました。 円弧上の点の座標を求める必要がある場合、これの理解がもう必須なんですよね。「Math.sin(x)」とかで値だけ出すことは可能なのですが、そもそも関係を理解していないと正しく関数を組めません。 sin、cos、tanの基本の公式 このような直角三角形の場合、三 […]
svgで扇形を書きたかった。
勉強も兼ねて、円グラフのようにぐるっと描写するjsを書きたかったのですが、どうにもうまくいきませんでした。。 角度の計算がおかしいんだろうなと思うのですが、どうにも数学が苦手で、もう少し調査してリベンジしたいです。 単純に90度ごとだととても簡単なのですが、終点の座標が曲線の部分にかかってくると三角関数が関わってくるので数学が苦手な人間にとってはとても大変なんですよね。 このソースコードだと、こんな図形になります。90度の単純な扇形。 pathタグの「d=”M 0 […]
GIFアニメは次世代へ！動くpng画像、apng形式の作り方
（動かない場合、firefoxまたはChromeで確認すると動きます。） 上記の画像はapng形式のアニメーション画像。 gifアニメーションと違い、アルファ情報を含めることもできます。ファイルサイズもgifアニメと大差はないとのこと。 いつの間にかLINEクリエイターズスタンプにてapngの取り扱いも開始していて、今後アプリの作成なんかではどんどん主流になっていくと思うので今のうちに作り方を確認しておきたいと思います。 フリーソフトを使って作成します。 2016年11月現在 […]
水彩のデザイン素材 7点
練習も兼ねて、水彩のデザイン素材を作ってみました。 photoshopで作りました。商用可です。 ダウンロードはこちらから ピンクの丸 青い丸 みどりの丸 コーヒー豆 グルメなかんじ 歯医者
まだ必要？ベンダープレフィックスまとめ
日々めまぐるしく進化していくWeb技術。Webブラウザ達もアップデートを重ねるごとに便利になっていきます。 数年前はFirefoxやChromeで必須だったベンダープレフィックスも、そろそろ必要ないものもでてきているのではと思い、勉強も兼ねて改めて調べ直してみることに。 ※下記は全て2016年07月12日時点のものです。 opacity まずは簡単なのから。懐かしいですね。IE8の全盛期、悩まされたものですね。 過去のIE達に特別に対応するのでなければ、ベンダープレフィックス […]
【 content:attr() 】CSSでタグのdata属性やtitle属性を取得して表示する
CSSの、 :after 疑似要素で同時に使用される content プロパティ。 「content:attr();」という記述でそのタグのhref属性やtitle属性が取得できます。応用すればjsやPHPと絡めて動的で様々な使い方ができるなと思い、簡単にどんなことが可能か試してみたいと思います。 基本の使い方 これは色々なサイトで紹介されていますが、基本の使い方です。 aタグのhref属性をattrで取得し、リンク先URLを表示してみます。 HTML CSS 表示結果 ・C […]
【CSS】マウスオーバーで画像がﾆｭｯと拡大するエフェクトをつける
口で説明しづらいのですが、最近よく見かけるこれです。 ↓ マウスカーソルあわせてみてください。 マウスオーバーのエフェクトなので、スマフォからは見れませんが、PCでマウスを乗せるとボタンの画像がﾆｭｯと拡大するエフェクトがついています。jsかと思いきや、CSSでも簡単に付けることができます。 ざっくり説明すると、ﾆｭｯとしたい画像をdivなどでくくって、「:hover」した際に画像のscaleを大きくするという手順です。 HTML CSS 親要素のdivには overflow […]
【CSS】Webでマルチカラムレイアウトが可能に
雑誌の組版でよくある、マルチカラムレイアウト。Illustratorなどではテキストボックスを2つ作ってスレッドテキストリンクという機能で繋げれば、長い文章は自動で次のカラムへ文章が送られます。 Illustratorのスレッドテキストリンク機能。文章が隣のカラムに送られているのが分かります。 今までWebでは、文章は手動でカラム分けしなければいけなかったのですが、なんと気が付いたらCSSでマルチカラムレイアウトの設定が可能になっていました。 対応ブラウザ おなじみの Can […]
（DTP）2色分解画像のつくりかた
特色印刷ってご存知でしょうか。 通常の印刷ではCMYKの4色のインクを使用しますが、それ以外にも様々なインクの種類があります。 DICやPANTONEなどのインクを「特色」と呼びます。蛍光インクや白インクなんかも特色ですね。CMYKの4色では出せない風合いの色味が出せたり、面白い仕上がりになります。 そしてこの印刷手法、ものによってはインク代の節約になったりします。印刷所さんで取り扱いがあるか確認は必須ですが、単純に4工程になるCMYKより、2工程で済む方が手間もインクの量も […]
また新しくなったGoogle MAP、埋め込み表示の縮尺を変更する
Google MAPのインターフェースが一新されたのも記憶に新しいかと思います。その後も各種機能がハンバーガーメニューになったりと、度々変更が加えられておりましたが、気がつくと、GoogleMAPの「マップの埋め込み」機能も少々勝手が変わっていました。 URLが見慣れない形に 通常のGoogle MAPを開き、住所や建物名で検索し、「共有」から「地図の埋め込み」でマップを自分のサイトへ張るためのソースコードが取得出来ます。ここまでは今まで通りですね。 下記は当社の位置表示なの […]
Chromeでpage-breakが効かない
今回は印刷対応 print.css について。 Webページを印刷する際、地図や図版が紙面の途中で切れて印刷されないように、CSSの「page-break」を設定すると改ページを行うことができるのですが、これがどうしてもChromeで効かない現象が起きます。page-break-after、page-break-before、どちらにも共通して行える対策なので、一度試してみて下さいね。 現象が起きるHTMLデモ 現象を確認できるHTMLを用意しました。画面右部の「コンテンツ」 […]
様々な雰囲気を演出する活字風文字の加工チュートリアル
今回は活字風の文字の加工を行うチュートリアルです。エッジに潤いのある加工で、シリアスな雰囲気を出したい、温かみを出したい、様々な雰囲気の演出に使用できます。 ビットマップデータのみで良い場合は、photoshopだけで済みます。パスデータにしたい場合は、Illustratorでひと手間加えると綺麗なパスが出来上がるので試してみて下さいね。 手順 ざっくり説明すると、以下のカンタン4手順。 ・文字ツールで文字を作成 ・文字をラスタライズ ・フィルタ効果：はね ・フィルタ効果：ス […]
【怖くないJavaScript + jQuery】if文のいつもと違った使い方
今回は、条件分岐について。 条件分岐と言えば、if文で書いてしまうのが一番シンプルな形ですが、今日はいつもと少し違った使い方をご紹介します。 まずクリックするとランダムで値を吐くボタンを作ります。 ▼ボタンをクリックすると0~100までの点数が表示されます。 クリック 例えば、この結果に応じて下記のコメントを表示させるとします。 ・0～29点の場合は”初心者” ・30～49点の場合は”中級者” ・50～79点の場合は” […]
【怖くないJavaScript + jQuery】要素の数に合わせて値を自動で付与する
今回は、要素の数に合わせて値を自動で付与します。例えばliの数を数えて、widthを割り振ったりなど様々な事に応用が可能です。CMSが入っていて要素の数が可変の際、「要素を数える」という処理を行ってみましょう。 デモはこちら まず下準備 まずこちらはいつも通り、必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は count.js とします）を読み込みます。 Step2:次にHTMLの準備 今回は、全体を囲むd […]
【怖くないJavaScript + jQuery】画像の縦横比を保ったままサイズを変更する処理
画像の縦横比（アスペクト比）を保ったまま、サイズを変更したい。「印刷対応が必要な場合」「常にwindowサイズ-150pxで拡大表示したい場合」など、訳ありでとあるサイズにjsで拡大縮小する処理を紹介します。 下準備 jQueryと、自分で作ったjavascriptのファイル（今回は aspct.js とします）を読み込みます。 縦横比を調べるには？ 画像の縦横比を調べるには、当たり前なのですが、画像の横幅と縦幅を取得して「横幅÷縦幅」の計算をすれば簡単に割り出すことができま […]
【怖くないJavaScript + jQuery】デバッグのススメその2 ～デバッグクイズ：初級編～
明けましておめでとうございます。本年もどうぞよろしくお願い致します。 皆様仕事始めも無事迎えられたようで、如何お過ごしでしょうか。週も半ば、エンジンはかかりましたでしょうか。渋谷は生憎のお天気ですが、今日も張り切って参りましょう。 さて、今日は前回に引き続き、javascriptのデバッグについて書いていきたいと思います。 デバッグのやり方は分かったはいいものの、実際にやってみないとどんな風に使うものかピンとこないと思います。今回はクイズ形式で見て慣れていってもらいましょう。 […]
【怖くないJavaScript + jQuery】デバッグのススメ ～なぜ動かないのか調べる～
jQueryのコードを見よう見まねで書いてはみるものの、動かず、そして結局諦める。初心者の方ならよくあることかと思います。今日は「なぜ動かないのか」を調べる方法を書こうと思います。デバッグの方法ですね。書いたコードのどこがおかしいのか調べて、直してみましょう。 方法は2つ デバッグの方法ですが、2つあります。アラートで出してしまうか、コンソールを使用する方法です。私は、一か所だけちょっと調べたい時とかはアラート、複数個所あったりする時はコンソール、と使い分けています。 01 […]
