Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

✿デザイン

【初学者向け】Chroma.js の使い方

code { font-size: inherit !important; } div[class*="cTitle"] { position: relative; display: table; top: 1em; left: .25em; border-radius: 14px; color: #fff; padding: 5px 16px; font-size: 20px; line-height: 20px; text-align: center; vertical…

ColorWheel を作成中…::(っ`ω´c)::💦 + Chroma.js さんが秀逸過ぎる

Chroma.js Brian Grinsteadさんのコードを参照させて頂き、ColorWheelの仕組みを理解し、もう一度自分で作れるか一から自作中です✨ Colorwheel 1K - Brian Grinstead don't code today what you can't debug tomorrow: color wheel on Canvas jsコード自体は…

ブログテーマ第2弾「Modernist」うぷしたじぇ~L( •̤ㅂ•̤)┘三└(•̤ㅂ•̤)」🌟

取り敢えず自己満マンマン ₍₍(꒪່౪̮꒪່)⁾⁾✨✨✨♪w テーマ名・キャッチコピー等、かなり大きく出てしまいました(´>∀<ˋ๑)>w まぁまぁ今後の僕の伸びしろも込みという事で✨♪w o͡͡╮(。-∀-。)╭o͡͡ 今回の作成で難しく感じた点 「余白」 余白をうまく使う事が、レイア…

【はてなテーマ製作-2個目】むっふっふ~(。+・`ω・´)

ええ感じのができましたで~。後もうちょっと微調整が必要ですがその内にウプするぜ~◟( ᕫ。-∀-ᕫ) ~♪✨✨ 今回のテーマのポイント ❶シンプル ❷簡易カスタマイズ性 設定ページからカスタマイズしたものがこちら↓↓ [ヘッダー画像 : unsplash.com ] [背景画像 : はて…

(フォント・オウサム・アイコン )Font Awesome Icon

「アイコンのようなフォント」と言えば良いのでしょうか。。 要は、「アイコン(図形フォント)を文中に使える」という事です。僕も旧ヘッダのメニューバーに使っていました٩(⁼̴̀ꇴ⁼̴́٩)♪✨♪ Font Awesome Icon WebでもPCでも使用OKのようです。 ・ダウンロード…

User Experience とは

User Experience( ユーザー・エクスペリエンス ) とは何か User Experience -- Wikipedia -- https://en.m.wikipedia.org/wiki/User_experience UX Design http://uxdesign.com/ux-defined The definition of User Experience --Nealsen Norman Group -- htt…

惜しい感が否めないのは、僕だけだろうか…(;๑´Д`ก).。oO

「和」をモチーフにテーマを作ってみているのですが。。 メインページ サイドバー 記事ページ 悪くない、決して悪くないんだけれど…何か余計というか、物足りないというか…(;๑´Д`ก).。oO もう少し本格的にデザイン学びたいな💦✨♪(ノ")`ω´(ヾ))ウーンッᵎ

【App】多機能 + ハイクオリティ、写真エフェクト アプリ...\Trigraphy/..

Trigraphy http://trigraphyapp.com いつもは特徴をココにまとめるのですが、これは言葉が寧ろジャマになってしまいますね 『Don't Think!? Feel.』でするw ((꜆꜄•௰•)꜆꜄꜆» 使用する画像に悩んでる人は、ぜひ「unsplash.com」のご利用をお勧めします。僕も多用…

デザインが面白惹かれるサイト.\On The Grid.City/.

On The Grid.City - http://www.onthegrid.city - 非常にユニークなデザインのサイト - 色は馴染みのある"普通の青"なのに、何か惹かれる ✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)⁉︎ 数秒後、僕ははたと気付きました。 「これはもしやSVGを使われているのでは⁉︎」と。 そして矢も楯も…

Webフォント 3選 (日本語)

Webで使用OKなフリーフォント(日本語)の3選です。 Web Font 界隈(ん?)でのメジャー所3つ、といった所でしょうか - Noto Sans Japanese ( Google.,Inc) --- ゴシック - M+ ( 森下浩司 ) --- ゴシック - IPA ex ( IPA : 情報処理推進機構) --- ゴシック・明朝 …

❶ 導入チュートリアル / @Noto Sans Japanese(β版)

おとこわり(お断り←) β版です。今後の予告なく変更の可能性ありなので、急に使えなくなったりする場合もあります。僕も既に1度ありましたw あくまで16.06.24現在の内容です。予めご了承下さい(。•ㅅ•。) Noto Sans Japanese(β版) 導入方法 導入チュートリアル …

Unsplash.com/ 高品質 デザインフル フリー画像素材 サイト

偶々見つけましたw これはガチでありがたい⁉︎✨(⁼̴̀ૢ꒳⁼̴́ૢ๑) Unsplash.com --- https://unsplash.com " width="100%" /> - Click me - ライセンス License All photos published on Unsplash are licensed under Creative Commons Zero which means you can …

Color Pattern --- AWWWARDS.com

AWWWARDS.com ・世界的にも有名なWebデザインのアワード団体らしい ・本社はスペイン・ヴァレンシア。 Awwwards - Wikipedia, the free encyclopedia 僕も最近知ったばっかりですが、凄く美しくデザインが秀逸・美麗だと思ったので紹介してみました。Wikiを…

「ホバー / クリック ➜ 注釈」できました

シンプルな" ホバー注釈"を"吹き出し風" にアレンジしてみました🌟 先の「SitePoint」さんを参考に作ってみました🌟 See the Pen mEVXdp by Kazuma Tojo (@Kazumax) on CodePen. テキストの長さ・改行に応じて、背景の幅や高さも調整される様にするのに手こずり…

CSS3 グラデーション 生成サイトが秀逸!

http://uigradients.com/ CSS3 のグラデーション機能 liner-gradient: を、誰でも簡単に使えるようにしたのがこのサイト。グラデーションの程度・方向は変えられませんが、色は変えられます。 - 著作権フリーのフリー素材 - デザインの良いもの を探すのは時…

ブログに『Webフォント( 英語 )』を導入する / Webフォント導入チュートリアル

最近ようやくWeb Font の使い方に慣れてきましたw という事で「ウェブ・フォント/ 導入チュートリアル」を書いてみました(੭ˊ꒳​ˋ)੭✧ ブログのフォントを変える( 英語 ) 先ずは英語から。 (又後日、日本語のフォント導入チュートリアルも書こうと思っています…

日本語のフリーフォント、Webでも使える!しかも案外簡単に!Σ('ω'ノ)ノ!

ブログ・HPなどにフォントを導入する際、お金をかけずとも、色々なフォントを使う事が比較的簡単に出来るみたいですね これは晴天の霹靂でした( ˙◊˙◞ )◞⁉︎ 使うフォントは「フリーフォント」で、個人等で無償で提供されておられるものです。ライセンスも見て…

Webページの縦書きデザイン/ CSS

これも、いつか導入したいと考えてる(∩´ㅂ`∩).*・゚ はてなブログのテーマストアにも "縦書きのテーマ" が一つ投稿されていた筈。 縦書きは、日本語の美しさを特に感じる✨✨ 縦書きWeb普及委員会 [via]http://tategaki.github.io

タイポグラフィー

Webデザイナーではないけれど 笑、凄く勉強になるわ~(∩´ㅂ`∩).*・゚✨ 最近、デザインは「余白」の使い方が大事なんだと感じていまつ.。oO デザイン面白す(∩´ㅂ`∩).*・゚✨♪ Webデザイナーなら知っておきたいWebタイポグラフィの基本 | BLOG | FICC

Testブログでフォント色々試してみた

フォントの「サイズ」は、ブラウザによって表示が違うのですね ●60-100% 連続表示 ●h1-h6 を並べて入力して、サイズ比較してみました。見やすいデザインを追求したくてw Safariだとサイズがグラデーション変化しなかったのですが、スマホのASUSブラウザから…

121. 和馬'sはてなブログテーマ、を記事にアップしてみました🙌🌟

ログ*1の意味でも、又、「他の方が使えるかも」とも思い、「Kazuma Laboratory'sブログテーマ」の "コード" を記事にしてみました。 また、プログラミングを学んでいない人でも導入できる様に、以下に「このブログのテーマを導入する為のチュートリアル」も…

94. 配色・デザイン素材 のサイト

Designの素材が作れたり置いてあるサイト・配色サンプル参考サイトです。僕が使っているサイト様全部です(´つヮ⊂)w <配色>_________________ ●Color-Sample.com http://www.color-sample.com ●ColourLovers.com http://www.colourlovers.com オススメ→ パレ…

91. 図形描写app『Grafio』が、結構使いやすい

Grafio(iOS) tentouchapps.com Androidの人はごめんなさい(。•ㅅ•。) iPhone/ iPad/ iPod Touch の人になります __________________________________ ●無料版 --- 5ファイルまでという機能制限以外は確かほぼ全部機能使えたはず ●製品版 ---¥980 ・タッチで手…

90. ノーマン・ドア/ 引くのか押すのか分からない、微妙なデザイン

Norman Doors: Don’t Know Whether to Push or Pull? Blame Design.99% Invisible.org 前のCSSの引用デコレーションの回で、サンプルに書いていた騎記事を今回改めて。No.88 の記事でも少しノーマンさんに触れました。最近気になっているおじさまです(´つヮ⊂…

88. 納得のDesign✨✨♪ 駄菓子菓子…。。

自分でも予想以上に良い仕上がりになった✨♪ ただ… 『視認性*1』を考えると、前より少し見にくくなった気が…。。w ●デザイン→機能デザイン →ビジュアルデザイン 両立は改めて難しいのだと実感::(っ`ω´c):: 佐藤オオキさんとか佐藤可士和さんとか凄いなぁ✨ 特…

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️