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…

マスターしてみたいCSS エフェクト\parallax/

。最近ちらほら見かけるParallax。これ自在に操れるようになりたひ✨(⁼̴̀ૢ꒳⁼̴́ૢ๑)✨♪ Pure CSS Parallax http://keithclark.co.uk/articles/pure-css-parallax-websites/ 2013年にはすでにあったらしく、海外では2014,15年くらいに少しWebトレンドになったと…

【CSS3/ セレクタ】コレは汎用性が高そう!

W3Schoolsさんからの引用になります。 まだ、覚えたてなもので(๑≧∀≦)ฅw [via]W3Schools ❶Image Sprite - http://www.w3schools.com/css/css_image_sprites.asp ❷:nth- セレクター CSS3 :nth-child() Selector CSS3 :nth-of-type() Selector selectorexamplee…

本 埋め込み テスト

The Design of Everyday Things: Revised and Expanded Edition 作者: Don Norman 出版社/メーカー: Basic Books 発売日: 2013/11/05 メディア: ペーパーバック この商品を含むブログを見る Things That Make Us Smart: Defending Human Attributes in the A…

これはすごく参考になった⁉︎ / はてなブログ テーマ制作

Stack Overflow ページャー(次/ 前のページ に飛ぶヤツ) をカスタマイズする際に非常に参考になりました🌟 その手があったか(′ʘ⌄ʘ‵)⁉︎💡

インタラクティブ・レコード・プレーヤー /CSS, Javascript

Codrops.net http://tympanus.net/codrops/2016/06/15/interactive-record-player/ これは面白い!!デザインが良く、動くサイトってやっぱ面白い!!✧(⸝⸝⸝ↂ⃙⃙⃚⃛︎ωↂ⃙⃙⃚⃛︎⸝⸝⸝)✧⁺⸜(●˙▾˙●)⸝⁺✧♪♪♪ ちゃんと曲も流れますん‹‹\(´ω` )/››‹‹\( ´)/››‹‹\( ´ω`)/››~♪♪♪…

「ホバー注釈」の作り方 / CSS (hover Annotation)

ホバー注釈❶--- デフォルト ホバー注釈❷ --- (ボタン風/ 影(box-shadow) ) ホバー注釈❸ --- ( 吹き出し + アニメーション (@keyframe ) ) 文中に挿入する場合 作った理由 ホバー注釈❶--- デフォルト See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;a…

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

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

\Sitepoint.com/ --- CSS / 吹き出し( bubble ) の作り方チュートリアル

非常に分かりやすいチュートリアルでした(*´ω`*)✨✨♪ Sitepoint.com https://www.sitepoint.com/pure-css3-speech-bubbles/ 「ドッグイヤー」も「吹き出し」も基本は同じという事ですね🌟 理解しました( ・ㅂ・)و ̑̑✨♪

HTML , CSS 日本語サイト( 大阪教育大学 / 情報科学講座)

大阪教育大学 / 情報科学講座 HTML5 & CSS3 リファレンス 色々な機能が実装されていて、使いやすいかと思います。 逆引き辞典としても、使えるとはかなり秀逸ですね、やりますなぁ~大教大さん!✨(⁼̴̀ૢ꒳⁼̴́ૢ๑) 2012年で更新は途絶えていますが、CSS3,HTML5 …

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

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

ボックスの作り方、最初に考えた人おぉっ!!!/ CSS

https://colorlib.com/wp/free-css3-html5-search-form-examples/ ・上記リンク先➜ ページ中段 よ~く見てみると、1px ずつ、box-shadow(影)が何枚も重ねられるているのですね( ˙◊˙◞ )◞⁉︎ 拡大してみると、実は斜めの直線ではなく、ギザギザになっているので…

なんじゃこりゃ~⊂⌒~⊃。Д。)⊃✨✨✨♪

See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io/Kazumax/pen/oLXJZB/" data-mce-href="http://codepen.io/Kazumax/pen/oLXJZB/"&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;oLXJZB&amp;amp;amp;amp;…

フレキシブル・ボックス ( Flexible Box ) / CSS3

やっぱりw3schoolsさんが最強なのは、 ❶説明が的確・簡潔 ❷実行画面がある というのがその所以だと思った。特に、"❷" その最強さを更に高みへと押し上げてる✨♪ ●コード ➜(実行)➜表示画面 ●「こう入力したらどうなるんだろ?」という事を試せる。サンプルコー…

CSS セレクタ / 解説してみた

[更新:16-05-18] "参考" + " 和馬の説明 " で、CSSのセレクタを説明してみました。 [via] CSS Syntax and Selectors/ CSS Tutorial --- w3schools.com CSS Syntax and Selectors [via] Selector/ CSS2.1 --- W3C Cascading Style Sheets Level 2 Revision 1 …

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

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

104. W3C.org ( http://.www ← ココの人w )

"www" を一度は目にした事があるのではないでしょうか。そうです、インターネットを観覧する際、上に見えているアレです。『http://www......』の所です。その"www"の部分がまさに、今回紹介するW3Cさん**なのです。(**World Wide Web Consortium) W3Cはイン…

103. コードを学びたくなる、HTML,CSSのみで書かれた動く・スタイリッシュなサイト

CSS, 面白い, 凄い, サイト

81. 【CSS】『引用』のデコレーション✨✨✧⁺⸜(●˙▾˙●)⸝⁺✧

99%Invisible---『Norman Doors: Don’t Know Whether to Push or Pull? Blame Design.』 99%Invesible.com 下記のサイトからコピペしてみたら、スゲーかっちょよくなりました✧⁺⸜(●˙▾˙●)⸝⁺✧✨✨♪ [via]WebMaster-Source.com http://www.webmaster-source.com/20…

80. 【CSS】記事の日付に背景色を入れる場合+ 注意点

/* 日付と記事タイトル色変更 */.date {color: #ff830f; background-color:rgb(56,55,69);} padding-bottom:3px; padding-top:1px; margin-right:35%; margin-left:35%;.entry-title { color: #fca859; background-color:rgb(56,55,69); padding-top:5px; pa…

79. CSS参考にさせて頂きました🌟

ありがとうございました🌟 大変参考になりました(•ᵕᴗᵕ•)⁾⁾ 日付とタイトル dezie-shosinsha.hatenablog.com リンクの色 d.hatena.ne.jp #リンクの色を変える、記事タイトル変更、エントリータイトル変更

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