Microsoft AI labが開発してる手書きのワイヤーからHTML5コーディングしてくれる「Sketch 2 Code」がすごそうなので試してみた
Microsoft AI labが開発してる手書きのワイヤーからHTML5コーディングしてくれる「S…

  • 2018.09.03

まずは見てください! 引用Sketch2Codeでホワイトボードのスケッチを数秒で作業コードに変換 「Sketch 2 Code」で手書きのワイヤフレームが一瞬でコーディングされています。 なにこれgodツールじゃね!? これは「…

WordPress(ワードプレス)で「highlight.js」を使って<pre><code>タグをCSSで見やすくデザイン変更しよう
WordPress(ワードプレス)で「highlight.js」を使って<pre><…

  • 2018.07.13

Crayon Syntax Highlighterは便利だけどもっと違うレイアウトにしたい!軽くしたい! Crayon Syntax Highlighter ということでWeb用のシンタックスハイライトhighlight.jsを使ってCSSカスタマイズしました。 公式サ…

こいつ…動くぞ!会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル
こいつ…動くぞ!会話方式(吹き出し)アイコンがCSSでアニメーションするサンプル

  • 2018.07.10

ブログをみていると度々登場する会話形式の吹き出しデザイン。 ライターの気持ちを代弁している事が多いのこのアイコンさんに喜怒哀楽を表すアニメーションを追加したらもっと気持ちが伝わりやすい!!! そんな思…

  • 2018.07.01
  • 2018.09.19
  • ,

モバイルファースト、モバイルフレンドリーを意識してブログのスマートフォン表示を最適化しよう
モバイルファースト、モバイルフレンドリーを意識してブログのスマートフォン表示を最適化しよう

  • 2018.07.01

少し前からモバイルファーストやモバイルフレンドリーという言葉をよく聞くようになってきました。 モバイルファーストとは、 今まではパソコンサイトメインだったけど、これからは携帯端末で見る時の表示に重きを…

HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法
HTMLとCSSでtwitter風画面をブログ記事やサイトに表示する方法

  • 2018.06.27

話題になっているネタを厳選して並べたい 自分のツイートで特定のタイムラインだけ抜粋したい・・・ twitterはつぶやきの埋込APIを提供していますが、タイムライン全て、もしくは1件しか引用できないので自由自在…

HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き)
HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタ…

  • 2018.06.21

会話方式で記事の導入を書きたい!! 他のブログさんで会話方式やってらっしゃるのを見て、 「やっばいやん、めちゃ読みやすいやん」と感銘を受けたナコです。 自分視点が多くなるブログで、 他人のツッコミ風に使…