Document

{"pageProps":{"codingContents":{"contents":[{"id":"html","createdAt":"2021-01-08T13:07:03.546Z","updatedAt":"2021-11-02T14:36:41.944Z","publishedAt":"2021-01-08T13:07:03.546Z","revisedAt":"2021-11-02T14:36:41.944Z","title":"HTML","Categories":[{"fieldId":"category","categoryName":"head","enTitle":"Head Tag","jaTitle":"headタグで頻繁に使用する内容","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-html.png","height":80,"width":82},"postsType":["code"],"posts":[{"fieldId":"contents","title":"セット","externalLink":false,"code":"\n \n \n \n Document\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n","lang":"htmlbars"},{"fieldId":"contents","title":"ファビコン","externalLink":false,"code":"","lang":"htmlbars"},{"fieldId":"contents","title":"タッチアイコン","externalLink":false,"code":"\n","lang":"htmlbars"},{"fieldId":"contents","title":"OGP","externalLink":false,"code":"\n\n\n\n\n\n\n","lang":"htmlbars"},{"fieldId":"contents","title":"SEO関連","externalLink":false,"code":"\n","lang":"htmlbars"},{"fieldId":"contents","title":"スマホ向け電話番号自動リンク無効","externalLink":false,"code":"","lang":"htmlbars"},{"fieldId":"contents","title":"GoogleFonts(日本語)","externalLink":false,"code":"\n","lang":"htmlbars"},{"fieldId":"contents","title":"クローラー","externalLink":false,"code":"","lang":"htmlbars"}]}]},{"id":"css","createdAt":"2021-03-17T06:10:58.297Z","updatedAt":"2021-11-02T14:53:47.847Z","publishedAt":"2021-03-17T06:14:09.543Z","revisedAt":"2021-11-02T14:53:47.847Z","title":"CSS","Categories":[{"fieldId":"category","categoryName":"リセット","enTitle":"Reset CSS","jaTitle":"リセットCSS","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-html.png","height":80,"width":82},"postsType":["code"],"posts":[{"fieldId":"contents","title":"HTML5 Doctor Reset CSS 2.0 Base","externalLink":false,"code":"html, body, div, span, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\nabbr, address, cite, code,\ndel, dfn, em, img, ins, kbd, q, samp,\nsmall, strong, sub, sup, var,\nb, i,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section, summary,\ntime, mark, audio, video {\n margin:0;\n padding:0;\n border:0;\n outline:0;\n font-size:100%;\n vertical-align:baseline;\n background:transparent;\n}\nbody {\n line-height:1;\n}\narticle,aside,details,figcaption,figure,\nfooter,header,hgroup,menu,nav,section,main {\n display:block;\n}\nol, ul {\n list-style: none;\n}\nblockquote, q {\n quotes:none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n content:\"\";\n content:none;\n}\na {\n margin:0;\n padding:0;\n font-size:100%;\n vertical-align:baseline;\n background:transparent;\n}\nins {\n background-color:#ff9;\n color:#333;\n text-decoration:none;\n}\nmark {\n background-color:#ff9;\n color:#333;\n font-style:italic;\n font-weight:bold;\n}\ndel {\n text-decoration: line-through;\n}\nabbr[title], dfn[title] {\n border-bottom:1px dotted;\n cursor:help;\n}\ntable {\n border-collapse:collapse;\n border-spacing:0;\n}\nhr {\n display:block;\n height:1px;\n border:0;\n border-top:1px solid #cccccc;\n margin:1em 0;\n padding:0;\n}\ninput, select {\n vertical-align:middle;\n}","lang":"css"},{"fieldId":"contents","title":"ress","url":"https://github.com/filipelinhares/ress","externalLink":false,"code":"/* # =================================================================\n # Global selectors\n # ================================================================= */\n\nhtml {\n box-sizing: border-box;\n overflow-y: scroll; /* All browsers without overlaying scrollbars */\n -webkit-text-size-adjust: 100%; /* iOS 8+ */\n}\n\n*,\n::before,\n::after {\n background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */\n box-sizing: inherit;\n}\n\n::before,\n::after {\n text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */\n vertical-align: inherit;\n}\n\n* {\n padding: 0; /* Reset `padding` and `margin` of all elements */\n margin: 0;\n}\n\n/* # =================================================================\n # General elements\n # ================================================================= */\n\n/* Add the correct display in iOS 4-7.*/\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\nhr {\n overflow: visible; /* Show the overflow in Edge and IE */\n}\n\n/*\n* Correct `block` display not defined for any HTML5 element in IE 8/9\n* Correct `block` display not defined for `details` or `summary` in IE 10/11\n* and Firefox\n* Correct `block` display not defined for `main` in IE 11\n*/\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nmain,\nmenu,\nnav,\nsection,\nsummary {\n display: block;\n}\n\nsummary {\n display: list-item; /* Add the correct display in all browsers */\n}\n\nsmall {\n font-size: 80%; /* Set font-size to 80% in `small` elements */\n}\n\n[hidden],\ntemplate {\n display: none; /* Add the correct display in IE */\n}\n\nabbr[title] {\n border-bottom: 1px dotted; /* Add a bordered underline effect in all browsers */\n text-decoration: none; /* Remove text decoration in Firefox 40+ */\n}\n\na {\n background-color: transparent; /* Remove the gray background on active links in IE 10 */\n -webkit-text-decoration-skip: objects; /* Remove gaps in links underline in iOS 8+ and Safari 8+ */\n}\n\na:active,\na:hover {\n outline-width: 0; /* Remove the outline when hovering in all browsers */\n}\n\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, monospace; /* Specify the font family of code elements */\n}\n\nb,\nstrong {\n font-weight: bolder; /* Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+ */\n}\n\ndfn {\n font-style: italic; /* Address styling not present in Safari and Chrome */\n}\n\n/* Address styling not present in IE 8/9 */\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/* https://gist.github.com/unruthless/413930 */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* # =================================================================\n # Forms\n # ================================================================= */\n\ninput {\n border-radius: 0;\n}\n\n/* Apply cursor pointer to button elements */\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"],\n[role=\"button\"] {\n cursor: pointer;\n}\n\n/* Replace pointer cursor in disabled elements */\n[disabled] {\n cursor: default;\n}\n\n[type=\"number\"] {\n width: auto; /* Firefox 36+ */\n}\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* Safari 8+ */\n}\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none; /* Safari 8 */\n}\n\ntextarea {\n overflow: auto; /* Internet Explorer 11+ */\n resize: vertical; /* Specify textarea resizability */\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font: inherit; /* Specify font inheritance of form elements */\n}\n\noptgroup {\n font-weight: bold; /* Restore the font weight unset by the previous rule. */\n}\n\nbutton {\n overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */\n}\n\n/* Remove inner padding and border in Firefox 4+ */\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: 0;\n padding: 0;\n}\n\n/* Replace focus style removed in the border reset above */\nbutton:-moz-focusring,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n outline: 1px dotted ButtonText;\n}\n\nbutton,\nhtml [type=\"button\"], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */\n}\n\nbutton,\nselect {\n text-transform: none; /* Firefox 40+, Internet Explorer 11- */\n}\n\n/* Remove the default button styling in all browsers */\nbutton,\ninput,\nselect,\ntextarea {\n background-color: transparent;\n border-style: none;\n color: inherit;\n}\n\n/* Style select like a standard input */\nselect {\n -moz-appearance: none; /* Firefox 36+ */\n -webkit-appearance: none; /* Chrome 41+ */\n}\n\nselect::-ms-expand {\n display: none; /* Internet Explorer 11+ */\n}\n\nselect::-ms-value {\n color: currentColor; /* Internet Explorer 11+ */\n}\n\nlegend {\n border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */\n color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */\n display: table; /* Correct the text wrapping in Edge and IE */\n max-width: 100%; /* Correct the text wrapping in Edge and IE */\n white-space: normal; /* Correct the text wrapping in Edge and IE */\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* Correct the inability to style clickable types in iOS and Safari */\n font: inherit; /* Change font properties to `inherit` in Chrome and Safari */\n}\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */\n outline-offset: -2px; /* Correct the outline style in Safari */\n}\n\n/* # =================================================================\n # Specify media element style\n # ================================================================= */\n\nimg {\n border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */\n}\n\n/* Add the correct vertical alignment in Chrome, Firefox, and Opera */\nprogress {\n vertical-align: baseline;\n}\n\nsvg:not(:root) {\n overflow: hidden; /* Internet Explorer 11- */\n}\n\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block; /* Internet Explorer 11+, Windows Phone 8.1+ */\n}\n\n/* # =================================================================\n # Accessibility\n # ================================================================= */\n\n/* Hide content from screens but not screenreaders */\n@media screen {\n [hidden~=\"screen\"] {\n display: inherit;\n }\n [hidden~=\"screen\"]:not(:active):not(:focus):not(:target) {\n position: absolute !important;\n clip: rect(0 0 0 0) !important;\n }\n}\n\n/* Specify the progress cursor of updating elements */\n[aria-busy=\"true\"] {\n cursor: progress;\n}\n\n/* Specify the pointer cursor of trigger elements */\n[aria-controls] {\n cursor: pointer;\n}\n\n/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */\n[aria-disabled] {\n cursor: default;\n}\n\n/* # =================================================================\n # Selection\n # ================================================================= */\n\n/* Specify text selection background color and omit drop shadow */\n\n::-moz-selection {\n background-color: #b3d4fc; /* Required when declaring ::selection */\n color: #000;\n text-shadow: none;\n}\n\n::selection {\n background-color: #b3d4fc; /* Required when declaring ::selection */\n color: #000;\n text-shadow: none;\n}","lang":"css"}]},{"fieldId":"category","categoryName":"ベース","enTitle":"Base CSS","jaTitle":"よく使用する初期設定","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-basecss.png","height":45,"width":50},"postsType":["code"],"posts":[{"fieldId":"contents","title":"Base","externalLink":false,"code":"/*\n Base\n---------------------------------------------- */\nhtml {\n box-sizing: border-box;\n height: 100%;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\nbody {\n height: 100%;\n font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'MS P Gothic', sans-serif;\n font-size: 1rem;\n line-height: 1.5;\n color: #14171a;\n letter-spacing: 0.05em;\n background-color: #fafafa;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n vertical-align: bottom;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nstrong {\n font-weight: bold;\n}\n\ninput,\ntextarea {\n max-width: 100%;\n font-family: inherit;\n font-size: 100%;\n}","lang":"css"},{"fieldId":"contents","title":"フォント","externalLink":false,"code":"font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳＰゴシック', 'MS P Gothic', sans-serif;\nfont-family: \"Helvetica Neue\", \"Helvetica\", \"Hiragino Sans\", \"Hiragino Kaku Gothic ProN\", \"Arial\", \"Yu Gothic\", \"Meiryo\", sans-serif;\nfont-family: \"Times New Roman\", \"YuMincho\", \"Hiragino Mincho ProN\", \"Yu Mincho\", \"MS PMincho\", serif;","lang":"css"}]}]},{"id":"sass","createdAt":"2021-03-17T05:52:45.309Z","updatedAt":"2021-11-02T16:45:25.464Z","publishedAt":"2021-03-17T05:57:32.794Z","revisedAt":"2021-11-02T16:45:25.464Z","title":"Sass","Categories":[{"fieldId":"category","categoryName":"function","enTitle":"function","jaTitle":"関数設定","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-commonsass.png","height":45,"width":45},"postsType":["code"],"posts":[{"fieldId":"contents","title":"_function.scss ( LibSass )","externalLink":false,"code":"/**\n * 引数のfontSizeをremに変換する関数\n * @param fontSize フォントサイズ\n *\n * 例）18pxをremに変換\n * font-size: fz(18);\n */\n@function fz($fontSize) {\n @return ($fontSize / 16) * 1rem;\n}\n\n/**\n * 引数の最大画面サイズから指定されたpx数を元にvwに変換する関数\n * @param maxScreenSize 最大画面サイズ\n * @param px 変換するpx数\n * \n * 例）1440pxの幅に対して560pxの要素を可変させる\n * width: vw(1440, 560);\n */\n@function vw($maxScreenSize, $px) {\n @return (($px / $maxScreenSize) * 100) * 1vw;\n}\n\n/**\n * 引数のfontSizeを元に指定されたpx数をemに変換する関数\n * @param px 変換するpx数\n * @param fontSize フォントサイズ\n *\n * 例）font-sizeが24pxの要素の下に80pxのmarginをem換算で設定する\n * margin-bottom: em(80, 24);\n * \n * font-sizeが16pxであれば第２引数は省略可能\n * margin-bottom: em(40);\n */\n@function em($px, $fontSize: 16) {\n @return ($px / $fontSize) * 1em;\n}","lang":"scss"},{"fieldId":"contents","title":"_function.scss ( Dart Sass )","externalLink":false,"code":"@use \"sass:math\";\n\n/**\n * 引数のfontSizeをremに変換する関数\n * @param fontSize フォントサイズ\n *\n * 例）18pxをremに変換\n * font-size: fz(18);\n */\n@function fz($fontSize) {\n @return math.div($fontSize, 16) * 1rem;\n}\n\n/**\n * 引数の最大画面サイズから指定されたpx数を元にvwに変換する関数\n * @param maxScreenSize 最大画面サイズ\n * @param px 変換するpx数\n * \n * 例）1440pxの幅に対して560pxの要素を可変させる\n * width: vw(1440, 560);\n */\n@function vw($maxScreenSize, $px) {\n @return (math.div($px, $maxScreenSize) * 100) * 1vw;\n}\n\n/**\n * 引数のfontSizeを元に指定されたpx数をemに変換する関数\n * @param px 変換するpx数\n * @param fontSize フォントサイズ\n *\n * 例）font-sizeが24pxの要素の下に80pxのmarginをem換算で設定する\n * margin-bottom: em(80, 24);\n * \n * font-sizeが16pxであれば第２引数は省略可能\n * margin-bottom: em(40);\n */\n@function em($px, $fontSize: 16) {\n @return math.div($px, $fontSize) * 1em;\n}","lang":"scss"}]},{"fieldId":"category","categoryName":"mixin","enTitle":"Mixin Setting","jaTitle":"主にメディアクエリをmixinにて設定","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-mixinsass.png","height":512,"width":512},"postsType":["code"],"posts":[{"fieldId":"contents","title":"_mixin.scss(モバイルファースト)","externalLink":false,"code":"/**\n * レスポンシブ\n * - sm: 480px〜\n * - md: 768px〜\n * - lg: 1024px〜\n * - xl: 1200px〜\n * - xxl: 1480px〜\n * \n * 例）\n * @include mq() { ... }\n * @include mq(xxl) { ... }\n * @include mq(sm, max) { ... }\n */\n$breakpoints: (\n 'sm': 480px,\n 'md': 768px,\n 'lg': 1024px,\n 'xl': 1200px,\n 'xxl': 1480px,\n) !default;\n\n@mixin mq($breakpoint: md, $type: min) {\n @if map.has-key($breakpoints, $breakpoint) {\n @if ($type == max) {\n $width: map.get($breakpoints, $breakpoint);\n $width: $width - 1;\n @media screen and (max-width: #{$width}) {\n @content;\n }\n } @else if($type == min) {\n @media screen and (min-width: #{map.get($breakpoints, $breakpoint)}) {\n @content;\n }\n }\n }\n}","lang":"scss"}]}]},{"id":"cdn","createdAt":"2021-03-17T06:02:39.251Z","updatedAt":"2021-06-03T09:53:21.491Z","publishedAt":"2021-03-17T06:05:41.558Z","revisedAt":"2021-06-03T09:53:21.491Z","title":"CDN","Categories":[{"fieldId":"category","categoryName":"jQuery","enTitle":"jQuery","jaTitle":"jQueryの読み込み","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-commonsass.png","height":45,"width":45},"postsType":["code"],"posts":[{"fieldId":"contents","title":"jQuery 3.x 圧縮版","externalLink":false,"code":"","lang":"htmlbars"},{"fieldId":"contents","title":"jQuery 2.x(IE9以降に対応。) 圧縮版","externalLink":false,"code":"","lang":"htmlbars"}]},{"fieldId":"category","categoryName":"Vue.js","enTitle":"Vue.js","jaTitle":"vue.jsの読み込み","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-mixinsass.png","height":512,"width":512},"postsType":["code"],"posts":[{"fieldId":"contents","title":"Vue.js 本番用圧縮版","url":"https://jp.vuejs.org/v2/guide/","externalLink":true,"code":"","lang":"htmlbars"}]},{"fieldId":"category","categoryName":"FontAwesome","enTitle":"FontAwesome","jaTitle":"FontAwesomeの読み込み","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-cdn.png","height":80,"width":75},"postsType":["code"],"posts":[{"fieldId":"contents","title":"FontAwesome5","externalLink":false,"code":"","lang":"htmlbars"},{"fieldId":"contents","title":"旧バージョン","externalLink":false,"code":"","lang":"htmlbars"}]}]},{"id":"tool","createdAt":"2021-01-08T12:57:12.135Z","updatedAt":"2022-09-25T08:43:35.761Z","publishedAt":"2021-01-08T12:57:12.135Z","revisedAt":"2022-09-25T08:43:35.761Z","title":"ツール","Categories":[{"fieldId":"category","categoryName":"変換","enTitle":"Converter","jaTitle":"変換系ツール","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-convat.svg","height":856,"width":1065},"postsType":["cardList"],"posts":[{"fieldId":"contents","title":"コーディング単位計算ツール","url":"https://coding-calc.com/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/47ff06fb7eac4396aa6a9804ae5402b7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-01%2018.58.32.png","height":428,"width":881},"description":"コーディング時に面倒な単位の計算ができる自家製計算機。ちょこちょこテーマ変えてます。"},{"fieldId":"contents","title":"Font-familyメーカー","url":"https://saruwakakun.com/font-family","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/115b1129416f4eaf9d71df7fb5275b2b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-08-01%2018.52.49.png","height":698,"width":1439},"description":"コーディングで使用したいフォントをWindows、Mac、iOSから選んでドラッグするだけで、font-familyに設定する値を表示してくれるニッチだけどとてもありがたいツール。"},{"fieldId":"contents","title":"base64エンコーダー","url":"https://lab.syncer.jp/Tool/Base64-encode/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-base64-encoder.png","height":1282,"width":2880},"description":"SVGファイルをアップロードするとCSSで使えるコードに変換してくれるツール。"},{"fieldId":"contents","title":"ファビコン作成","url":"https://ao-system.net/alphaicon/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-favicon.png","height":1396,"width":2880},"description":"ガラケーサイトを思わせるサイトデザインだが、直感的にファビコンを作れるのでスキ。"},{"fieldId":"contents","title":"patternify","url":"http://www.patternify.com/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-patternify.png","height":1396,"width":2880},"description":"ストライプ、ドットパターンを画像やCSSで容易に生成できるツール。"}]},{"fieldId":"category","categoryName":"チェック","enTitle":"Check","jaTitle":"納品前のチェックにも使えるツール","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-check.svg","height":512,"width":512},"postsType":["cardList"],"posts":[{"fieldId":"contents","title":"文字数カウンター","url":"https://ao-system.net/lettercounter/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-lettercounter.png","height":840,"width":1864},"description":"リアルタイム対応の文字数カウンター。meta要素とか文字数制限のあるものに使ったり。"},{"fieldId":"contents","title":"HTML5 子要素・親要素対応","url":"https://yoshikawaweb.com/element/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-yoshikawaweb.png","height":1362,"width":2748},"description":"HTMLの親子関係のルールに沿って使用して良いタグをハイライトしてくれる便利ツール。初心者に広めたい。"},{"fieldId":"contents","title":"W3C HTML check","url":"https://validator.w3.org/#validate_by_input","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-w3c-html-check.png","height":1374,"width":2880},"description":"W3Cによる厳格なHTMLバリデーションチェックページ。結構厳しいよw"},{"fieldId":"contents","title":"Can I use？","url":"https://caniuse.com/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-can-i-use.png","height":1394,"width":2880},"description":"各種ブラウザでプロパティなどが対応しているか調べることができるツール。"},{"fieldId":"contents","title":"HTML 5 Outliner","url":"https://gsnedders.html5.org/outliner/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-html-5-outliner.png","height":1398,"width":2880},"description":"HTMLのアウトラインチェックツール。URLをそのまま貼り付けるでも、ソースコードを貼り付けるでも確認可能。"},{"fieldId":"contents","title":"シェアデバッカー","url":"https://developers.facebook.com/tools/debug/sharing/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-facebook-debucker.png","height":1312,"width":2864},"description":"FacebookのOGPの設定を確認できる開発者用のページ。"},{"fieldId":"contents","title":"Card validator","url":"https://cards-dev.twitter.com/validator","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-twitter-card.png","height":1398,"width":2880},"description":"Twitterカードの表示チェックができる開発者用ページ。"},{"fieldId":"contents","title":"OGP画像シミュレータ","url":"http://ogimage.tsmallfield.com/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-ogp-simulator.png","height":1390,"width":2880},"description":"画像をドラッグ＆ドロップすると様々なサイズでタイムライン上でどのように見えるか確認できるツール。"},{"fieldId":"contents","title":"リッチリザルトテスト","url":"https://search.google.com/test/rich-results","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/00ce0dac029540169d32bce8d887d042/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-09-25%2017.39.21.png","height":1764,"width":2696},"description":"構造化データに対応しているか確認できるツール。公開しているページであればURL、未公開のページであればコードを貼り付けでチェックできる。"}]},{"fieldId":"category","categoryName":"納品","enTitle":"Delivery","jaTitle":"納品時の作業で必要なツール","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-delivery.svg","height":512,"width":512},"postsType":["cardList"],"posts":[{"fieldId":"contents","title":"Refresh-SF","url":"https://refresh-sf.com/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-refresh-sf.png","height":1398,"width":2880},"description":"HTML、CSS、JavaScriptをサイト上で圧縮するツール。コピペするだけなのでnodeが使えない環境なんかに。"},{"fieldId":"contents","title":"TinyPNG","url":"https://tinypng.com/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/image-tinyping.png","height":860,"width":2026},"description":"パンダで有名な無料画像圧縮サイト。5MB以上だったり、20枚以上を一気に圧縮することができないなどの制限はあるものの、数枚であれば無料でも十分に使える。簡易的に画像圧縮したいときに。"}]}]},{"id":"references","createdAt":"2021-06-03T08:40:23.916Z","updatedAt":"2021-06-03T08:42:19.569Z","publishedAt":"2021-06-03T08:40:23.916Z","revisedAt":"2021-06-03T08:40:23.916Z","title":"参考","Categories":[{"fieldId":"category","categoryName":"参考サイト","enTitle":"reference","jaTitle":"参考サイト","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-reference.png","height":64,"width":83},"postsType":["thumbnail"],"posts":[{"fieldId":"contents","title":"HTMLリファレンス","url":"http://www.tohoho-web.com/html/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/a08368ea0fa240cfa2065e071a6d5a9a/image-html.png","height":433,"width":700},"alt":"HTML"},{"fieldId":"contents","title":"HTML特殊文字コード表","url":"http://www.shurey.com/js/labo/character.html","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/a08368ea0fa240cfa2065e071a6d5a9a/image-html.png","height":433,"width":700},"alt":"HTML"},{"fieldId":"contents","title":"HTMLコンテンツモデル","url":"http://www.htmq.com/html5/007.shtml","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/a08368ea0fa240cfa2065e071a6d5a9a/image-html.png","height":433,"width":700}},{"fieldId":"contents","title":"CSS3リファレンス","url":"http://www.htmq.com/css3/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/57b195175c044142839335dfc8f2f99b/image-css.png","height":433,"width":700},"alt":"CSS"},{"fieldId":"contents","title":"Flexboxチートシート","url":"https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/57b195175c044142839335dfc8f2f99b/image-css.png","height":433,"width":700},"alt":"CSS"},{"fieldId":"contents","title":"CSS gridチートシート","url":"https://culage.github.io/flexbox_grid_cheat_sheet/css3_grid%E3%83%81%E3%83%BC%E3%83%88%E3%82%B7%E3%83%BC%E3%83%88.html","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/57b195175c044142839335dfc8f2f99b/image-css.png","height":433,"width":700},"alt":"CSS"},{"fieldId":"contents","title":"Emmetチートシート","url":"https://docs.emmet.io/cheat-sheet/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/1c7e276182aa46f1ba020574d6df4546/image-emmet.png","height":433,"width":700},"alt":"emmet"},{"fieldId":"contents","title":"jQueryリファレンス","url":"http://semooh.jp/jquery/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/158ffbb781c24c61b68da31ebeac25cb/image-jquery.png","height":433,"width":700},"alt":"jQuery"},{"fieldId":"contents","title":"【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ","url":"https://wemo.tech/2101","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/158ffbb781c24c61b68da31ebeac25cb/image-jquery.png","height":433,"width":700},"alt":"jQuery"},{"fieldId":"contents","title":"JavaScriptリファレンス","url":"http://js.studio-kingdom.com/javascript/","externalLink":true,"image":{"url":"https://images.microcms-assets.io/assets/342541f24ff844f88cd3f72e892f7bf4/be4c99f3cb5e4b50896b6358ecf3be28/image-javascript.png","height":433,"width":700},"alt":"JavaScript"}]}]}],"totalCount":6,"offset":0,"limit":10},"codingContent":{"id":"html","createdAt":"2021-01-08T13:07:03.546Z","updatedAt":"2021-11-02T14:36:41.944Z","publishedAt":"2021-01-08T13:07:03.546Z","revisedAt":"2021-11-02T14:36:41.944Z","title":"HTML","Categories":[{"fieldId":"category","categoryName":"head","enTitle":"Head Tag","jaTitle":"headタグで頻繁に使用する内容","icon":{"url":"https://images.microcms-assets.io/protected/ap-northeast-1:b7599113-36d1-4105-9bdc-e29b6d1179fe/service/odogubako/media/icon-html.png","height":80,"width":82},"postsType":["code"],"posts":[{"fieldId":"contents","title":"セット","externalLink":false,"code":"\n \n \n \n Document\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n","lang":"htmlbars"},{"fieldId":"contents","title":"ファビコン","externalLink":false,"code":"","lang":"htmlbars"},{"fieldId":"contents","title":"タッチアイコン","externalLink":false,"code":"\n","lang":"htmlbars"},{"fieldId":"contents","title":"OGP","externalLink":false,"code":"\n\n\n\n\n\n\n","lang":"htmlbars"},{"fieldId":"contents","title":"SEO関連","externalLink":false,"code":"\n","lang":"htmlbars"},{"fieldId":"contents","title":"スマホ向け電話番号自動リンク無効","externalLink":false,"code":"","lang":"htmlbars"},{"fieldId":"contents","title":"GoogleFonts(日本語)","externalLink":false,"code":"\n","lang":"htmlbars"},{"fieldId":"contents","title":"クローラー","externalLink":false,"code":"","lang":"htmlbars"}]}]}},"__N_SSG":true}