Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

⌬CSS

1種類だけではなかった( ˙◊˙◞ )◞!?💡 "ダブルクォーテーションマーク"🌟

Unicode®︎ とは Character Reference とは (旧)『5.3 Character references(HTML 4.01-W3C-)』 (現)『8.1.4 Character references(HTML 5.1-W3C-)』 Using Character Reference in CSS 4.1.3 Characters and case(CSS 2.1-W3C-) 4.4.1 Referring to characte…

W3C 仕様書 --- 一覧リスト(HTML, CSS, DOM)

W3C 仕様書 --- 一覧リスト( HTML, CSS, DOM ) Documentation と Specification の違い Web Development系(HTML, CSS, DOM) の一次ソースである W3C の仕様書を一覧で観たくてリスト化してみました。全ては網羅できていません。それでも結構な量になった気が…

Re: ゼロから始める{less} 生活

Less.js 公認 日本語翻訳ページ その他の日本語ページ 実際に LESS 試してみた 基本編 ちょっと応用編 Nested ruleとは [ ::雑談スペース:: ] Less.js http://lesscss.org LESS*1 As an extension to CSS, Less is not only backwards compatible with CSS, …

iPad 最強テキストエディタ アプリ、..\Textastic/..

これを最強と言わずして何を最強といおうか。 Textastic https://www.textasticapp.com 全部のせのです。入門者~中級者までをカバーできうる、和馬が選ぶ、2016年ベストのテキストエディタ アプリです 特徴 ●ほとんどの言語のコード・ハイライト機能 ●ブラウ…

【CSS】CSS のみ( Pure CSS )で「スクロール・ナビ.js」と同じ事が出来た⁉︎

jsだと、iOSの場合、position ヂェンジの際に、どうしてもシームレスに表示されない…。一旦position ヂェンジの際に、その要素の表示が消えてしまう。。 それをを解決したいと、ずっと頭の片隅にあって、 「もしやPosition を変える以外に方法は→ 色々試すが…

【CSS】「アスペクト比一定 + サイズ変化するBox」と、そのカラクリ

// (かなり書きかけ感満載ですが、投稿できる見込みが( ³ω³ ).。o なので、とりあえず投稿しておきます。 関係が複雑なものを「分かりやすく」説明するのは、難しい、難しぃ~0(:3 )~ ('、3_ヽ)_ ) 1:1 2:1 1:2 4:3 16:9 画面幅を変えてみて下さい。タブレット…

【CSS】このブログのテーマ

logとして。 使いたい方おられたらですが|*´-`)チラッ.。oO(いたら嬉しい✨) ご自由にお使い下さい(•ᵕᴗᵕ•)⁾⁾ペコリ🌟 コード汚くてすみません。。(;◔ิд◔ิ)💦w github.com

【CSS】ボタン - ホバーエフェクト作ったよ🙌🌟

コードロップスさんの記事を参照 & 自己アレンジしてみました🌟 Line Menu Styles --- Codrops --- type1 type2 type2e type3 type4 type5 type6 type7 type8 html <button class="btn type1">Type1 </button> CSS /*========= background ==========*/ body { background:radial-gradient(#444141…

【css】timing-function "Cubic-Bezier"

CSS Transitions [WD] -2013.11.29 https://www.w3.org/TR/css3-transitions/#transition-timing-function-property 2.3. The ‘transition-timing-function’ Property cubic-bezier(<number>, <number>, <number>, <number>) Specifies a cubic-bezier curve. The four values specify points</number></number></number></number>…

【css】ちょっとややこしいけど、使いやすいと知った"em"

W3Cさんを参照してみました。em,rem,px。3つを使い分けることで、レイアウトしやすくなりそう。 em --- 流動的 rem --- 準・流動的 px --- 固定的 ただ、少しだけややこしいかも。。 CSS Values and Units Module / Level 3 - W3C W3C CR*1 / 2016.09.29 htt…

【CSS】@~ まとめ

@import - @importは、stylesheetの一番初めに記述しなければならない。一番初め以外は、インポートするcssファイルが適用されない。 -W3C https://www.w3.org/TR/css-cascade-3/ @font-face - @font-faceは、<style> や cssファイルの先頭でなくても良い。W3CのDoc…

【css】 セレクター/ どこまで記述すれば良いのか腑に落ちた( ˙◊˙◞ )◞💡

!important の意味を明確に理解していなかったので、一次ソース( W3C ) + MDN*1 で調べてみました。 その過程で、「上位階層のどこから指定し始めるのが良いのか」も理解できました。 はてなブログのテーマ制作過程で疑問に思っていたまま、「スタイルが適用…

フォントサイズの単位 / em, rem の違い

CSSのfont-size: の単位について。 普段はpx,% がよく使われている。 em <HTML> <STYLE> H1 { font-size: 2em } </STYLE> <BODY> <H1>Movies</H1> </BODY> </HTML> When used to specify font sizes, the em unit refers to the font size of the parent element. So, in the example above, the font size of t…

ソースコードハイライター..\Prism.js/..

やっとの思いで見つける&導入する事ができました。やっぱりJavascriptだったか✨(⁼̴̀ૢ꒳​⁼̴́ૢ๑) Prismjs.com http://prismjs.com/index.html 試しにコードを入力してみました★ プレビューで確認できました。嬉しい(´つヮ⊂)✨ #grad3-1 { height:300px; backgro…

【CSS】 超ミニマルコード!! 多階層 ドロップダウン メニュー

[ 更新: 17.06.02 ] jQueryに関する誤記の訂正 CSS Script.com -- Multi-level dropdown menu http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/ - Pure CSS( CSSのみ ) - コードが超シンプル✨✨♪ 僕のブログ最上部にあるDDM(Dro…

【CSS】position: プロパティ テスト

positionプロパティが曖昧だったので、色々試してみました🌟 JS Bin on jsbin.com

【jQuery/CSS 引用】動く単語カード⁉︎✨ ナンジャコリャー✨♪⊂⌒~⊃。Д。)⊃

Swatch Books --- Codrops http://tympanus.net/codrops/2012/07/02/swatch-book-with-css3-and-jquery/ うへぇ~‹‹\( ´ω`)/››~✨コードロップスさんのアーカイブが宝庫な件✨✨♪ 面白いDemoがいっぱい しかもソースコードまで公開して頂いて、もう学習者にとっ…

【CSS】顔文字好きをこじらせた結果✨

ヤバイ、今迄で1番に近いくらい嬉しい会心の出来!!!!wwwww 完全に顔文字好き拗らせてます ₍₍(꒪່౪̮꒪່)⁾⁾✨✨♪ (´つヮ⊂)✧⁺ ✧⁺(⁼̴̀ૢ꒳​⁼̴́ૢ๑) ✧⁺⸜(●˙▾˙●)⸝✧⁺ どうよコレっ!(੭ˊ꒳​ˋ)੭✧ ←← 宜しければ皆さんもぜひ使ってみて下さい♪(๑≧∀≦)ฅ✨✨♪←← flash右側 CS…

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

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

【CSS】 写輪眼✨♪(੭ˊ꒳​ˋ)੭✧

デザインが素敵だったので、見様見真似で作ってみました。 最近「見様見真似」(最近まで"みおうみまね"だと思ってました😅w ) 多用?中~ ₍₍(꒪່౪̮꒪່)⁾⁾✨♪ <CSS 3> Linear-Granidient その1 CSS3 Gradients - W3Schools その2 SearchSOA.com ソースコードを見ずに、自</css>…

【CSS】影で遊んでみた - Part2

- box-shadow: - transition: - animation: - transform: 練習してみました。 2Dでリアルに見えるように~ε==└(└ ⸝⸝⸝›ω‹)┘ -大きさ変化 ➜ transform:scale(x,y) -影 ➜ box-shadow: を使用しています 1-1.シンプル - transition: - 1-2.シンプル+ - transition…

本日の成果(影で遊ぶ)

Photo Album It's Your Memory. Feel the Wind. Get access. Relaxing. test . this is test. hover Effect this entry is box-shadow experiment. Photo Album It's Your Memory. Feel the Wind. Get access. Relaxing. test . this is test. hover Effect …

練習がてら、はてなブログのティザーサイト風、作ってみましたw

[ 16.07.14 ] - 100%幅表示 - レスポンシブ表示 に対応してみました Top About Contact More 何気ない瞬間が、思い出に変わる。貴方だけの経験を記す。 はてなブログHatena Blog✿ 貴方は日記をつけた事がありますか? 自分の事を自分で語るという事。自分を…

Parallax、見様見真似で作ってみました✨

My first Parallax! It's excellent!!!! ε==└(└ ⸝⸝⸝›ω‹)┘スィー Test Test Test Test222 Test222 Test222 ちょっと前の記事のClarkさんのサイトを参考にさせて頂き + 色々なサイトのCSS transformを見ながら、とりあえず書いてみました。 まだちゃんと理解でき…

<css>マーカーテスト 2

テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 今回はMaterial Paletteさんも参考にさせて頂きました(* ˊ˘ˋ)*_ _))🌟

<css>マーカージャンキー ₍₍(꒪່౪̮꒪່)⁾⁾✨♪w

マーカーも色々お手軽に使えるように考え中~=͟͟͞͞(๑•̀=͟͟͞͞(๑•̀д•́=͟͟͞͞(๑•̀д•́๑)=͟͟͞͞(๑•̀д•́ 線の太さは、55%位が良いみたい(´-`).。oO テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文章です。 テスト文…

<css>ボーダージャンキー ₍₍(꒪່౪̮꒪່)⁾⁾✨ww

前記事のcssを利用して、tableで一覧にしてみましたw さすがに、両方30pxまでの総組み合わせ「30×30=900」は断念しましたww でも、今後気が向いたらやりたいw 123456 1 border border border border border border 2 border border border border border bor…

<css>border テスト/ width,radius

1px 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 1px 2px 3px 4px 5px 6px 7px 8px 9px 10px 11px 12px 13px 14px 15px 16px 17px 18x 19x 20px 21px 22px 23px 24px 25px 26px 27px 28px 29px 30px

SVG < Scalable Vector Graphics >

今日初めて知った✧(⸝⸝⸝ↂ⃙⃙⃚⃛︎ωↂ⃙⃙⃚⃛︎⸝⸝⸝) 「Adobe llustrator」 とかAutodeskの「Graphic」でも「SVG出力できるらしい( ˙◊˙◞ )⁉︎ どういうことかというと、手書きの絵や図をSVG出力して(XMLコードに変換して) コードとして、Webページで使えるという事。 SVG…

【CSS/Javascript】只今丸パクリさせて頂いております|´-`)チラッ✨ Slide Nav Bar

Codrops.com [訂正: 17.03.07] CallMeNick.com さんです😅 「Codropsさんとデザイン似ているけど違うよ~」とこの後の記事で書いたのですが、自分が真っ先に間違ってたことに今気付きました…_:(´ཀ`」 ∠):_w http://callmenick.com/post/slide-and-push-menus-wi…

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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️