ふわふわぷかぷか

最近はイラレとAeにはまってます。

html

文章に合わせて背景画像を表示して、文字に縁取りをする。(吹き出しとか)

ある部分の文章に背景をつける場合。 文章の長さに合わせて背景画像の大きさが自動的に変わる方法。 吹き出しなどに便利かも? html <div class="kakudai block" style="background-image:url(背景画像.png)"> <div class="block" style="padding:10px 20px 10px 20px"> ここに文章を入力<br /> 改行したら、1番長い幅に合わせて画像も大きくなります<br /> </div></div> paddingを変更することで、文字の周りの空白を…

画像を繰り返してラインを引く。

htmlで、画像を繰り返してラインを引く方法。 使う画像 (img/hosi.png) 完成サンプル html <hr class="hosi" /> これにcssで画像を設定します。 css .hosi{ border: 0; /* 枠がついてしまうので0にします。 */ height: 50px; /* 画像の高さに合わせました。 */ background-ima</hr>…

Firefoxで画像の位置がずれて表示される。

htmlは正しく作ってあって、試しに見た時はしっかり表示できているのに、本物のホームページになると画像の位置がおかしくなって困りました…。 「Ctrl+0」でズームをリセットしたら直りました。 他にも色々原因があるようです→サポート Firefox OSアプリ開発…

長い文字列の幅に合わせて中央配置して、改行・折り返しは左揃えにする方法。

前の記事では、短い文章は中央配置、折り返したときは左揃えになるようにしました。 こんな感じ↓ 今回は、長い方の文章の幅に合わせて中央配置して、文章の始まりや改行したときには左揃えになる方法です。 枠の幅をしっかり決める方法はあったのですが、幅…

中央配置だけど、改行したら左揃えにする方法。

文章全体の構成は中央配置にしたいけど、折り返して途切れた部分が短いと見た目が変になってしまう気がして、短い文章は中央に配置して、長い文章は改行した時に左揃えになる方法です。 次の記事で、長い方の文字列に合わせて中央配置・左揃えにしています。…

GoogloPlayのアプリダウンロードボタン「バッジ」の取得方法。

※バッジと所得方法が変更されていたため更新しました(2016/2/18) GoogloPlayのバッジが欲しいなぁ…と思っていたら、意外と簡単に入手できることが分かりました。 これです↓ 「Google Play Badge Generator」から手に入れることができます。 (URL:http://de…

画像の半透明化を1つだけ除外する方法。

画像をhoverで半透明化させているのですが、ロゴだけは半透明にしたくなかったのでその方法。 :not()<否定疑似クラス>を使うことで、1つだけ(複数でも指定した分だけ)除外することができるらしい。 参考サイト Webpark ロゴだけクラス名(class="logo")を…

ホームページの途中で背景を変える。

部分的に背景に色を着けたかったのでその方法。 html <div id="back1"> 1つ目の背景の部分 </div> <div id="back2"> 2つ目の背景の部分 </div> css #back1 { background-color: #F97893} #back1 { background-color: #5C7EE6} スラスラわかるHTML&CSSのきほん 作者: 狩野祐東 出版社/メーカー: SBクリエイ…

ホームページから別のサイトの特定の場所へのジャンプ。

自分で作っているホームページから、ブログの特定の場所へジャンプしたかったのでその方法。 ホームページ <a href="ブログのhttp…#〇〇">ここからジャンプ</a> ブログ <a name="〇〇">ここにジャンプ</a> 他のサイトにもジャンプできました。 できる ホームページ HTML&CSS入門 Windows 8.1/8/7/Vista対応 (でき…