今回ã¯CSSã®displayプãƒãƒ‘ティをマスターã—ã¾ã—ょã†ã€‚å°‘ã—分ã‹ã‚Šã¥ã‚‰ã„内容ã§ã¯ã‚ã‚Šã¾ã™ãŒã€Webサイトを作るãŸã‚ã«ã¯å¿…ãšç†è§£ã—ã¦ãŠãå¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚
ã€CSS】displayã®ä½¿ã„方をç·ã¾ã¨ã‚ï¼inlineã‚„blockã®é•ã„ã¯ï¼Ÿ
今回ã¯CSSã®displayプãƒãƒ‘ティをマスターã—ã¾ã—ょã†ã€‚å°‘ã—分ã‹ã‚Šã¥ã‚‰ã„内容ã§ã¯ã‚ã‚Šã¾ã™ãŒã€Webサイトを作るãŸã‚ã«ã¯å¿…ãšç†è§£ã—ã¦ãŠãå¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚
ã¯ã¦ãªãƒ–ãƒã‚°ã®idã¨ã‹classã¨ã‹ - kyabana's blog
ã¯ã¦ãªãƒ–ãƒã‚°ã§ã€Œãƒ‡ã‚¶ã‚¤ãƒ³ãƒ†ãƒ¼ãƒžã‚³ãƒ³ãƒ†ã‚¹ãƒˆã€ãŒé–‹å‚¬ã•ã‚Œã¦ã„ã¾ã™ï¼ オリジナルデザインを投稿ã—ã¦Amazonギフト券を当ã¦ã‚ˆã†ï¼ 「ã¯ã¦ãªãƒ–ãƒã‚° デザインテーマコンテストã€é–‹å‚¬ - ã¯ã¦ãªãƒ–ãƒã‚°é–‹ç™ºãƒ–ãƒã‚° 使ã‚ã‚Œã¦ã„ã‚‹"id"ã‚„"class"ãŒã‚ã‹ã£ã¦ã„る㨠デザインã—ã‚„ã™ã„ã®ã§ã‚¶ãƒƒã‚¯ãƒªã•ã‚‰ã£ã¦ã¿ã¾ã—ãŸã€‚ ãŠãŠã‚ˆãã“ã‚“ãªæ„Ÿã˜ã€‚ body（トップページã§.page-indexã€è¨˜äº‹ãƒšãƒ¼ã‚¸ã§.page-entryãŒè¿½åŠ ）div#globalheader-containeriframe#globalheader（ヘッダ[メニューやHatena Blogãƒã‚´ã€Hatenaãƒã‚´ãªã©]）div#containerdiv#container-innerheader#blog-titlediv#blog-title-inner（タイトル画åƒï¼‰h1#title（ブãƒã‚°å）h2#blog-description（
ç§ã®ã‚´ãƒ¼ãƒ«ã¯ä¸–ç•Œä¸ã®è¨€èªžã§CSSを使ãˆã‚‹ã‚ˆã†ã«ã™ã‚‹ã“㨠EPUB3ã§ç¸¦æ›¸ãを実ç¾ã—ãŸã€fantasai（エリカ・エテマッド）ã«èžã
ã¯ã˜ã‚㫠​ ã“ã®åŽŸç¨¿ã¯2013å¹´ã«8割ã»ã©æ›¸ã„ãŸã¾ã¾æ”¾ç½®ã—ã¦ã„ãŸã‚‚ã®ã‚’ã€Advanced Publishing Laboratory（APL）ã®ã€Œfantasaiã®æ¥ç¸¾ã‚’日本ã§ã‚‚知ã£ã¦ã‚‚らã„ãŸã„ã€ã¨ã„ã†æ„å¿—ã«ä¿ƒã•ã‚Œã€ã‚µãƒ«ãƒ™ãƒ¼ã‚¸ã—ã¦å®Œæˆã•ã›ãŸã‚‚ã®ã§ã™ã€‚ã—ãŸãŒã£ã¦æ–‡ä¸ã®ã€Œç¾åœ¨ã€ã¯2013å¹´ä¸é ƒã§ã‚ã‚‹ã“ã¨ã‚’ãŠæ–ã‚Šã—ã¾ã™ã€‚ 原稿を放置ã—ãŸã¾ã¾ä»Šæ—¥ã«è‡³ã£ãŸã®ã¯ã€ç§ã®æ€ 慢以外ã«ç†ç”±ã¯ã‚ã‚Šã¾ã›ã‚“。å–æã‚’å—ã‘ã¦ãã ã•ã£ãŸfantasaiã€é€šè¨³ã‚’ã¯ã˜ã‚ã€ã•ã¾ã–ã¾ãªä¾¿å®œã‚’図ã£ã¦ãã ã•ã£ãŸæ‘上真雄・由美ã”夫妻ã«ã¯ã€å¤§å¤‰ãªã”迷惑をãŠã‹ã‘ã—ãŸã“ã¨ã‚’改ã‚ã¦æ·±ããŠè©«ã³è‡´ã—ã¾ã™ã€‚ ã“ã®ã‚ˆã†ãªä¸é€”åŠç«¯ãªåŽŸç¨¿ã§ã™ãŒã€å¤šå°‘ãªã‚Šã¨ã‚‚èªã‚ã‚‹ã‚‚ã®ã«ãªã£ã¦ã„ã‚‹ã¨ã™ã‚Œã°ã€ãã‚Œã¯fantasaiã®åŠªåŠ›ã‚„é”æˆãŒæœ¬ç‰©ã ã£ãŸã‹ã‚‰ã§ã¯ãªã„ã§ã—ょã†ã‹ã€‚ãã®ã“ã¨ã‚’ãŠä¼ãˆã§ãã‚Œã°è‰¯ã„ã®ã§ã™ãŒã€‚（2018å¹´9月5日　ç†è€…è˜ï¼‰ â–¼EPUB 3ã«ãŠã‘ã‚‹é™°ã®
モダン日本語フォント指定
CSSã®font-familyã§æ¸¸ã‚´ã‚·ãƒƒã‚¯ã‚’指定ã™ã‚‹ã¨ã€Windowsã§ç´°ããªã£ã¦ã—ã¾ã†å•é¡Œã®åŽŸå› ã¨è§£æ±ºæ–¹æ³•ã‚’ä¸å¿ƒã¨ã—ã¦ã€æœ€è¿‘ã®æ—¥æœ¬èªžãƒ•ã‚©ãƒ³ãƒˆäº‹æƒ…ã‚’ã¾ã¨ã‚ã¾ã—ãŸã€‚ CSS Nite LP47 Coder's High 2016ã«ã¦ãŠè©±ã—ãŸå†…容ã§ã™ã€‚ 昔ã‹ã‚‰ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—エンジニアを悩ã¾ã›ã¦â€¦
CSS組版ã«ã‚ˆã‚‹æ›¸ç±ã€ŽCSSシークレットã€åˆŠè¡Œã®ãŠçŸ¥ã‚‰ã›
æ ªå¼ä¼šç¤¾ã‚ªãƒ©ã‚¤ãƒªãƒ¼ãƒ»ã‚¸ãƒ£ãƒ‘ンã¯ã€æ ªå¼ä¼šç¤¾ãƒ“ブリオスタイル（Vivliostyle）ã¨å…±åŒåˆ¶ä½œã—ãŸæ›¸ç±ã€ŽCSSシークレット 47ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã§CSSを自在ã«æ“ã‚‹ã€ï¼ˆæœ¬ä½“ä¾¡æ ¼3,400円＋税）を2016å¹´7月23日より全国書店・Web書ç±å–扱ã„サイト他ã«ã¦ç™ºå£²ã„ãŸã—ã¾ã™ã€‚ 本書ã¯æ•°åƒè¡Œã®CSSã¨1万行ã‚ã¾ã‚Šã®HTMLã§ä½œæˆã•ã‚ŒãŸã€ŒCSS Secretsã€ï¼ˆO'Reilly Media, Inc.）ã®ç¿»è¨³æ›¸ã§ã™ã€‚ 原書ã®ã‚³ãƒ³ã‚»ãƒ—トã«ã‚‚ã¨ã¥ãã€Vivliostyle社ã®å…¨é¢å”力ã®ã‚‚ã¨ã€åŽŸæ›¸ã®ãƒ‡ãƒ¼ã‚¿ã‚’ã‚‚ã¨ã«æ—¥æœ¬èªžç”¨ã®CSSを作æˆã—ã¾ã—ãŸã€‚原書ã§ä½¿ç”¨ã•ã‚ŒãŸã‚½ãƒ¼ã‚¹ã‚’日本語版ã§ã‚‚å†ç¾ã™ã‚‹ãŸã‚ã€Vivliostyle社ãŒåˆ¶ä½œã‚·ã‚¹ãƒ†ãƒ 「Heracles（仮称）ã€ã‚’開発ã—ã€CSS組版・PDF生æˆã‚¨ãƒ³ã‚¸ãƒ³ã€ŒVivliostyle Formatterã€ã«ã‚ˆã‚Šã€åŽŸæ›¸ã§ä½¿ã‚ã‚ŒãŸè†¨å¤§ãªCSSã«å¯¾å¿œã•ã›ã‚‹ã“ã¨ã«æˆåŠŸã—ã¾ã—ãŸ
CSSã®vw, calc()を使用ã—ãŸã€ãƒ¬ã‚¹ãƒãƒ³ã‚·ãƒ–対応ã®ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã‚’指定ã™ã‚‹ã“ã‚Œã‹ã‚‰ã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯
本文や見出ã—ãªã©ã®ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã‚’スマホ時やデスクトップ時ã§å¤‰ãˆã‚‹æ™‚ã€é€šå¸¸ã¯Media Queriesã§ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºã”ã¨ã«æ–‡å—サイズを指定ã—ã¦ã„ã‚‹ã¨æ€ã„ã¾ã™ã€‚ ã“ã“ã§ç´¹ä»‹ã™ã‚‹ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã®æŒ‡å®šæ–¹æ³•ã¯ã¡ã‚‡ã£ã¨æ–°ã—ã„アプãƒãƒ¼ãƒã§ã€æœ€åˆã«ãƒ™ãƒ¼ã‚¹ã¨ãªã‚‹ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚ºã‚’è¨å®šã—ã€ã‚¹ã‚¯ãƒªãƒ¼ãƒ³ã‚µã‚¤ã‚ºãŒå¤§ãããªã‚‹ã«ã¤ã‚Œã€Viewport Unit（ビューãƒãƒ¼ãƒˆã®å˜ä½ï¼‰ã§åŠ ç®—ã—ã¦ã‚µã‚¤ã‚ºã‚’大ããã—ã¾ã™ã€‚ Viewport Unit Based Typography 以下ã€å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ※当ブãƒã‚°ã§ã®ç¿»è¨³è¨˜äº‹ã¯ã€å…ƒã‚µã‚¤ãƒˆæ§˜ã«è¨±å¯ã‚’å¾—ã¦ç¿»è¨³ã—ã¦ã„ã¾ã™ã€‚ Viewport Unit（ビューãƒãƒ¼ãƒˆã®å˜ä½ï¼‰ã¨ã¯ï¼Ÿ フォントã®ã‚µã‚¤ã‚ºæŒ‡å®šã®ãŸã‚ã®ãƒ“ューãƒãƒ¼ãƒˆã®ä½¿ã„æ–¹ ä»–ã®æ–‡å—ã®è¦ç´ をビューãƒãƒ¼ãƒˆã§æŒ‡å®š 縦ã®ãƒªã‚ºãƒ ã¨ãƒ¢ã‚¸ãƒ¥ãƒ©ãƒ¼ã‚¹ã‚±ãƒ¼ãƒ«ã‚’ビューãƒãƒ¼ãƒˆã§æŒ‡å®š フォントサイズã®æŒ‡å®šã®ç²¾åº¦ã‚’アップã™ã‚‹ ã•ã‚‰ã«ç²¾
Flexboxã§æ±ºã¾ã‚Šï¼ | Webクリエイターボックス
2017å¹´5月25æ—¥ CSS Flexboxã¨ã¯Flexible Box Layout Moduleã®ã“ã¨ã§ã€ãã®åã®é€šã‚Šãƒ•ãƒ¬ã‚シブルã§ç°¡å˜ã«ãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆãŒçµ„ã‚ã¡ã‚ƒã†ç´ 敵ボックスã§ã™ã€‚å‰ã€…ã‹ã‚‰ã‚ã£ãŸæŠ€è¡“ã§ã™ãŒã€ãƒ–ラウザーã«ã‚ˆã£ã¦æ›¸ãæ–¹ãŒé•ã£ãŸã‚Šã€ä»•æ§˜ãŒã“ã‚ã“ã‚変ã‚ã£ãŸã‚Šã¨ã€ã‚¤ãƒžã‚¤ãƒä¸€æ©è¸ã¿å‡ºã›ãªã„æ„ŸãŒã‚ã£ãŸFlexbox。ã—ã‹ã—よã†ã‚„ãモダンブラウザーã§ã®åˆ©ç”¨ã«é›£ãŒãªããªã‚Šã€å®Ÿå‹™ã«ã‚‚充分使ãˆã‚‹ã‚ˆã†ã«ãªã‚Šã¾ã—ãŸã€‚今回ã¯ãã‚“ãªFlexboxã®é…力ã¨ä½¿ã„ドコãƒã‚’ã€ãƒ‡ãƒ¢ä»˜ãã§ç´¹ä»‹ã—ã¦ã„ã“ã†ã¨æ€ã„ã¾ã™ï¼ ↑ç§ãŒ10年以上利用ã—ã¦ã„ã‚‹ä¼šè¨ˆã‚½ãƒ•ãƒˆï¼ å¯¾å¿œãƒ–ãƒ©ã‚¦ã‚¶ãƒ¼ Can I use…ã§ç´¹ä»‹ã•ã‚Œã¦ã„るよã†ã«ã€ç¾è¡Œã®ãƒ¢ãƒ€ãƒ³ãƒ–ラウザーã§ã¯å•é¡Œãªã利用ã§ãã¾ã™ã€‚ãŸã ã—ã€Safari用㫠-webkit- ã®ãƒ™ãƒ³ãƒ€ãƒ¼ãƒ—レフィックスãŒå¿…è¦ã§ã™ã€‚IEã«ã¤ã„ã¦ã¯11ã‹ã‚‰æ£å¼ã«å¯¾å¿œã€‚IE10ã«ã‚‚対応ã—ã¦ã„ã¾ã™ãŒã€æ›¸ãæ–¹ãŒ
Firefox 36 ㌠unicode-range デスクリプタをサãƒãƒ¼ãƒˆã€æ–‡å—コード範囲を指定ã—ã¦ãƒ•ã‚©ãƒ³ãƒˆã‚’é©ç”¨å¯èƒ½ã«
ç¾åœ¨ã€Firefox Nightly ã¨ã—ã¦ãƒªãƒªãƒ¼ã‚¹ã•ã‚Œã¦ã„ã‚‹ã€Firefox 36 ã§ã€unicode-range デスクリプタãŒã‚µãƒãƒ¼ãƒˆã•ã‚Œã¾ã—ãŸã€‚unicode-range 㯠@font-face デスクリプタã§ã€èªã¿è¾¼ã‚“ã フォントã®é©å¿œç¯„囲を指定ã—ã¾ã™ã€‚ 例ãˆã°ã€ã‚ã‚‹è¦ç´ 内ã®ãƒ†ã‚ストã®ã†ã¡ã€ç‰¹å®šã®æ–‡å—ã®ã¿ã€ã‚ã‚‹ã„ã¯ç‰¹å®šã®æ–‡å—コード範囲ã«å«ã¾ã‚Œã‚‹æ–‡å—ã®ã¿ã‚’ã€åˆ¥ã®ãƒ•ã‚©ãƒ³ãƒˆã§ç½®ãæ›ãˆãŸã„å ´åˆãªã©ã«ã€unicode-range ã§ãã®æ–‡å—ã‚„æ–‡å—コード範囲を指定ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ 4.5 Character range: the unicode-range descriptor - CSS Fonts Module Level 3 Editor's Draft 27 October 2014 unicode-range デスクリプタã®ä½¿ã„æ–¹ ã“ã†ã„ã†æŒ‡å®šãŒå¦¥å½“ã¨ã„ã†ã‹å®Ÿç”¨çš„ã‹ã¯åˆ¥ã¨ã—ã¦ã€
å‹•ãCSSã®ãŸã‚ã®ãƒ¡ãƒ¢ã€‚
CSSã§ã§ãる事ãŒã©ã‚“ã©ã‚“増ãˆã¦ã¾ã™ã€‚JavaScriptを使ã£ã¦å®Ÿè£…ã™ã‚‹ã‚ˆã†ãªãƒ¬ã‚¤ã‚¢ã‚¦ãƒˆã‚„UIã‚‚ã€CSSã ã‘ã§ä½œã‚Œã¡ã‚ƒã†ã»ã©ã€ä¾¿åˆ©ãªãƒ—ãƒãƒ‘ティãŒã˜ã‚ƒã‚“ã˜ã‚ƒã‹å¢—ãˆã¾ã—ãŸã。ã“ã“ã§ã¯ã€è¦ç´ ã«ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³åŠ¹æžœã‚’ã¤ã‘ã‚‹ãŸã‚ã®CSSを使ã£ãŸã‚¨ãƒ•ã‚§ã‚¯ãƒˆã«ã¤ã„ã¦ã€ã¾ã¨ã‚ã¦ã‚†ã“ã†ã¨æ€ã„ã¾ã™:)。 CSSã§å‹•ã‹ã™ 「動ãã€ã¨ã„ã£ã¦ã‚‚ã€è‡ªç”±è‡ªåœ¨ã«ãã«ã‚ƒãã«ã‚ƒå‹•ã‹ã›ã‚‹ã‚ã‘ã§ã¯ãªãã¦ã€CSSアニメーションã§ã¯ã€ãƒ—ãƒãƒ‘ティã®æ•°å€¤ã‚’スムーズã«å¢—減ã•ã›ã‚‹ã“ã¨ã§ã€è¦ç´ ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚’滑らã‹ã«å¤‰åŒ–ã•ã›ã¾ã™ã€‚ 例ãˆã°ã€ä¸‹ã®ã‚µãƒ³ãƒ—ルã§ã¯ã€pè¦ç´ ã«ã‚«ãƒ¼ã‚½ãƒ«ã‚’åˆã‚ã›ãŸæ™‚ã«ã€font-sizeã®å€¤ã‚’ã€1emã‹ã‚‰2emã«ã€ã‚¹ãƒ ーズã«å¤‰åŒ–ã™ã‚‹ã‚ˆã†ã«æŒ‡å®šã—ã¦ã„ã¾ã™ã€‚ p { transition: font-size 1s; } å‹•ã‹ã™ãŸã‚ã®ãƒžã‚¹ãƒˆãƒ—ãƒãƒ‘ティ CSSã§ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã‚‹ãŸã‚ã«å¿…è¦ä¸å¯æ¬ ãªã®ãŒtransitionプãƒãƒ‘ティ
CSSã§ã®ãƒ•ã‚©ãƒ³ãƒˆæŒ‡å®šã«ã¤ã„ã¦è€ƒãˆã‚‹ï¼ˆ2014年）｜DTP Transit
çµè«–1：アルファベットã§ã‚¦ã‚¨ã‚¤ãƒˆãªã—ã ã‘ã§ã‚‚ã€ã™ã¹ã¦ã®ãƒ¢ãƒ€ãƒ³ãƒ–ラウザã«å¯¾å¿œå¯èƒ½ã§ã™ã€‚ãŸã ã—ã€æ—§ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã®Safariã‚„Firefoxã§ã¯å¯¾å¿œãŒã¾ã¡ã¾ã¡ã§ã‚ã£ãŸãŸã‚ã€ãれらã«å¯¾å¿œã™ã‚‹ã«ã¯ä½µè¨˜ã—ã¾ã™ã€‚ 游ゴシック体ã¨æ¸¸æ˜Žæœä½“ã¯Winodws 8.1ã§ã¯æ—¥æœ¬èªžåã€OS X Mavericks（10.9）ã§ã¯ã‚¢ãƒ«ãƒ•ã‚¡ãƒ™ãƒƒãƒˆåã®ã¿ã®å¯¾å¿œã§ã‚ã‚‹ãŸã‚ã€ä¸¡åã®ä½µè¨˜ãŒå¿…è¦ã¨ãªã‚Šã¾ã™ã€‚ ç–‘å•2ï¼šã€Œãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ Proã€ã¨ã€Œãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProNã€ã®ã©ã¡ã‚‰ã‚’記述ã™ã‚Œã°ã„ã„ã®ã§ã—ょã†ã‹ã€‚ ã€Œãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ Proã€ã‚’改訂ã—ã€JIS X 0213:2004ã®ä¾‹ç¤ºå—体ã«å¯¾å¿œã•ã›ãŸã‚‚ã®ãŒã€Œãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProNã€ã§ã™ã€‚ å‚考： ウィã‚ペディア - ヒラギノ ã€Œãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ Proã€ã¨ã€Œãƒ’ãƒ©ã‚®ãƒŽæ˜Žæœ ProNã€ã®é•ã„ CSSã®font-family指定ã¯ã“ã‚Œã§æ±ºã¾ã‚Šï¼ï¼ˆ2013春） çµè«–2：新ã—ã„å—å½¢ã«å¯¾å¿œã‚’ã—ã¦ã„る「ヒ
HTMLã§ã‚«ãƒ¼ãƒ‹ãƒ³ã‚°ï¼æ‰‹è»½ã«æ–‡å—è©°ã‚ã§ãる「FLAutoKerning.js〠| æ ªå¼ä¼šç¤¾LIG(リグ)｜DX支æ´ãƒ»ã‚·ã‚¹ãƒ†ãƒ 開発・Web制作
ã“ã‚“ã«ã¡ã¯ã€æœºã«ç½®ã„ãŸãŠã‚‚ã¡ã‚ƒã®æ—¥ç„¼ã‘ãŒæ°—ã«ãªã‚‹ã‚‚ã‚ŠãŸã§ã™ã€‚ 今回ã¯ã€å‰ã‹ã‚‰ã¡ã‚‡ã£ã¨æ°—ã«ãªã£ã¦ã„ãŸã‚¦ã‚§ãƒ–フォントをカーニングã§ãã‚‹JS「HTMLã§æ–‡å—è©°ã‚ã™ã‚‹ã‚¿ã‚¤ãƒã‚°ãƒ©ãƒ•ã‚£ãƒ¼ç”¨JSã€ã‚’試ã—ã¦ã¿ã¾ã—ãŸã€‚ http://fladdict.net/blog/2011/02/auto-kerning.html ※ç¾åœ¨ã¯ã‚¢ã‚¯ã‚»ã‚¹ã§ããªããªã£ã¦ã„ã¾ã™ã€‚ ã”å˜çŸ¥ã®ã¨ãŠã‚Šã€jsを使ã‚ãªãã¦ã‚‚letter-spacingを使ã£ã¦cssã ã‘ã§è¨å®šã—よã†ã¨æ€ãˆã°ã§ãã‚‹ã‚“ã§ã™ãŒã€ã²ã¨æ–‡å—ãšã¤ã®è¨å®šã¨ãªã‚‹ã¨htmlã‚‚cssã‚‚ã™ã£ãã‚Šã—ãªããªã‚‹ä¸Šã«ã‚ã‚“ã©ãã•ã„ï¼ ã“ã†ãƒ‘ッã¨ã‚¬ãƒƒã¨ã‚¹ãƒƒã¨è¨å®šã—ãŸã„ï¼ ãã‚“ãªå¸Œæœ›ã‚’å¶ãˆã¦ãれるã®ãŒã€ŒFLAutoKerning.jsã€ã§ã™ï¼ ãƒã‚¤ãƒ³ãƒˆ1：導入ãŒæ¥½ã§ã™ æ‰‹é †ã¯ç°¡å˜ã€ã‚µã‚¤ãƒˆã‹ã‚‰ãƒ•ã‚¡ã‚¤ãƒ«ã‚’ダウãƒãƒ¼ãƒ‰ã—ã¦jqeryã¨ä¸€ç·’ã«èªã¿è¾¼ã¾ã›ã¦<head>内ã«è¨å®šã‚’書ãã ã‘。 入れã¦ã¿ãŸãƒ‡ãƒ¢
游書体をCSSã§æŒ‡å®šã—よㆠ- Qiita
ã¯ã˜ã‚ã« 2017/01/20ç¾åœ¨ã€æŒ™å‹•ã®ãƒ†ã‚¹ãƒˆãŒè¿½ã„ã¤ã„ã¦ã„ãªã„ã®ã§ã€ã“ã®ãƒšãƒ¼ã‚¸ã‚’訪れる人ã«å½¹ç«‹ã¤ã¨æ€ã‚れるリンクを置ã„ã¦ãŠãã¾ã™ã€‚ https://speakerdeck.com/tacamy/modanri-ben-yu-huontozhi-ding https://rxon.now.sh/crossPlatformYu.md 以下ã¯2013å¹´11月ã®æƒ…å ±ãªã®ã§å‚考ã«ã—ãªã„ã§ãã ã•ã„(ãã®é–“ã«ChoromeãŒDirectWriteã«å¯¾å¿œã—ã¦nameテーブルã®å‚照メタデータãŒå¤‰ã‚ã£ãŸã‚Šã—ã¦ã„ã¦ã€è¨å®šã™ã¹ãfont-family値ãŒå¤‰ã‚ã£ã¦ã„ã‚‹ã“ã¨ãŒå¤§ããªè¦å› ã§ã™)。 åºæ–‡ Windows8.1ã¨OS X Mavericksã®ãƒªãƒªãƒ¼ã‚¹ãŒé–‹å§‹ã•ã‚Œã¾ã—ãŸã€‚ Windows8.1ã§ã¯RC版ã«ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã•ã‚Œã¦ã„ãŸæ¸¸ã‚´ã‚·ãƒƒã‚¯ã«åŠ ãˆã¦ã€æ¸¸æ˜Žæœã‚‚インストールã•ã‚Œã¦ã„ã¾ã™ã€‚ OS X Maverick
PNGç”»åƒã§ã‚‚コマé€ã‚Šã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã•ã›ã¦ã—ã¾ã†ã€ãƒŠã‚¤ã‚¹ã‚¢ã‚¤ãƒ‡ã‚¢ã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ -Sprite sheet
デモページ 仕組ã¿ã¯ã€æ¨ªã«å„コマを並ã¹ãŸPNGç”»åƒã‚’CSSスプライトã§é †ã«è¡¨ç¤ºã•ã›ã¦ã€ã‚³ãƒžé€ã‚Šã®ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®ã‚ˆã†ã«ã—ã¦ã„ã¾ã™ã€‚ 「show spriteã€ã‚’ãƒã‚§ãƒƒã‚¯ã™ã‚‹ã¨ãã®ä»•çµ„ã¿ãŒã‚ˆãã‚ã‹ã‚Šã¾ã™ã€‚ 「animation-durationã€ã®æ•°å—を変更ã™ã‚‹ã¨ã€ã‚¢ãƒ‹ãƒ¡ãƒ¼ã‚·ãƒ§ãƒ³ã®é€Ÿåº¦ãŒå¤‰ã‚ã‚Šã¾ã™ã€‚ デモページ：スプライトを表示 スタイルシートã¯ã‚³ãƒžé€ã‚Šã®ã‚¹ãƒ†ãƒƒãƒ—を定義ã—ã€èƒŒæ™¯ã«ã—ãŸPNGç”»åƒã‚’å°‘ã—ãšã¤ãšã‚‰ã—ã¦è¡¨ç¤ºã—ã¾ã™ã€‚ デモã¯1秒間ã«10ステップã€500pxã®ç”»åƒã‚’50pxãšã¤å‹•ã‹ã—ã¦ã„ã¾ã™ã€‚ CSS div { animation: play 1s steps(10) infinite; } @keyframes play { 0% { background-position: 0px 0; } 100% { background-position: -500px 0; } }
IDEA * IDEA
ドットインストール代表ã®ãƒ©ã‚¤ãƒ•ãƒãƒƒã‚¯ãƒ–ãƒã‚°
ã¯ã¦ãªãƒ–ックマーク用ã®ãƒ¦ãƒ¼ã‚¶ãƒ¼ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆhatena-user-cssã«ã¤ã„㦠- tpex_ovon's blog
※2018/03ã®ã¯ã¦ãƒ–ã®å¤§ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«å¯¾å¿œ â—†Git Source:https://github.com/ovoncovon/hatena-user-css/ â—† https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css.css â—†Firefox用 https://github.com/ovoncovon/hatena-user-css/blob/master/b_hatena_ne_jp_user_css_ffx.css TOPページ ENTRYページ å±¥æ´ 2018/11/06 フォントãªã©å¾®èª¿æ•´ 2018/05/19 2018/03ã®ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«å¯¾å¿œ 2017/08/30 エントリーページã®å¾®èª¿æ•´ 2017/08/23 エントリーページã®ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«å¯¾å¿œ 2015/10/21 「
CSSã®font-family指定ã¯ã“ã‚Œã§æ±ºã¾ã‚Šï¼ï¼ˆ2013冬） - é 近法ノート
追記：最åˆã€ã†ã£ã‹ã‚Šã€Œ2013冬ã€ã£ã¦æ›¸ã„ã¦ã—ã¾ã£ãŸã‚“ã§ã™ã‘ã©ã€ã»ã‚“ã¨ã¯ã€Œæ˜¥ã€ã¨æ›¸ã‹ãªãゃã„ã‘ã¾ã›ã‚“ã§ã—ãŸï¼ˆæ±—）*1 ã¨ã‚Šã‚ãˆãšä»Šã€CSSã®font-familyã§ãƒ•ã‚©ãƒ³ãƒˆã‚’指定ã™ã‚‹ãªã‚‰ã°ã€ã“ã‚Œã§æ±ºã¾ã‚Šï¼ˆä¸€ç•ªä¸‹ã®è¿½è¨˜ã‚‚å‚ç…§ã§ï¼‰ã€‚ font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;CSSã®font-family指定ã€ã€Œã‚ãˆã¦ãƒ•ã‚©ãƒ³ãƒˆã‚’指定ã—ãªã„ã€ã£ã¦ã„ã†ã‚„り方もアリã§ã™ãŒã€ã„ã‚ã„ã‚ãªäº‹æƒ…ã§ãã†ã‚‚言ã£ã¦ã‚‰ã‚Œã¾ã›ã‚“。ã¨ã‚Šã‚ãˆãšä»Šç¾åœ¨ã®æœ€é©font-family指定を考ãˆã¦ã¿ãŸã¨ã“ã‚ã€ä¸Šã®ã‚ˆã†ã«ãªã‚Šã¾ã—ãŸã€‚ æŒ‡å®šé †åºã€å…¥ã‚ŒãŸãƒ•ã‚©ãƒ³ãƒˆã€å…¥ã‚Œã¦ãªã„フォントã€ã™ã¹ã¦ã«æ„味ãŒã‚ã‚Šã¾ã™ã€‚ 以下説明。 ヒラギノã¯Proã§ã¯ãªãProN。 OS Xã®å’Œæ–‡æ¨™æº–フォ
オリジナルã®ãƒ†ãƒ¼ãƒžã‚’共有ã—よã†ï¼ 「テーマ ストアã€ã‚’オープンã—ã¾ã—㟠- ã¯ã¦ãªãƒ–ãƒã‚°é–‹ç™ºãƒ–ãƒã‚°
本日ã€ã¯ã¦ãªãƒ–ãƒã‚°ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã‚’共有ã§ãる「テーマ ストアã€ã‚’オープンã—ã¾ã—ãŸã€‚ テーマ ストアã§ã¯ã€ç™»éŒ²ã•ã‚Œã¦ã„るテーマを自分ã®ãƒ–ãƒã‚°ã«ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã—ãŸã‚Šã€è‡ªåˆ†ã§ä½œæˆã—ãŸã‚ªãƒªã‚¸ãƒŠãƒ«ã®ãƒ†ãƒ¼ãƒžã‚’投稿ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ テーマ ストア㸠自分ã®ãƒ–ãƒã‚°ã§ãƒ†ãƒ¼ãƒžã‚’利用ã™ã‚‹ 使ã„ãŸã„テーマを見ã¤ã‘ã‚‹ テーマ ストア ã®ãƒˆãƒƒãƒ—ページã‹ã‚‰ã€ä½¿ã„ãŸã„テーマを探ã—ã¾ã™ã€‚テーマã®ä¸¦ã³é †ã¯ã€äººæ°—é †ã‹æ–°ç€é †ã§åˆ‡ã‚Šæ›¿ãˆã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ スクリーンショットをクリックã™ã‚‹ã¨ã€ãƒ†ãƒ¼ãƒžã®è©³ç´°ãŒè¡¨ç¤ºã•ã‚Œã¾ã™ã€‚ 自分ã®ãƒ–ãƒã‚°ã«ãƒ†ãƒ¼ãƒžã‚’インストールã™ã‚‹ 使ã„ãŸã„テーマãŒè¦‹ã¤ã‹ã£ãŸã‚‰ã€ãƒ†ãƒ¼ãƒžã®è©³ç´°ãƒšãƒ¼ã‚¸ã§ã€Œãƒ—レビューã—ã¦ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã€ã‚’クリックã—ã¾ã™ã€‚インストール先ã®ãƒ–ãƒã‚°ã‚’é¸æŠžã™ã‚‹ã¨ã€ãƒ†ãƒ¼ãƒžãŒä¸€æ™‚çš„ã«é©ç”¨ã•ã‚ŒãŸçŠ¶æ…‹ã§ã€ãƒ—レビュー画é¢ãŒè¡¨ç¤ºã•ã‚Œã¾ã™ã€‚ プレビューを確èªã—ã¦å•é¡Œãªã‘ã‚Œã°ã€ã€Œã“ã®ãƒ†ãƒ¼ãƒžã‚’インストールã€ã‚’クリックã™ã‚‹ã¨
ランã‚ング
ランã‚ング
ランã‚ング
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
ソフトãƒãƒ³ã‚¯ãƒ»ãƒ†ã‚¯ãƒŽãƒã‚¸ãƒ¼æ ªå¼ä¼šç¤¾ã€€ä¼æ¥æƒ…å ±
ã‚ã®å¤§æ‰‹ã‚µã‚¤ãƒˆã¯ã€æ–‡ç« 部分ã«ã©ã®ã‚ˆã†ãªãƒ•ã‚©ãƒ³ãƒˆæŒ‡å®šï¼ˆfont-family）をã—ã¦ã„ã‚‹ã®ã‹ï¼Ÿ
Webフォントã®æ–‡å—è©°ã‚をテストã—ã¦ã¿ã‚‹ï½œtotika［西岡裕二］
{{#tags}}- {{label}}
{{/tags}}