せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
ロゴのデザインに独創性があるか、パクリじゃないか、Webサイトやスマホでどう見えるか検証できるオンラインツール -TWM Logotester
せっかく作成したロゴに似たデザインのものがあったり、Webサイトやスマホアプリで見栄えがよくなかったら、がっかりです。 ロゴのデザインに独創性があるか、他に似たロゴはないか、Webサイトやスマホアプリでどう見えるか、モノクロでも大丈夫か、色数は多すぎないかなどを検証できる無料オンラインツールを紹介します。
一般社団法人more trees
more trees（モア・トゥリーズ）は、音楽家・坂本龍一が創立した森林保全団体です。森と人がずっとともに生きる社会を目指し、「都市と森をつなぐ」をキーワードにさまざまな取り組みを行っています。 人類は森とともにありました。 森が崩壊したところでは 文明が滅んでいきました。 今、世界中で森林が崩壊しています。 これは人類文明全体の滅びへの警告と 言えるのではないでしょうか。 実は日本は森林の多い国です。 たくさんCO2を固着し、また水を保ち、 多くの生命を養い、 はたまた海まで育ててくれる貴重な森を、 後々の世代まで残すために力を合わせましょう。 more trees!! 創立者 坂本龍一 友人であり、最も敬愛する芸術家であった 坂本龍一さんの跡を継いで、 more treesを率いることになり、 大きな責任を感じています。 単にmore treesという組織のバトンを 「教授」から渡さ
マウスオーバーで常にカーソル位置を向いて変形する3Dアニメーションサンプル
今回のTipsは、ある要素のマウスオーバー時にその要素が常にマウスカーソルの位置の方向を向いて目で追ってくるような、視差効果を伴った3次元アニメーションのコーディングサンプルをご紹介します。 まずは以下の完成イメージで表示された画像をマウスオーバーでぐりぐり動かしてみてください。 See the Pen 3D hovering motion with chasing cursor by digistate (@digistate) on CodePen. HTMLの基本構成 今回のサンプルでは、WordPressテーマにおけるアーカイブページの記事一覧用のレイアウトを想定して、各記事にあたるarticle要素と、その中には記事タイトル、記事概要、寄稿者名を適当に入れてみました。 各記事は全体が画像として表示されていますが、これはimgタグではなくbackground-imageでdiv要素
body内のstyle要素が一定条件下で再びエラーに - webのあれこれ
head内限定だったstyle要素の記載がHTML5.2からはbody内にも書けるようになりました ということで私のその件を記事にしております。 ところがW3C validatorでbody内style要素が再びエラー対象に。その理由と解決策など。 html5.2ではstyle要素をbody内に書けるようになりました 意味わからへーん！な方とそうでない方といらっしゃると思いますけれども、結構重要だと思いますので記しておきます。 html5.2が既に正式勧告を済ませてますが、追加要素や廃止要素などに加え style要素をbody内に書くことがinvalidではなくなりました * invalid (インヴァリッド) = 無効, 正しくない の意... CSSの記載の仕方は複数あります FC2ブログの特徴などを絡め、style要素の扱いの歴史をざっと説明します。 まず style要素 が何なのか
通常はスライダーで表示していない部分をスマホの時だけスライダーに変更する方法 | YARUMAE
スマホで表示する時だけスライダーで表示したいというご要望があったため、調べたところSlickというプラグインで実現できました。今回はその方法と簡単な解説をさせて頂きたいと思います。 Slickのダウンロードと使用方法についてはこちらから。 function sliderSetting(){ var width = $(window).width(); if(width <= 767){ $('#slider').not('.slick-initialized').slick(); }else{ $('#slider.slick-initialized').slick('unslick'); } } // 初期表示時の実行 sliderSetting(); // リサイズ時の実行 $(window).resize( function() { sliderSetting(); });
WordPrssのエディタにCSSを反映しマークアップスタイルを追加する
WordPressで記事を投稿する際に、標準で搭載されているエディタは自動でコードを入れてくれたりボタン一つで好きなコードを挿入できたりして便利で使用している人も多いと思います。 エディタをもっと使いやすくするために、実際に投稿される記事と同じCSSが反映されるようエディタースタイルシートを有効化し、それに加えてボタン一つで記事にデザインを追加できるマークアップスタイルを設定してエディタの機能を強化しましょう。 今回は、WordPressのエディタにエディタースタイルシートとマークアップスタイルを追加する方法についてご紹介します。 エディタースタイルシートを使用できるようにする まずは、エディタースタイルシートを使用できるようにするためにWordPressのテーマの高に新しく『editor-style.css』というテンプレートを作成してください。 『editor-style.css』は、
WordPressのビジュアルエディタ表示を実際に公開されるページ表示に近づける方法 | 福岡のホームページ制作会社 | シンス株式会社
WordPressで記事の新規投稿や編集を行うときに使用する編集画面。 記事本文を入力する部分はビジュアルモードとテキストモードの切り替えが可能で便利です。 ただビジュアルモードのデフォルトスタイルは、実際にホームページ上で表示される見た目と異なったりしますよね。 うーん、いまいちサイト表示と違うんだよなぁ… 今回はWordPressの記事編集時の画面をサイト表示と同じように変更するカスタマイズ方法をご紹介します。 ビジュアルエディタ用のスタイルシートを用意しようまずはビジュアルエディタで入力したコンテンツに適用するスタイルシートを準備します。 テーマフォルダ直下にeditor-style.cssというファイルを用意して、投稿するコンテンツに反映されるCSSをコピーします。 この時の注意点として、余計なclassなどはそのままコピーしてこないようにしましょう。 例えば、サイトで記事を表示す
wordpressでテンプレートフォルダのパスをショートコードに登録するぜ完全版 | DAICHIFIVE blog
2010年11月16日 記事内でテンプレートフォルダまでのパスを表示させるためのショートコードを登録する方法。 テーマフォルダ内の画像を掲載したい！ wordpressの投稿記事本文の中で、テーマフォルダ内の画像を使いたいときがあると思います。 僕の場合、企業サイトをwordpressで構築するときに、そういったケースがちょこちょこあります。通常、静的なページはwordpressの投稿ではなく「ページ」として作成しますが、ページ本文の中で使用する画像を、普通に投稿画面からアップしてしまうと、クライアントが記事を編集する際などに、間違って削除してしまう可能性があります。だから、クライアントが削除できない場所である「テーマフォルダ」内に画像を入れておき、その画像をページ本文の中で使うという手法を使います。 画像のパス・・・どうする？ ・・・だが、ちょっと面倒なことが起きます。テンプレートフォル
ブロックチェーンとは？メリットや仕組み、企業事例など基礎知識を解説
金融とテクノロジーを掛け合わせた「フィンテック」が、日本でも注目を集めています。その代表例の1つにビットコインを始めとする「仮想通貨」があります。その「仮想通貨」が通貨として機能し、サービスが成り立つ上で非常に重要な技術と言われているのが*「ブロックチェーン」*です。 今回は、ブロックチェーンの仕組みと、仮想通貨で活用される際のメリット、そしてブロックチェーンの今後の課題を紹介します。 ブロックチェーンとは？ *「ブロックチェーン」とは、ビットコインの中核となる「取引データ」技術のことを指します。取引のデータ（履歴）を「トランザクション」と呼び、そして、複数のトランザクションをまとめたものを「ブロック」と言います。このブロックが連なるように保存された状態が「ブロックチェーン」*です。 ブロックチェーンは分散して管理されるのが特徴で、ビットコインなどを利用しているあらゆるユーザーのコンピュー
Figma: The Collaborative Interface Design Tool
Downloads Get the desktop, mobile, and font installer apps
MUJI to Relax | 無印良品
体にフィットするソファとアプリで あなたに最適なリラクゼーションを提供します。 家では体にフィットするソファ。 外ではフィットするネッククッション。 バージョンアップしたMUJI to Relaxアプリで あなたに最適なリラクゼーションと睡眠をサポートします。
ワイヤーフレームを捨ててHTMLプロトタイプに移行した結果 | ベイジの社長ブログ
私たちの会社では長らく、画面設計といえばPowerPointを使い、ワイヤーフレーム（以下、WF）を作っていました。Web制作会社における非常にスタンダードなやり方であったため、ベターな方法と受け入れつつも、例えば以下のような無駄も多く、決してベストではないとも感じていました。 設計者がコーダーに文書構造の意図を説明する時間の無駄 設計者が考えたファイル構造やヘッダ情報を定義するためのドキュメントの無駄 コーディング時にWFやPSD上のテキストをコピペして移し替える無駄 リンク構造や動き、使い勝手を紙面上で表現しようとする努力の無駄 共通パーツに修正が入った時に各ページごとに修正を入れていく無駄 PC用とスマホ用の2種類のWFを作る無駄 更新するたびに新しいWFを印刷する紙の無駄 いずれも工夫次第で軽減できる問題でしたが、意思疎通のための中間成果物の体裁を整えるための多くの時間が無駄では？
30代以降のwebデザイナーの転職の難しさについて語る
「事業会社でwebデザインできるデザイナーって少なくない？！30代なんてほんと少ない！！」 デザイナーの友人と飲み会にて、ふとそんな話になった。 私はwebデザイナーではないけど、採用にも関わってる中でデザイナー採用の難しさは感じてるし、勉強会とかであった他社の人からも同じような声をきく。 でも、転職したいといって転職活動をしている30代のwebデザイナーが多いということも肌感で感じている。この状況ってなんなんだろう？と思いぐるぐる文章をまとめてみた。 ※あくまで私の周囲の観測範囲内の話、という点ご了承ください。 30代以降のwebデザイナー転職によくみられる傾向 特に個人的な観測範囲でよくみるのは、30代中盤以降の女性のwebデザイナーの転職が難航しているパターンだ。 DTPからwebデザインに入りグラフィックデザイン歴が10年以上で、紙とweb両方のグラフィックデザインができることも多
2018年用、日本語のフリーフォント332種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記
個人でも商用でも無料利用できる、日本語のフリーフォント332種類を紹介します（公開時より、3+18個増えました）。 ビジネスからプライベートまで、幅広く利用できる無料フォントが満載です！ 去年は260種類だったので、今年は大幅に増えています。 中には、配布先が変更されたフォント、配布終了になってしまったフォント、無料でなくなったフォント、ライセンスが変更されたフォントもいくつかあります。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。
サイズの決まってない画像を決まったサイズの表示領域に上下左右中央に表示する ｜ Tips Note by TAM
決まった寸法の領域に、縦横比もサイズもバラバラの画像を「うまいこと」表示しないといけないなんてことないでしょうか。 HTML + CSSで地味に苦労する上下左右中央とサイズの調整、未だに一発書きが出来ません。 flexboxなどの新しいプロパティが使えるようになりましたが、Internet Explorerのことを考えるとなかなか手放しでは使えないのが現状です。 縦横どちらも規定より小さい画像は上下左右中央に原寸表示 縦横比が表示領域と異なり、規定よりもサイズが大きい画像は長辺を縮めて最大幅に合わせて縮小し、上下もしくは左右の中央に表示 画像をトリミングも引き伸ばしもせずに、原寸もしくはそれ以下で全部表示するということですね。 この2つを実現し、なおかつ画像を背景画像ではなくimg要素として記述するコーディングをご紹介します。 今回はInternet Explorer 10にも対応していま
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 | ITハット
どこよりも詳しい万能スライダーjQueryプラグインslick.jsの使い方 いろいろなスライダー・カルーセルjQueryプラグインを利用してみて、一番簡単でカスタマイズ性に富んだものがこのslickです。非常に便利な分、注意しなければならないこともあるので、その点も含めて紹介したいと思います。 導入 ダウンロード http://kenwheeler.github.io/slick/ サイト上部のメニューのget it nowをクリックします。 Download Nowをクリックでダウンロードすることができます。 読み込み <head> ... <link href=".../path/to/slick.css" rel="stylesheet"> </head> head 内で slick.css を読み込みます。 ... <script src="https://ajax.google
HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。 - かもメモ
スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheightにvminという単位を使って、レスポンシブの正方形を作る方法がありました。 HTML <div class="squareBox"> <div class="content"></div> </div> CSS .squareBox /* margin 30px */ width: calc(100vmin - 60px) height: calc(100vmin - 60px) 参考: css3でレスポンシブな正方形を作る - Qiita この方法は、calcに対応しているブラウザの問題と、ボックスが1つなら良いのですが複数並べたい時
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IcoMoon App
AniJS, A Library to Raise your Web Design without Coding
VirusTotal