メインコンテンツ内で紹介したいことが多すぎるとき、簡単にタブで切り替えして見やすくしたい！ html・cssだけでできるタブ切り替えを紹介します。 レスポンシブ対応するベースソース 以下のHTMLとCSSがベースになりま […]
New
New
svgジェネレーター（エディタ）でちょっとおしゃれな背景
ブログやwebサイトを作るとき、ワードプレスのテーマのままだと背景が真っ白だったり、薄いグレーだったりしますよね。 華やかにしたいけど、画像を使うとガチャガチャするし、background-colorでベタ塗すると重くな […]
New
コードガールこれくしょんをやってみた
コードガールこれくしょんはゲーム感覚でプログラミングを学べる コードガールこれくしょんは、無料でプログラミングを学べるゲームです。 プログラミングを勉強したいけど、参考書や文字ばっかりのサイトだと難しすぎてわからない派の […]
おしゃれな見出し【CSS】
たくさん入れすぎるとごちゃごちゃしてしまうけど、いつか使いたいもののストック。 ホバーで縦に割れるテキスト 縦割DEMO testtest 縦割のHTML <div class=”word”> <s […]
svgエディタを使わず文字をアニメーションさせるCSS
svgにするといいと聞くけど、調べても何やら難しい内容がつらつら書かれていて結局諦めてしまっていませんか？ イラレとかエディタ使って書き出して～～とかよくわからないと感じている方必見。 簡単にsvgを使ってアニメーション […]
プログラミングを学べるcodecombatをやってみた
codecombatをやってみた codecombatはパイソンやJavascriptを学べる無料ゲームです。（有料の部分もあります） ヒーローがダンジョンの中で敵を倒したり、ジェムを拾ったりしてクリアしていく遊びながら […]
テクノロジア魔法学校の体験3つめと4つめもやってみた
テクノロジア魔法学校はディズニーキャラクターが教えてくれるプログミング教材です。 体験が無料でできるので、やってみた感想と内容をまとめています。 1つめと2つめについてはこちらのページで紹介していますのでご確認ください。 […]
テクノロジア魔法学校のお試しをやってみた
テクノロジア魔法学校をやってみた テクノロジア魔法学校は、プログラミングの基礎から教えてくれる教材です。 パソコンの使い方からJavascriptなど、有名ディズニーキャラクターが教えてくれます。 お試し体験が出ていたの […]
背景画像の上の文字を切り抜きたい【css】background-clip
画像の上に文字を置いてベタ色を塗るのではなく、 ちょっとおしゃれに、文字の形に切り抜いてみたり、文字の部分だけオーバーレイをかけてみたりしてみます。 切り抜くときに使うのは、background-clip。 クロームやs […]