cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html lang="ja">
<head>
<meta charset="utf-8" />
<script id="lang-ld" type="application/ld+json">
[{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "手続き型言語、関数型言語、コンパイラ言語。",
  "url": "https://ja.wikipedia.org/wiki/C%E8%A8%80%E8%AA%9E",
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMTY5LjE0MywxNzYuOTgxYy03LjcwMywzLjczMS0xNy43NjIsNS41OTEtMzAuMTcsNS41OTFjLTE2LjE5NiwwLTI4LjkyOS00Ljc1OC0zOC4xOTctMTQuMjc3CgljLTkuMjg0LTkuNTIxLTEzLjkxOC0yMi4yMDMtMTMuOTE4LTM4LjA1MWMwLTE2Ljg3OSw1LjIxNS0zMC41NjksMTUuNjQ2LTQxLjA2NmMxMC40MjMtMTAuNTAxLDIzLjk1My0xNS43NTEsNDAuNTg0LTE1Ljc1MQoJYzEwLjMwOCwwLDE4Ljk4NiwxLjI5OCwyNi4wNTUsMy45MDJ2MjIuODg1Yy03LjA2OC00LjIxNi0xNS4xMTEtNi4zMjQtMjQuMTQxLTYuMzI0Yy05LjkwMywwLTE3LjkwOCwzLjExNS0yMy45OTIsOS4zNDYKCWMtNi4wODQsNi4yMzEtOS4xMjEsMTQuNjY3LTkuMTIxLDI1LjMxNGMwLDEwLjIwNiwyLjg2NywxOC4zMzksOC42MDksMjQuMzkyYzUuNzM0LDYuMDY3LDEzLjQ2OSw5LjA5NSwyMy4xOCw5LjA5NQoJYzkuMjc1LDAsMTcuNzYyLTIuMjUyLDI1LjQ2NS02Ljc3M1YxNzYuOTgxeiIvPgo8L3N2Zz4K"
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C++",
  "alternateName": "cpp",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "C言語の拡張として開発された。",
  "url": "https://ja.wikipedia.org/wiki/C%2B%2B",
  "sameAs": ["https://ja.wikipedia.org/wiki/C%2B%2B", "https://ja.wikipedia.org/wiki/Microsoft_Visual_C%2B%2B", "https://ja.wikipedia.org/wiki/%E3%83%9C%E3%83%BC%E3%83%A9%E3%83%B3%E3%83%89", "https://ja.wikipedia.org/wiki/GNU%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3", "https://ja.wikipedia.org/wiki/Clang", "https://ja.wikipedia.org/wiki/Intel_C%2B%2B_Compiler"],
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMTE0LjE3OCwxNzEuMDgyQzEwNy40MDMsMTc0LjM2NCw5OC41NTUsMTc2LDg3LjY0MywxNzZjLTE0LjI0NiwwLTI1LjQ0NS00LjE4NS0zMy41OTctMTIuNTU5CgljLTguMTY2LTguMzc0LTEyLjI0Mi0xOS41MjktMTIuMjQyLTMzLjQ2OGMwLTE0Ljg0Niw0LjU4Ny0yNi44ODcsMTMuNzYyLTM2LjEyQzY0LjczMyw4NC42MTgsNzYuNjM0LDgwLDkxLjI2Miw4MAoJYzkuMDY1LDAsMTYuNywxLjE0MiwyMi45MTYsMy40MzJ2MjAuMTI4Yy02LjIxNi0zLjcwOC0xMy4yOTItNS41NjItMjEuMjMyLTUuNTYyYy04LjcxMSwwLTE1Ljc1MiwyLjc0LTIxLjEwMyw4LjIyCgljLTUuMzUxLDUuNDgtOC4wMjMsMTIuOS04LjAyMywyMi4yNjZjMCw4Ljk3NywyLjUyMiwxNi4xMzEsNy41NzMsMjEuNDU1YzUuMDQ0LDUuMzM3LDExLjg0Nyw3Ljk5OSwyMC4zODcsNy45OTkKCWM4LjE1OSwwLDE1LjYyMy0xLjk4LDIyLjM5OC01Ljk1OFYxNzEuMDgyeiBNMTUwLjY2NiwxNDguOTIzdi0xNC4wODloMTQuMDg5di0xMy44MzFoLTE0LjA4OXYtMTMuOTI2aC0xMy44MzF2MTMuOTI2SDEyMi45MXYxMy44MzEKCWgxMy45MjZ2MTQuMDg5SDE1MC42NjZ6IE0yMDAuMTA3LDE0OC45MjN2LTE0LjA4OWgxNC4wODl2LTEzLjgzMWgtMTQuMDg5di0xMy45MjZoLTEzLjgzdjEzLjkyNmgtMTMuOTI2djEzLjgzMWgxMy45MjZ2MTQuMDg5CglIMjAwLjEwN3oiLz4KPC9zdmc+Cg=="
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "C#",
  "alternateName": "CSharp",
  "description": "マルチパラダイムプログラミング言語",
  "disambiguatingDescription": "強い型付け、命令型、宣言型、手続き型、関数型、ジェネリック、オブジェクト指向。",
  "url": "https://ja.wikipedia.org/wiki/C_Sharp",
  "sameAs": ["https://msdn.microsoft.com/ja-jp/library/kx37x362.aspx", "http://www.mono-project.com/docs/about-mono/languages/csharp/"],
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMTIzLjMxOSwxNzEuMTNjLTYuNzA2LDMuMjUtMTUuNDY3LDQuODctMjYuMjc3LDQuODdjLTE0LjEwNCwwLTI1LjE5OC00LjE0NS0zMy4yNzEtMTIuNDM3CgljLTguMDgyLTguMjkyLTEyLjExOS0xOS4zMzctMTIuMTE5LTMzLjE0MmMwLTE0LjcwMSw0LjU0My0yNi42MjUsMTMuNjI1LTM1Ljc2OGM5LjA3OS05LjE0NiwyMC44NjQtMTMuNzE4LDM1LjM0OS0xMy43MTgKCWM4Ljk3OCwwLDE2LjU0LDEuMTMzLDIyLjY5MywzLjM5OHYxOS45MzNjLTYuMTUzLTMuNjcyLTEzLjE2My01LjUwOC0yMS4wMjYtNS41MDhjLTguNjI2LDAtMTUuNTk5LDIuNzEzLTIwLjg5NCw4LjE0CgljLTUuMjk4LDUuNDI3LTcuOTQ4LDEyLjc3NC03Ljk0OCwyMi4wNDljMCw4Ljg5LDIuNDk3LDE1Ljk3NCw3LjQ5OSwyMS4yNDVjNC45OTUsNS4yODUsMTEuNzMxLDcuOTIxLDIwLjE5Miw3LjkyMQoJYzguMDc2LDAsMTUuNDcxLTEuOTYsMjIuMTc3LTUuODk5VjE3MS4xM3ogTTIwNC4zNDgsMTA3LjQ4NVY5My43OTNoLTEzLjc5M1Y4MGgtMTMuNjkydjEzLjc5M2gtMTMuOTU2VjgwaC0xMy42OTF2MTMuNzkzaC0xMy43OTMKCXYxMy42OTJoMTMuNzkzdjEzLjk1NmgtMTMuNzkzdjEzLjY5MmgxMy43OTN2MTMuNzkzaDEzLjY5MXYtMTMuNzkzaDEzLjk1NnYxMy43OTNoMTMuNjkydi0xMy43OTNoMTMuNzkzdi0xMy42OTJoLTEzLjc5M3YtMTMuOTU2CglIMjA0LjM0OHogTTE3Ni44NjIsMTIxLjQ0MWgtMTMuOTU2di0xMy45NTZoMTMuOTU2VjEyMS40NDF6Ii8+Cjwvc3ZnPgo="
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "Java",
  "description": "オブジェクト指向プログラミング言語",
  "disambiguatingDescription": "構造化・命令型・オブジェクト指向。",
  "url": "https://ja.wikipedia.org/wiki/C_Sharp",
  "sameAs": ["http://www.oracle.com/jp/technologies/java/standard-edition/overview/", "http://www.oracle.com/technetwork/jp/middleware/jrockit/overview/", "http://openjdk.java.net/", "http://gcc.gnu.org/java/"],
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik02NS41OTMsMTQwLjM4OWMwLjA0Ny0xNS41MDEtMC4wNDctMzEuMDAyLDAuMDQ3LTQ2LjU1MWMzLjIxMywwLjA5NSw2LjQyNywwLDkuNjQxLDAuMDk1CgkJYy0wLjA0NywxNy4zNDUsMCwzNC43MzUtMC4wNDcsNTIuMTI3Yy0wLjA5NSw0Ljg2Ni0wLjE4OSw5Ljk3Mi0yLjU1MywxNC4zMTljLTIuNTk5LDQuNjMyLTcuMjMsNy44OTMtMTIuMTQ1LDkuNzgzCgkJYy0xLjU2LTEuNzAyLTIuOTc4LTMuNDk4LTQuNTM3LTUuMTk5bDAsMGMzLjk2OS0yLjMxNSw3LjkzOS01LjYyNSw4Ljg4NC0xMC4zOTdDNjUuNzgyLDE0OS44ODcsNjUuNDk5LDE0NS4xMTQsNjUuNTkzLDE0MC4zODkKCQlMNjUuNTkzLDE0MC4zODl6Ii8+Cgk8cGF0aCBkPSJNODQuMjEzLDExMi41MDZjNi4zOC0yLjc0MiwxMy40NjktNC4xNTksMjAuNDE2LTMuNDAzYzMuNTkyLDAuNDI1LDcuMzI2LDEuNzQ5LDkuNjQxLDQuNjMyCgkJYzEuOTM3LDIuNDU2LDIuNjQ2LDUuNjI0LDIuNTk5LDguNjk1YzAsMTAuNTg3LDAsMjEuMTI1LDAsMzEuNzExYy0yLjM2MiwwLTQuNzI2LDAtNy4xMzYsMGMtMC4yMzYtMS41Ni0wLjQ3Mi0zLjE2NS0wLjY2MS00Ljc3MgoJCWMtMi42OTQsMi4xMjYtNS41NzcsNC4xNTctOC45MzMsNS4wMDljLTMuODI4LDAuOTkzLTguMDM0LDAuODk3LTExLjc2OC0wLjU2N2MtMi44ODMtMS4xODEtNS4xNTEtMy43OC01Ljk1NS02LjgwNgoJCWMtMS4xODEtNC4zOTUtMC41NjctOS41NDYsMi41NTItMTMuMDljMi43ODktMy4yNjEsNi45OTUtNC44NjcsMTEuMTUzLTUuNjI0YzMuODI4LTAuNzU2LDcuNzUtMC43NTYsMTEuNjczLTAuNzU2CgkJYy0wLjA5NS0yLjk3OSwwLjQ3My02LjIzOS0xLjIyOS04Ljg4NWMtMS4zNy0yLjAzMi0zLjg3NS0yLjgzNi02LjE5LTIuOTc4Yy01LjA1Ny0wLjQyNi0xMC4wNjYsMC44NTEtMTQuODM5LDIuNTA1CgkJQzg1LjA2NCwxMTYuMjg2LDg0LjYzOSwxMTQuMzk2LDg0LjIxMywxMTIuNTA2IE05NS45MzQsMTM0LjQzNGMtMi4wNzksMC42NjEtNC4wMTcsMi4xNzQtNC41ODQsNC4zNDkKCQljLTAuNjYyLDIuNDA5LTAuNDczLDUuMjQ0LDEuMDg2LDcuMjc3YzEuNTEyLDEuOTg0LDQuMjUzLDIuNDU2LDYuNjE3LDIuMTc0YzMuMzA4LTAuMzc5LDYuMTkxLTIuMjY5LDguNzQzLTQuMwoJCWMwLTMuNTQ1LTAuMDQ3LTcuMDQzLDAtMTAuNTg3QzEwMy44MjYsMTMzLjM0Nyw5OS43NjIsMTMzLjExLDk1LjkzNCwxMzQuNDM0TDk1LjkzNCwxMzQuNDM0eiIvPgoJPHBhdGggZD0iTTE2Ny4yOTUsMTEyLjUwNmM2LjQyNy0yLjc0MiwxMy41MTYtNC4yMDcsMjAuNTExLTMuNDAzYzMuNDk2LDAuNDI1LDcuMDg4LDEuNzAxLDkuNDAzLDQuNDQyCgkJYzIuMTc1LDIuNTk5LDIuODM2LDYuMDUxLDIuNzg5LDkuMzU3Yy0wLjA0OCwxMC40NDQsMC4wNDcsMjAuODQxLTAuMDk0LDMxLjI4NWMtMi4zNjMtMC4wOTQtNC43MjYsMC4wNDctNy4wODktMC4wOTQKCQljLTAuMjM2LTEuNjA2LTAuNDI1LTMuMTY4LTAuNzA5LTQuNzI2Yy0zLjMwOCwyLjgzNi03LjI3OCw1LjE1MS0xMS43NjgsNS41MjhjLTQuMTExLDAuMzc4LTguNzQzLTAuMTQxLTExLjk1Ny0zLjA3MQoJCWMtMy4zNTUtMy4xMTktMy45MjItOC4xNzYtMy4wNzItMTIuNDc3YzAuODA0LTMuOTcsMy43OC03LjIyOSw3LjM3My04Ljk3OWM1LjYyMy0yLjc0LDEyLjA1MS0yLjg4MywxOC4xOTUtMi44MzUKCQljLTAuMDk2LTIuODgzLDAuNDI0LTUuOTU1LTEuMDQxLTguNTU0Yy0xLjEzNC0yLjA4LTMuNTQ0LTMuMDI0LTUuODEzLTMuMjYxYy01LjI0Ni0wLjU2OC0xMC40OTEsMC43NTctMTUuNDA2LDIuNDU3CgkJQzE2OC4xOTMsMTE2LjI4NiwxNjcuNzIxLDExNC4zOTYsMTY3LjI5NSwxMTIuNTA2IE0xNzguODczLDEzNC40OGMtMS45ODYsMC42NjItMy44MjgsMi4xNzUtNC40NDMsNC4yNTQKCQljLTAuNjYxLDIuNDA5LTAuNDcyLDUuMjQ2LDEuMDQsNy4zMjVjMS41NiwyLjAzMiw0LjM0OSwyLjQ1Niw2Ljc1OCwyLjE3NGMzLjI2MS0wLjQ3Myw2LjIzOC0yLjI2OSw4LjY5Ni00LjQ0MwoJCWMtMC4wOTUtMy40NDktMC4wNDctNi45NDYtMC4wNDctMTAuNDQzQzE4Ni44NiwxMzMuMzQ3LDE4Mi43NDgsMTMzLjExLDE3OC44NzMsMTM0LjQ4TDE3OC44NzMsMTM0LjQ4eiIvPgoJPHBhdGggZD0iTTEyMi4yNTYsMTA5LjY3YzMuMzA5LDAsNi42MTcsMCw5LjkyNCwwYzEuOTM4LDYuMjM4LDMuODI4LDEyLjQzLDUuNzY2LDE4LjY2N2MxLjEzNCwzLjgyOCwyLjU1Miw3LjYwOCwzLjM1NSwxMS41MzEKCQljMC40MjYsMS43NDksMC44MDMsMy41NDQsMS4zMjMsNS4yNDZjNC4wNjUtMTEuNDgzLDcuMTg0LTIzLjM0Niw4Ljc5MS0zNS40NDRjMy4yMTQsMCw2LjQyOCwwLDkuNjQsMAoJCWMtMi43ODcsMTUuMzEyLTcuMTgzLDMwLjM4OC0xMy43OTksNDQuNDcxYy0zLjc4MSwwLTcuNTYyLDAtMTEuMzQyLDBDMTMxLjM3OCwxMzkuMzAyLDEyNi43OTMsMTI0LjUxLDEyMi4yNTYsMTA5LjY3CgkJTDEyMi4yNTYsMTA5LjY3eiIvPgo8L2c+Cjwvc3ZnPgo="
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "JavaScript",
  "description": "プロトタイプベースのオブジェクト指向スクリプト言語",
  "disambiguatingDescription": "マルチパラダイム。ウェブブラウザで動作する。",
  "url": "https://ja.wikipedia.org/wiki/JavaScript",
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik05Ni4yNjQsMTUyLjAzNmwtMC41NDMsMS42MzNjLTAuNTQ1LDIuMTgtMS40NTcsMy45MDgtMi43MjMsNS4xNzhjLTEuNjM2LDEuNjMzLTQuMjcxLDIuNDQ5LTcuOTAxLDIuNDQ5CgkJYy0yLjcyNCwwLTQuOTk2LTAuNjMzLTYuODEyLTEuOTA2Yy0xLjgxOC0xLjI2OC0zLjcyNC0zLjU0MS01LjcxOS02LjgxMWMtMC43MjktMS4yNjgtMS4xMzctMS45MDUtMS4yMjUtMS45MDUKCQljLTAuMDk1LDAtMi45NTUsMS43MjgtOC41ODIsNS4xNzVsLTguNDQ0LDUuMTc2bDAuODE1LDEuMDljMy44MTYsNy45OTIsOS44OTgsMTMuMzQ4LDE4LjI1MywxNi4wNzIKCQljOS4yNjEsMy4wODYsMTguMjUsMi45MDIsMjYuOTY4LTAuNTQ1YzkuNjI0LTMuOTk3LDE1LjE2MS0xMS44OTMsMTYuNjE1LTIzLjY5OWMwLjE4LTEuMjcsMC4yNzMtMTQuNDM4LDAuMjczLTM5LjQ5OFY3Ni44NTMKCQloLTEwLjYyNEg5Ni4yNjR2MzcuNTkyVjE1Mi4wMzZ6Ii8+Cgk8cGF0aCBkPSJNMTQyLjU3NCw4NC4yMDhjLTUuMDg1LDUuMDg1LTcuNjI2LDExLjUzMy03LjYyNiwxOS4zMzhjMCwxMS40NDIsNS4yNjQsMjAuMzQyLDE1Ljc5NywyNi42OTcKCQljMi41NDEsMS42MzUsNi45LDMuNzI1LDEzLjA3Nyw2LjI2NmM3LjYyNiwzLjI2OCwxMi4zNDcsNS45MDQsMTQuMTY1LDcuOWMzLjA4NSwzLjI2OCwzLjcxOSw2LjgxLDEuOTA2LDEwLjYyMgoJCWMtMC41NDYsMC45MTItMS4xODQsMS43MjktMS45MDYsMi40NTJjLTIuNzI1LDIuNzI1LTYuNTM5LDQuMDg3LTExLjQ0Miw0LjA4N2MtOC4xNywwLTE0LjcxLTMuNjMyLTE5LjYxMy0xMC44OTYKCQljLTAuNzI5LTEuMjY5LTEuMTM2LTEuOTA3LTEuMjI1LTEuOTA3Yy0wLjA5MywwLTIuODYyLDEuNTkyLTguMzEsNC43NjhjLTUuNDQ4LDMuMTgtOC4yNjcsNC44NTktOC40NDMsNS4wMzkKCQljLTAuMTgzLDAuMTgyLDAuMDg4LDAuODE2LDAuODE3LDEuOTA2YzYuMzU0LDEwLjg5NiwxNi40MzIsMTcuMjUyLDMwLjIzNiwxOS4wNjhjNC41MzgsMC43MjMsOS4wNzgsMC43MjMsMTMuNjIsMAoJCWM4LjUzMi0xLjA4OSwxNS4yNTUtMy45OTcsMjAuMTU3LTguNzE2YzUuMjY0LTUuMDgzLDcuODk5LTExLjgwNCw3Ljg5OS0yMC4xNThjMC01LjA4MS0wLjk5OS05LjYyNC0yLjk5NC0xMy42MjEKCQljLTEuMDkzLTIuNTQxLTIuNzI1LTQuOTAzLTQuOTA1LTcuMDgzYy00LjE4LTQuMTc0LTExLjUzNC04LjUzMi0yMi4wNjItMTMuMDc1Yy03LjQ1LTMuMDg1LTExLjk4OC01LjUzNi0xMy42MjMtNy4zNTQKCQljLTEuODE1LTEuOTk2LTIuNjMyLTQuMzU3LTIuNDUtNy4wODJjMC4xNzgtMi4xOCwwLjkwNi0zLjk5MiwyLjE3OS01LjQ0N2MxLjk5NS0xLjk5OCw0LjcyMi0yLjk5OCw4LjE3Mi0yLjk5OAoJCWMzLjgxMywwLDYuODk5LDEuMjczLDkuMjYzLDMuODE1YzEuMjY3LDEuMDg4LDIuMjIsMi4xNzgsMi44NiwzLjI2OWMwLjYzNSwxLjA4OSwxLjA0MywxLjYzNSwxLjIyNSwxLjYzNQoJCWMwLjM2My0wLjE3OSwzLjEzNC0xLjk0OSw4LjMwOC01LjMxMmM1LjE3Ny0zLjM1Nyw3Ljc2NS01LjA4Miw3Ljc2NS01LjE3N2MwLTAuMDg5LTAuNTQ2LTEuMDQyLTEuNjM1LTIuODU5CgkJYy0yLjU0NC0zLjYzMi01LjM1OC02LjQ0NC04LjQ0My04LjQ0NGMtNC4zNTktMy4wODYtOS43MTgtNC44MDktMTYuMDcxLTUuMTc2Yy0yLjM2NC0wLjE3OS00LjYzMS0wLjE3OS02LjgxMiwwCgkJQzE1NC4yODYsNzYuMzA4LDE0Ny42NTUsNzkuMTI1LDE0Mi41NzQsODQuMjA4eiIvPgo8L2c+Cjwvc3ZnPgo="
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "Python",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "マルチパラダイム: オブジェクト指向, 命令形, 関数型, 手続き型, リフレクティブ。",
  "mainEntityOfPage": "https://www.python.org/",
  "url": "https://ja.wikipedia.org/wiki/Python",
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8cGF0aCBkPSJNMTI3LjQ2Myw2MS4zMTdjNC43LDAsOC44NjUsMC4zMzMsMTIuNDk0LDAuOTk2YzMuNjI3LDAuNjY2LDYuNTE1LDEuNTA4LDguNjYxLDIuNTI5YzIuMTQ3LDEuMDIxLDMuOTg2LDIuMTcyLDUuNTE5LDMuNDQ4CgljMS41MzMsMS4yOCwyLjU4MSwyLjU1NywzLjE0NCwzLjgzM2MwLjU2LDEuMjc4LDAuOTk3LDIuNDI5LDEuMzAyLDMuNDQ5YzAuMzA3LDEuMDIyLDAuNDA3LDEuODkzLDAuMzA3LDIuNjA1djAuOTJ2MjkuNDM0CgljMCwzLjI3MS0wLjU4OSw2LjEzMi0xLjc2NCw4LjU4M2MtMS4xNzYsMi40NTUtMi42MzIsNC4yMTctNC4zNjgsNS4yOWMtMS43NCwxLjA3Mi0zLjQ0OSwxLjkxNS01LjEzNywyLjUyOQoJYy0xLjY4NiwwLjYxMi0zLjA5MiwwLjkyLTQuMjE1LDAuOTJsLTEuODQsMC4xNTJoLTMwLjY1OGMtMy40NzYsMC02LjQ2NSwwLjY2Ni04Ljk2OCwxLjk5M2MtMi41MDYsMS4zMjgtNC4yOTMsMi45MTMtNS4zNjYsNC43NTMKCWMtMS4wNzMsMS44MzktMS45MTcsMy42NzktMi41MjksNS41MThjLTAuNjEzLDEuODQtMC45NzIsMy40MjYtMS4wNzMsNC43NTN2MS45OTN2MTUuOTQySDgyLjA4N2MtMC4yMDYsMC0wLjUzNywwLTAuOTk3LDAKCWMtMC40NTgsMC0xLjMwMi0wLjE3OC0yLjUyOS0wLjUzNmMtMS4yMjYtMC4zNTgtMi40MjgtMC44OTUtMy42MDItMS42MWMtMS4xNzYtMC43MTMtMi40NTMtMS44OTEtMy44MzItMy41MjYKCWMtMS4zOC0xLjYzNC0yLjU4My0zLjU3NS0zLjYwMi01LjgyNmMtMS4wMjMtMi4yNDUtMS44NjctNS4yMzQtMi41MjktOC45NjZjLTAuNjY2LTMuNzMtMC45OTctNy45NDUtMC45OTctMTIuNjQ2CgljMC0zLjY4MSwwLjIyOS03LjA1MiwwLjY4OS0xMC4xMThjMC40Ni0zLjA2NSwxLjA5Ni01LjY0NSwxLjkxNy03Ljc0YzAuODE3LTIuMDk1LDEuNzM1LTMuOTg2LDIuNzU4LTUuNjc0CgljMS4wMjEtMS42ODcsMi4xMjEtMi45ODksMy4yOTctMy45MDdjMS4xNzItMC45MiwyLjMyMy0xLjczNywzLjQ0OS0yLjQ1NWMxLjEyMy0wLjcxNCwyLjIyMi0xLjE3MiwzLjI5NS0xLjM3OAoJYzEuMDczLTAuMjA0LDEuOTkzLTAuMzg0LDIuNzYtMC41MzZjMC43NjYtMC4xNTMsMS40MDMtMC4xNzksMS45MTUtMC4wNzhoMC43NjdoNDMuMjI5di00LjU5OEg5Ny4xMTF2LTE1LjMzCgljLTAuMTAzLTAuNDA3LTAuMTI5LTAuOTQzLTAuMDc3LTEuNjA5YzAuMDUtMC42NjMsMC41MzctMS44NCwxLjQ1Ny0zLjUyNWMwLjkyLTEuNjg4LDIuMzI0LTMuMTY4LDQuMjE1LTQuNDQ2CgljMS44OS0xLjI3Nyw0Ljk4Mi0yLjQ1Myw5LjI3NS0zLjUyNUMxMTYuMjcyLDYxLjg1NCwxMjEuNDMzLDYxLjMxNywxMjcuNDYzLDYxLjMxN3ogTTEyOC41MzcsMTk0LjY4MwoJYy00LjcwMywwLTguODY4LTAuMzMyLTEyLjQ5NC0wLjk5NGMtMy42MjktMC42NjgtNi41MTUtMS41MS04LjY2MS0yLjUzYy0yLjE0Ny0xLjAyMi0zLjk4Ni0yLjE3My01LjUxOS0zLjQ0OQoJYy0xLjUzMy0xLjI4LTIuNTgzLTIuNTU3LTMuMTQ0LTMuODMzYy0wLjU2My0xLjI3Ni0wLjk5Ny0yLjQyNi0xLjMwMi0zLjQ0OWMtMC4zMDctMS4wMi0wLjQxLTEuODktMC4zMDctMi42MDV2LTAuOTJ2LTI5LjQzNAoJYzAtMy4yNjksMC41ODgtNi4xMzIsMS43NjQtOC41ODNjMS4xNzItMi40NTMsMi42MjktNC4yMTcsNC4zNjgtNS4yOWMxLjczNy0xLjA3MiwzLjQ0OS0xLjkxNSw1LjEzNy0yLjUyOQoJYzEuNjg2LTAuNjEyLDMuMDg5LTAuOTcsNC4yMTUtMS4wNzJoMS44NGgzMC42NThjMy40NzQsMCw2LjQ2NC0wLjY2NSw4Ljk2OC0xLjk5M2MyLjUwMi0xLjMyNyw0LjI5My0yLjkxMyw1LjM2Ni00Ljc1MwoJYzEuMDczLTEuODM5LDEuOTE3LTMuNjc3LDIuNTI5LTUuNTE4YzAuNjEzLTEuODQsMC45Ny0zLjQyNCwxLjA3My00Ljc1M3YtMS45OTNWOTUuMDQxaDEwLjg4NWMwLjIwMywwLDAuNTM3LDAsMC45OTcsMAoJYzAuNDU4LDAsMS4zMDIsMC4xODEsMi41MjksMC41MzZjMS4yMjYsMC4zNiwyLjQyNSwwLjg5NiwzLjYwMiwxLjYxYzEuMTczLDAuNzE2LDIuNDUzLDEuODkyLDMuODMyLDMuNTI2CgljMS4zOCwxLjYzNiwyLjU1NCwzLjU3NywzLjUyNiw1LjgyNmMwLjk3LDIuMjQ4LDEuODEzLDUuMjM2LDIuNTI5LDguOTY2YzAuNzE0LDMuNzMzLDEuMDczLDcuOTQ3LDEuMDczLDEyLjY0NgoJYzAsNC43MDMtMC4zODIsOC44OTMtMS4xNDksMTIuNTcyYy0wLjc2NiwzLjY3Ny0xLjc2Miw2LjYxNi0yLjk4OSw4LjgxM2MtMS4yMjYsMi4xOTktMi41ODMsNC4wNjItNC4wNjIsNS41OTYKCWMtMS40ODMsMS41MzItMi45NjQsMi42MDUtNC40NDYsMy4yMTljLTEuNDgxLDAuNjE0LTIuODM1LDEuMDcyLTQuMDYyLDEuMzhjLTEuMjI2LDAuMzA3LTIuMTk5LDAuNDEtMi45MTMsMC4zMDdoLTEuMjI2aC00My4yMjkKCXY0LjU5OGgzMC45NjZ2MTUuMzNjMC4xLDAuNDEsMC4xMjYsMC45NDYsMC4wNzcsMS42MTFjLTAuMDUzLDAuNjY0LTAuNTM3LDEuODM4LTEuNDU3LDMuNTIzYy0wLjkyLDEuNjg4LTIuMzI1LDMuMTY4LTQuMjE1LDQuNDQ2CgljLTEuODk0LDEuMjc3LTQuOTgyLDIuNDUzLTkuMjc1LDMuNTI1QzEzOS43MjgsMTk0LjE0NiwxMzQuNTY2LDE5NC42ODMsMTI4LjUzNywxOTQuNjgzeiBNMTE0LjM1Niw3My4yNzQKCWMtMS4wNzMtMS4xMjQtMi4zNzUtMS42ODgtMy45MDgtMS42ODhzLTIuODM2LDAuNTYzLTMuOTEsMS42ODhjLTEuMDczLDEuMTI2LTEuNjA5LDIuNTA1LTEuNjA5LDQuMTM5CgljMCwxLjYzNiwwLjUzNiwzLjAxNiwxLjYwOSw0LjEzOWMxLjA3MywxLjEyNiwyLjM3NywxLjY4OCwzLjkxLDEuNjg4czIuODM1LTAuNTYyLDMuOTA4LTEuNjg4YzEuMDc1LTEuMTIzLDEuNjExLTIuNTAzLDEuNjExLTQuMTM5CglDMTE1Ljk2Nyw3NS43NzksMTE1LjQzMSw3NC40LDExNC4zNTYsNzMuMjc0eiBNMTQxLjY0NCwxODIuNzI2YzEuMDczLDEuMTI2LDIuMzc1LDEuNjg4LDMuOTA4LDEuNjg4czIuODM2LTAuNTYyLDMuOTEtMS42ODgKCWMxLjA3My0xLjEyMywxLjYwOS0yLjUwMSwxLjYwOS00LjEzOWMwLTEuNjMzLTAuNTM2LTMuMDEzLTEuNjA5LTQuMTM5Yy0xLjA3My0xLjEyMy0yLjM3Ny0xLjY4Ni0zLjkxLTEuNjg2CglzLTIuODM1LDAuNTYyLTMuOTA4LDEuNjg2Yy0xLjA3NSwxLjEyNi0xLjYxMSwyLjUwNi0xLjYxMSw0LjEzOUMxNDAuMDMzLDE4MC4yMjUsMTQwLjU2OSwxODEuNjAzLDE0MS42NDQsMTgyLjcyNnoiLz4KPC9zdmc+Cg=="
},
{
  "@context": "http://schema.org",
  "@type": "ComputerLanguage",
  "name": "Ruby",
  "description": "汎用プログラミング言語",
  "disambiguatingDescription": "構造化、命令型、オブジェクト指向。",
  "mainEntityOfPage": "http://www.ruby-lang.org/ja/",
  "url": "https://ja.wikipedia.org/wiki/Ruby",
  "image": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjU2IDI1NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik01Ni4xNjEsMTgzLjAyOGw0LjQ1Mi00My4xNjJsNy45MDQsNi41ODRMNTYsMTg1LjMzNUw1Ni4xNjEsMTgzLjAyOHogTTcwLjgyMywxNTIuMDU1bDE5LjYxLDM5LjA0NmwtMzIuOTUxLDQuMTE2CgkJTDcwLjgyMywxNTIuMDU1eiBNOTIuNzM5LDE5NS41NTJ2MC4xNjFWMTk1LjU1MmwwLjY1Ny0wLjE2MXYwLjE2MWw5My4wOTUsMy42MmwtMTI2LjcwMywwLjQ5Nkw5Mi43MzksMTk1LjU1MnogTTEyNy45OTcsOTAuNjA0CgkJbC0zMC42NDUsMzQuMDk4bC0yNy4xODYsMTcuMTM3bC03Ljc0My02LjU4NGwxMC44NzQtMjAuNDM1bDI1Ljg3Mi0yOC44NDJsMjQuNzExLTE3LjI5N2wxMS4zNzEsMy4xMzhMMTI3Ljk5Nyw5MC42MDR6CgkJIE05MC4yNjYsMTgyLjAzNmwtMTguMTIyLTM2LjA4MmwyNS4zNzUtMTYuMTQ0TDkwLjI2NiwxODIuMDM2eiBNMTU0LjY5MywxNDEuMTgxbC02MS4xMjksNDguMjcxbDguMjQtNTkuMzA2TDE1NC42OTMsMTQxLjE4MXoKCQkgTTE1OC4xNTIsMTQ0LjQ3OWwzOC4wNiw1MS41NjlsLTk4LjUzMi0zLjc5NUwxNTguMTUyLDE0NC40Nzl6IE0xMzAuNjM4LDk0LjU0NmwyMi43MzQsNDMuMDE1bC01MS4yNDEtMTEuMzcxTDEzMC42MzgsOTQuNTQ2egoJCSBNMTcxLjAwNCw1Ni4zMzJsLTM0LjExMSwxMS4wMzVsLTYuMDk0LTEuNjQ5TDE3MS4wMDQsNTYuMzMyeiBNMTMyLjk0NSw5MC42MDRsNy41NzYtMTkuMjgxbDQyLjE4Myw2Ljc1OEwxMzIuOTQ1LDkwLjYwNHoKCQkgTTEzNC45MjIsOTQuNTQ2bDUzLjg3NS0xNC40OTRsLTMwLjk3Myw1Ny44M0wxMzQuOTIyLDk0LjU0NnogTTE5NC4yMzQsNzYuMjU3bC00NS4xNDYtNy44OTdsMzYuMDgyLTExLjcwNkwxOTQuMjM0LDc2LjI1N3oKCQkgTTIwMCwxOTUuMzkxbC0zOS4yMTMtNTMuMjE4bDMzLjk0My02My42MDlMMjAwLDE5NS4zOTF6Ii8+CjwvZz4KPC9zdmc+Cg=="
}]
</script>
<script type="text/javascript" src="./loadJsonLD.js"></script>
</head>
<body>
  <a href="https://github.com/hwkr/BitIcon">BitIcon</a>
  <a href="https://github.com/hwkr/BitIcon/blob/master/LICENSE">Copyright (c) 2015 Ben Hawker</a>
</body>
</html>

            
          
!
            
              .LangImg {
  transition: all 200ms 0s ease;
}
.LangImg:hover {
  background: #ccc;
  width: 96px;
  height: 96px;
}
            
          
!
            
              window.onload = function () {
  langs = JSON.parse(document.getElementById('lang-ld').text);
  document.body.insertBefore(createLanguageTags(langs), document.body.firstChild);
};
function createLanguageTags(langs)
{
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < langs.length; i++)
  {      
  fragment.appendChild(createImageLinkTag(langs[i].image, langs[i].url, langs[i].description));
  }
  fragment.appendChild(document.createElement('br'));
  return fragment;
}
function createImageLinkTag(src, href, title)
{
  var a = document.createElement('a');
  a.appendChild(crateImageTag(src));
  //a.appendChild(crateImageByObjectTag(src));
  a.setAttribute("href", href);
  a.setAttribute("title", title);
  return a;
}
function crateImageTag(src)
{
  var img = document.createElement('img');
  img.setAttribute("src", src);
  img.setAttribute("width", 64);
  img.setAttribute("width", 64);
  img.setAttribute("class", "LangImg");
  return img;
}
            
          
!
999px
Loading ..................

Console