PowerPoint、Word、Excelで吹き出しのツノを小さくする方法
PowerPoint、Word、Excelで吹き出しのツノを小さくする方法を紹介します。 修正前 修正後 １．問題点 PowerPoint、Word、Excelで作る吹き出し図形のツノが大きくて不恰好です。 が、調整する方法がわかりません。 ということで、PowerPointで吹き出しのツノを小さくする方法を紹介します。 ここではPowerPoint2010を使った手順を説明します。Word/Excelも同じ手順で修正可能です。 なお過去のバージョンでは本記事の操作ができない可能性があります。予めご了承ください。 ２．吹き出しのツノを小さくする 吹き出しのツノを小さくするには、吹き出し図形を選択した状態で「書式」タブをクリック。 「図形の編集」→「頂点の編集」を選択。 図形の何ヶ所かに黒い四角が表示されます。 赤丸で示した黒四角をドラッグして、ツノの幅を調整します。 さらにツノの頂点の黒四
吹き出しやリストマーカーに使える三角形を CSS で作る
特に目新しい方法ではないですが、デザイン内に出てくることの多い三角形のあれ （謎） を簡単に CSS で作る方法について。 しばらく CSS ネタ的なの書いていませんでしたので書いてみようと思います。 三角形のあれというのは、よくリスト型メニューにアイコン的に使われていたり、メインメニューでアクティブな項目に付けたり、Tips などを表示する際に吹き出し的な見た目を作る場合に使われたりする、下記のような部分のことです。 これを CSS のみで簡単に再現する方法を解説してみます。CSS は class の付け方でカラーやサイズなどを簡単に適用できるようにしてみましょう。また、今どきっぽく Sass 向けに mixin （ミックスイン） のサンプルも紹介しておきますので参考まで。 CSS による基本的な三角形の作り方 いまさら詳しく解説するまでもないですが、下記のように border プロパテ
PDFで校正やりとりをする際に覚えておきたいテクニック【テキスト修正編】
PDFで校正やりとりをする際に覚えておきたいテクニック【テキスト修正編】：ビジネスの悩みを解決するPDFドリル（1/3 ページ） Acrobatを使えば、書類を印刷することなく画面上で手軽に校正ができる。今回はテキストの挿入や置換、取り消しなど具体的な修正を指示する際に便利な注釈ツールを紹介する。 かつては紙の上で行われていた文書の校正作業も、今やAcrobatやWordを用いたワークフローへと移行しつつある。校正作業をデジタルツールで行う利点は、複数のメンバーに簡単に依頼できることや、返ってきた指示を取りまとめやすいこと、さらに対応が完了したものからチェックを入れて消しこんでいくことで見落としが起こりにくいことにある。紙に印刷する必要がないため、ペーパーレスの観点でも効果は大きい。 もっとも、Acrobatで校正ができることを知ってはいるもののツールの使い方がよく分からないが故に、これま
YouTube動画にテキストを表示させる方法
ご存知の方も多いと思いますが、YouTube動画にテキストを表示させる方法を紹介します。 練習で作った動画として、Movable Typeプラグインのデモ動画をおいておきますのでよければご覧ください。タイトルやふきだしなどが表示されます。 １．アノテーション YouTubeでは自分のアップロードした動画に、タイトルやコメント、ふきだしなどのテキストや動画へのリンクを表示させることができます。 この機能は「アノテーション（annotation：あるデータに関連する情報（メタデータ）を注釈として付与すること）」と呼ばれるものです。 アノテーションでは次の5種類のオブジェクトを設定できます。 吹き出し メモ タイトル YouTube MUSIC WEEK ラベル ２．アノテーションの設定（吹き出し） ここではアノテーションを設定する簡単な例として、吹き出しを追加してみます。 まず、動画の管理画面
超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル:phpspot開発日誌
How to Create CSS3 Speech Bubbles Without Images JavaScript & CSS SitePoint Blogs 超シンプルなマークアップで実現できるCSS3による画像を使わない吹き出しサンプル。 吹き出しというと実装には若干階層を作ったマークアップが必要と考えますが、CSS3を使うと<p>だけで実現できるようです。 次のような吹き出しも、「<p class="bubble speech">SitePoint Rocks!</p> 」というシンプルなマークアップで実現出来ます。 影もついてますね。 角丸だけなら border-radiusで簡単に実現できそうですが、角のとんがったやつはちょっとしたハックを使っています。 border プロパティで枠線を設定し、左と上の線のみに色をつけることで三角形にしてます。それを２枚重ねることでとんがった
枠線付きの吹き出し
ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう！ みよう！ みよう！ Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;
[JS]実装のロジックを理解して、自分に適したツールチップを作成するチュートリアル
ツールチップのスクリプトやプラグインは、数多くリリースされています。 ここではjQueryを使用したツールチップをどのようなロジックで実装するかを解説したチュートリアルを紹介します。 Simple Tooltip w/ jQuery & CSS デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 1. マークアップ -HTML 2. スタイル -CSS 3. エフェクト -jQuery 4. スクリプトのロジック 5. 注意点 1. マークアップ -HTML マークアップをする際に気をつけることは可能な限りシンプルするのと同時に、さまざまなシナリオに対応できるよう柔軟にすることです。 メインとなるa要素にはツールチップを表示するために、class名「tip_trigger」を記述します。また、ツールチップのコンテンツを配置するspan要素には、class名「tip」を記述
[CSS]CSS3対応・非対応ブラウザで動作するアイコン付きの素敵なツールチップ
CSS3対応ブラウザではより美しく、非対応ブラウザでもそれなりに美しいアイコン付きのツールチップを紹介します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS
ピュアCSSでページ上に通知を出すチュートリアル:phpspot開発日誌
Hey there, time traveller! | Filament Group, Inc., Boston, MA
[CSS]画像やスクリプトを使用せずに実装する、多彩なデザインのスピーチバブル