HTML

CSS

10秒で設置完了!コピペで使えるボタンデザイン(ホバーアクションつき)

コピー&ペーストだけの10秒で設置完了なボタンです。 背景色や文字色、ホバーのアクションを変更してオジリナルのボタンも簡単につくれます。 フラットな角丸ボタン Hello!

フラットな四角いボタン Hello!

フラットな枠だけボタン Hello!

フラットな押しごたえのあるボタン Hello!

グラデーションのふわっとしたボタン Hello!

立体的なつるっとしたボタン Hello!

文字間隔が広がるボタン Hello!

古いWindows風なボタン Hello!

二重枠ボタン Hello!

グラデーション枠ボタン Hello!

HTML

alt属性を書いてSEOを強化しよう!ケース別書き方サンプルつき

alt属性とは alt(オルトと読みます)属性は、imgタグなどの内容が表示できない場合に 「代替テキスト」として指定します。 よく「altタグ」と呼ぶ人もいますが、正しくはタグの中の属性なので、「alt属性」です。 HTMO2.0以降、imgタグとmapタグはalt属性の記載は必須となっています。 今回はその中でも最も多く使われる、imgタグのalt属性について お話をしたいと思います。 alt属性を記述するとSEOにも効果がある? alt属性はSEO対策になる、という話は聞いたことがありますか? 実はこれは正解で、imgタグでは検索ロボットが画像の内容を認識できないので 代わりに画像や写真の説明をalt属性で指定してあげます。 ・・・とは言っても現時点でもだいぶコンピューターが画像を認識できるようになっていますので、 AIがますます発達すると、このタグも意味が変わってくる時が来るのかもしれません。 現状ではaltは必須なので、必ず書くようにしましょう。 写真と文章の場合

このように風景や情景のイメージ、挿絵として挿入される写真は、 その内容をaltに書きます。 この場合単に「富士山」や「富士山の写真」と書くのもOK。 人間はこの写真を見たときに、富士山の他に河口湖が手前にあり、 そして桜が咲いていることも理解できますが、ロボットは今のところそういうわけにいきません。 ロボットに対してもこの写真がどういう描写なのかを伝えるには、 上記ソースコードのように、 「河口湖から桜越しに望む春の富士山」などと記載するとなおよいでしょう。 ロゴの場合 企業、団体、サービス名などのロゴマークはその名称を記載するのが正解です。

名称のほかに、サービス名や商品名をわかりやすくするキャッチコピーを入れてもOKです。 例: 「北海道でていねいに作った生乳で作りました 函館MILK SOFT」 例: 「おうちでラクラク印刷 かんたんフォトコピー」 集合写真の場合

「〜の様子」や「〜の風景」というキャプションを見たことがあるかと思います。 ここでもalt属性にはどんな会場なのかを記述するとよいでしょう。 誰かが何かをしている写真の場合

ここも単純に「2月22日開催された少年野球決勝の様子」でもよいかもしれません。 しかし複数写真がある場合は、alt属性が同じになってしまうので、上記ソースコードのような、 状況を説明するキャプションを記述することも、重複記述を避けられるので一つの方法です。 バナーの場合 バナーの場合は、バナー内の要素を記述することが一般的です。 サービスや商品を紹介するバナーの場合は、 その名称とともに、端的な紹介文やキャッチコピーを添えます。

この場合も説明が長くならないようにして、ワンライン程度で商品やサービスを説明できればベストです。 *余談ですが、当社でベータ版のファイルストレージを開発しました( ´−`)。oO altを書かなくてよい場合もある altは必須と言いながらも、実は書かなくてもいい場合があります。 そのケースとして、 ・アイコンなどの小さな画像 ・スペーサー […]