HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
Adobe Illustrator でテキストオブジェクトを元のオブジェクトに戻す方法 - by Takumi Hirashima
Adobe Illustrator でテキストを流し込んだテキストオブジェクトを、元のオブジェクトに戻す方法を紹介します。 例えば、エリア内文字ツールやパス上文字ツールでテキストを流し込んだオブジェクトを、元のオブジェクトに戻したいときに便利な方法です。 まずはグループ選択ツールを選択 次に取り出したいオブジェクトを選択 パスを選択したらコピー＆ペースト まずはグループ選択ツールを選択 テキストを流し込んだオブジェクトから元のオブジェクト取り出すには、グループ選択ツールを使用します。 まずは「グループ選択ツール」に切り替えます。 このツールはダイレクト選択ツールの裏に隠れています。 次に取り出したいオブジェクトを選択 次に取り出したいオブジェクトを選択します。 グループ選択ツールに切り替えたら、取り出したいオブジェクトのパスをクリックして選択します。 ここで注意したいのは、オブジェクトの中
保護されたPDFのテキストをコピーする方法
保護されたPDFのテキストをコピーする方法を紹介します。 １．問題点 PDFファイルのテキストをコピーしたのですがペーストできません。 どうもPDFファイルが保護されているため、コピーができないようです。 文字数が多く手入力が面倒なので、できればコピーしたいのですが方法がわかりません。 ということで、保護されたPDFのテキストをコピーする方法を紹介します。 ２．対処方法 該当のPDFファイルをGoogle Chromeにドラッグして表示させ、印刷アイコンをクリック。 送信先を「PDFに保存」にして「保存」をクリック。ここでは「テスト2.pdf」で保存します。 保存したファイルを開くと保護が解除されています。 これでテキストをコピーできる状態になりました。
Chromeでfont-sizeを10px以下に設定する方法
Chromeブラウザでは、CSSでfont-sizeを10px以下に設定しても、 ブラウザの設定で最小フォントサイズが決まっているため、10px(Default)以下にはならないようになっています。 今回は、Chromeでfont-sizeを10px以下に設定する2つの方法について整理しました。 ブラウザの設定を変更する Chromeの設定 ⇒ 詳細設定 ⇒ フォントをカスタマイズの 「最小フォントサイズ」を変更すると設定したブラウザには問題なくフォントサイズが変更されます。 CSSにて変更する方法 webkit-transformのscale3dやscaleを利用して、既存の文字フォントサイズを0.x倍縮小することで、フォントをもっと小さく表示できます。 ・scale3dを利用した例： 12pxで設定すると6pxになります。 p{ width: 200%; line-height: 20
Androidでつまずいたバグについてのまとめ
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかってしまったことがいくつかあったのでメモです。 <p>要素が指定した幅に広がらない 原因はおそらくその時のviewportの指定の仕方です。 例えば<p>要素が『100%』としても横幅いっぱいに広がらず、勝手に折り返しされてしまうことがありました。 対策としては『background』の要素を指定してあげると指定したサイズになりました。 背景が白い要素でしたら『background:#FFFFFF;』などを指定してあげるとよいです。 ただ、背景色を付けられないという場合もあるかと思います…。今回の私がそうでした。 なるほどと思ったのは『透過した画像をおく』ということでした。 今回私は透過pngを置いて何とか回避できました。 もしかしたら背景に要素を置いただけではうまく表示できない可能性もあるのですが、その時はサイズも指
スマホサイト制作時の困った！iPhoneでフォントサイズが勝手に拡大されてしまうのを防ぐ方法。
メディアクエリを使ってコーディングをしていたのですが、iPhoneで見ると一部のフォントサイズが拡大されてしまう現象に遭遇。（SafariもChromeも） しかも、画面が縦位置の時は何ともないのに、横位置で見たときだけ。 CSSをどういじってもダメで半べそになりながらも無事に解決したので、よろこびのエントリー。 目次 CSSにコードを追加で解決！なぜ-webkit-text-size-adjust: 100%;なのか？実機確認て、やっぱり大事可読性かデザイン性か… CSSにコードを追加で解決！ はじめに結果だけ書いてしまうと、CSSに body { -webkit-text-size-adjust: 100%; } と記述することで解決しました。 なぜ-webkit-text-size-adjust: 100%;なのか？ -webkit-text-size-adjustは文字通り、テキス
Adobe Photoshopで文字をはっきり、くっきりさせる方法 - (DxD)∞
Adobe Photoshopでかなり前から試行錯誤していることがあります。文字がどうしてもぼやけるというか、滲んでいるように見えてしまう場合があるのです。なんとかはっきり、くっきりさせられないかと色々試してみた結果、それなりに満足できる結果が得られたのでまとめておきます。 ラスタライズが前提であれば、フィルタなどで調整できる可能性はありますが、後から文字を変更したい場合に面倒なので、できればラスタライズしないでなんとか綺麗に見える方法がないかと試行錯誤してみました。使用しているのはCS2なので、バージョンによっては微妙な違いがあるかもしれません。 Photoshopの文字ツールの設定 まずは基本中の基本です。Photoshopの文字ツールは、注意しておかないと、すぐに文字のアンチエイリアスのかかり方が変わってしまいます。どういった場合にそうなるかというと、既に入力済みの文字を「文字ツール
三点リーダが真ん中に表示されない理由
三点リーダ「…」が「…」という風に真ん中に表示されない問題について調べてみました。 １．三点リーダとは 説明するまでもありませんが、点を3つ横に並べた形をした記号のことで、語尾を省略したり、言葉の余韻を残すときに使う「…」です。 ２．問題点 たとえばブログを書いているときに、記事編集画面のテキストエリアでは「…」と表示されているのに、公開したページでは「…」となることがあります。 ３．原因 三点リーダが真ん中に表示されないのはCSSの「font-family」の設定によるものです。 「font-family」の値には多くのフォントを並べているケースが多いと思いますが、その一番最初に記述しているフォントに依存します。 たとえば、このブログのfont-familyは以下のようになっています。 font-family: Verdana,Arial,"メイリオ",Meiryo,"ヒラギノ角ゴPro
フォーム入力中に誤って消えてしまった文字を復活させるFirefox用アドオン「Textarea Cache」
問い合わせるために文章などをフォームに長々と入力しているときに、意図せずブラウザを閉じてしまって、文章を書き直すことがありますが、Firefox用のアドオン「Textarea Cache」を使えば、消えてしまった文章を簡単に元に戻すことができます。アドオンのインストールと操作方法については以下から。 Textarea Cache :: Add-ons for Firefox https://addons.mozilla.org/en-US/firefox/addon/textarea-cache/ Firefoxから上記サイトへアクセスし「＋ Add to Firefox」をクリック。 「今すぐインストール」をクリック。 「今すぐ再起動」をクリックして、Firefoxを再起動させればインストールの完了です。 ◆使い方 例えばHotmailなどを使ってメール本文を作成しているときに、誤ってブ
WindowsでIME（言語バー）が消えたときの対処方法
WindowsでIME（言語バー）が消えたときの対処方法を紹介します。 １．問題 Windowsを使っていると、タスクバーまたはデスクトップ上に表示されているIME（言語バー）が、何かの拍子に消えてしまうことがあります。 図.タスクバーから消えたIME IME（言語バー）が表示されなくなると、日本語入力ができなくなってしまい、非常に不便です。 PCを再起動させればIMEは元通り表示され、日本語入力もできるようになりますが（ならないケースもあるようですが）、もっと簡単に復活させる方法はないでしょうか。 ということで次項に対処方法を載せておきます。 Windows Vistaで確認していますが、Windows 7でも同じ方法で大丈夫と思います。 ２．言語バーの設定確認 念のため、言語バーの設定が間違っていないか、確認する手順を紹介しておきます。突然消えてしまった場合などはスキップして３項に進ん
[AS3] Text Layout Framework(TLF)でハマらないために
Flash Professional CS5から備わったText Layout Framework(TLF)は、テキストにInDesignのような細かな設定が加えられます。他方、Text Layout Frameworkのライブラリがデフォルトではランタイム共有ライブラリから読込まれるため、インスタンスは独自の生成過程を経ます。タイムラインに[TLFテキスト]を置いただけで、思わぬ結果になることもありますので注意が必要です。 本稿では細かな説明は省き、フォーラムやblog記事などの紹介にとどめます。詳しくは、それらのトピックや記事をお読みください。また、Text Layout Frameworkの基礎については、つぎのgihyo.jp連載「ActionScript 3.0で始めるオブジェクト指向スクリプティング」の解説をご参照ください。 第39回「TLFTextFieldクラスを使う」 第
![[AS3] Text Layout Framework(TLF)でハマらないために](https://cdn-ak-scissors.b.st-hatena.com/image/square/a092edc21fa668dd8fd9d4117d5f1ea7812f16d6/height=288;version=1;width=512/http%3A%2F%2Ff-site.org%2Fogp_2013.jpg)
Wrapping Long URLs and Text Content with CSS | Perishable Press
Quick tutorial post today. To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags): pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSの「word-break: break-all;」と「word-wrap: break-word;」で改行したときの違い - キーワードノート