2019.11.7 更新 サイトでアニメーションを実装するとなると、以前はjavascript等を使用しなければならなかったり小難しいイメージがありましたが、最近ではcssのみで簡単に実装することができます。 「CSS Animation」というもので、cssについて勉強したことがある方の中には目にした、耳にしたことがあるのではないでしょうか。 今回は「CSS Animation」を用いて、コピペでテキストや画像を点滅させる方法をご紹介します。 使いどころはあまりないかもしれませんが、知っておいて損はないかと思います。最後に使用例（？）もご紹介します！ CSSを使って要素を点滅させる デモ @keyframesを記述する（簡単に説明） animationプロパティを記述（簡単に説明） 実装方法 CSS HTML側でclassを指定 記述内容 応用と実用例 ボタンや枠を点滅させる おまけ：画

2018.4.19 更新 普段ネットを使用していると「あ、このサイトなんだかすごく読みやすい」なんて感じるサイトってありますよね。 ブログでも文字の大きさや行間、適度に見出しを付けるなど、ちょっとした工夫で「読みやすさ」を向上させることができます。ブログを書かれている方は一度は気にしたことがあるんじゃないかなと思います。 しかし、読みやすいという印象を与えている要素は何なのか、意識しないとなかなか気づくことはできません。 そこで今回は「文字・フォント」に注目して、より読みやすい記事を作るための工夫について3つのポイントに分けて順に書いていきます。 「見出しも付けてるし、改行したり行間だって気にしてるけど他にも何かできないか」 「もっと読みやすくしたい・工夫したい」 という方に向けた記事になってますので、誰かの参考になれば幸いです。 文章の両端揃え（均等割り付け） text-align:ju

2018.03.05 更新 今回はブログのタイトルの下に表示するメニューについて書いていきます。 はてなブログProに加入すると、スマホ表示のデザインを自由にいじることができるようになります。当ブログもPC・スマホで見た目が適切なものに変わる様cssを調整しています。 色んなブログで使いやすいメニュー、簡単に実装できるメニューが紹介されていますが、この記事では当ブログで使用しているメニューについてご紹介しますので、誰かの参考になれば幸いです。 はじめに メニューをご紹介 サンプル HTMLの記述場所 記述内容 HTMLの説明 CSSの記述場所 記述内容 CSSの説明 Javascriptの記述場所 記述内容 Javascriptの説明 まとめ はじめに ブログでいうメニュー(グローバルナビ)というのは、主にブログタイトルの下についているカテゴリや、お問い合わせなどのリンクが設置してある箇所

どうも、ゆうう兄（にい）（@hara2_yusuke）です。 今回は主にはてなブロガーさんに向けた記事です。 WEBページの見た目（デザイン）を表現するときに「css」というスタイルシート言語を使用します。はてなブログのデザインも、この「css」で表現されているので、見たことあるという方は多いと思います。 名前は聞いたことあるけど「cssって難しそう...」と思っている、初心者の方に向けて、簡単に使用できる便利なcssを適用させる方法をご紹介します。 ブログ内で「この文章だけ中央揃えにしたい...！！」といった細かい調整の役に立てていただけたら幸いです。 はじめに classの簡単な説明 classの使用例 書き方 使い方 classを2つ以上設定する場合 ブログ更新に便利なcssをご紹介 段落に関するcss 要素間の余白を調整するcss マウスを乗せたときに色を薄くするcss 要素を非表