改行位置や文字揃えの「見た目のこだわり」はやめましょう｜株式会社杏林舍
※2014年3月時点の記事です ※2016年4月にCrossCheckは「Similarity Check」に名称が変わりました ... といったご要望をいただくことがあります。 紙面へのご要望でしたら出来る限り修正しますが、ホームページの場合は修正せず、そのままとさせていただいていることがほとんどです。 その理由は、「紙面」と「ホームページ」の違いにあります。 「紙面」と「ホームページ」の違い 「紙面」はいつ、どこで、誰が見ても、レイアウトは絶対に変わらない 新聞や雑誌などの紙媒体は、決められたサイズの紙に「印刷」されたものなので、見る人や場所など、その環境を選ばず、同じレイアウトで情報を伝えることが出来ます。 「ホームページ」は見る環境によって、レイアウトが変わる ホームページは、パソコン・スマートフォン・タブレット・携帯電話（ガラケー）・ゲーム機・テレビ…様々な端末で見られるものです
テキストの縦方向の中央揃えについて - Qiita
ボックス要素の中にテキストが入る場合、縦方向の中央に揃えたいときがあると思います。 その場合どのように配置しているでしょうか。 インライン要素の場合は「vertical-align: middle;」を使えば中央に揃えことができるのですが、 pタグのようなボックス要素の中にテキストを入れたい場合、 うまいこと配置できないことがあり、 今回は、縦方向の中央揃えについて調べてみました。
複数行にも対応！CSS を使ってはみ出した文字を「･･･」で省略する方法 ｜ KLUTCHE
範囲内に収まらない文字を「･･･」で省略する方法です。 使うのは CSS のみで、各ブラウザにも対応しています。 長い文章の冒頭だけ表示したいときってあると思います。 実現する方法としては、 ・PHP 等を使ってサーバサイドで文字列を丸める ・text-overflow を使う なんかがあると思います。 PHP なんかでは文字列を指定の幅でトリミングすることを「丸める」と言います。 なんか専門用語的で格好良いので 「ちょっとこの文字列丸めといて」 的に使うことをおすすめします。 しかし、上記2点の欠点として、 ・PHP は文字数指定の省略なので、可変する幅に応じることができない ・text-overflow: ellipsis; は複数行に対応できない が挙げられます。 使う場面が限定されすぎです。 そんな時に使って欲しいが今回の方法です。 デモ デモページ ウインドウの狭くしてもらうとわ
Mojik
Mojikという、ウェブにおける和文の文字組みをコントロールするためのJavaScriptライブラリを公開しました。いまのところ、以下のパターンでの「アキ」を調整できます。 連続する約物のアキ 行頭の始め括弧のアキ 欧文間のアキ Mojik.compose()メソッドの引数にCSSセレクターを渡すと、マッチする要素から上記に該当する箇所を検出し、それぞれマークアップが挿入されるので、CSSでアキ量を調整します。以下のページに実際に動いているデモがあるので、ぜひ見てみてください。 Mojikデモ ウェブページの本文やタイトルなどで使われることを想定しているので、HTMLタグがあっても問題なく動作することは必須条件でした。基本的に、まずHTML文字列をテキストとタグに分けて、正規表現でテキストの検索を繰り返す、という方法を採っています。ここらへんはkotarok/jQuery.waokonなど
行の長さ
ウェブページの和文横組みの本文で、適切な行の長さはどのくらいか。もちろんこれは一概に言えるものではなく、内容、デバイス、書体、行間など、様々な要素に左右されます。しかし多くの場合、読みやすい行の長さは24字から40字程度で、長くても48字程度までにすると良い、というのが僕の意見です。これは僕の感覚もありますが、以下のようなガイドラインや実例を参考にしています。 まず欧文の場合、『The Elements of Typographic Style』にある「45字から75字」というガイドラインがスタンダードとして広く受け入れられているらしく、ウェブ・デザインについての書籍やブログ記事でも多く参照されています。 Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a s
テキストや画像を滑らかにアニメーションさせるニュースティッカー「jQuery liMarquee」 – bl6.jp
jQuery liMarqueeはニュースティッカーを実装できるjQueryプラグインです。テキストや画像などを滑らかにアニメーション（自動スクロール）させることができます。 jQuery liMarqueeの詳細は以下になります。デモもチェックできます。 Edit fiddle – JSFiddle コンテンツが滑らかに流れていて、つい視線がいっちゃいますね。ユーザーにちょっと注目して欲しい部分がある時なんかに、こういった動きのあるティッカーを活用してみるのもおもしろいそうです。 デモではティッカーにマウスオーバーするとアニメーションが停止します。ドラッグ移動させることでコンテンツを好きな位置へ動かすことができるのもすごく便利ですね。 アニメーションは水平方向のスクロール以外にも、垂直方向にスクロールさせることも可能です。 いろいろとカスタマイズもできるので、ニュースティッカーを実装した
CSSのtext-overflowではみ出したテキストを「…」表示
CSSのtext-overflowでellipsisを指定すると はみ出したテキストを、javascriptや、jsp、phpなどを使わなくても省略表示できます。 意外とIEでも6から対応しているので、仕事でも心置きなく使えます。 2014/05/10 制作日誌更新！ある日のランチ風景をレポート！ 2014/05/08 movieに予告編ｘｘ版を追加しました 2014/05/05 制作日誌更新！主演のｘｘｘｘさんを直撃！ text-overflowを有効にする4つの条件 text-overflowは、表示領域からテキストがはみ出した場合 末尾に省略記号の「…」を表示するかどうか指定するCSSプロパティです。 そのため、text-overflowが表示領域とはみ出しを認識できるよう 幅指定で「表示領域」をつくって 改行禁止やはみ出し禁止で「はみ出す」概念を準備しないと効果がありません。 幅指
Googleドライブで、画像やPDFの文字をテキストにするOCRにかける方法 | 経験知
※本ページはプロモーションが含まれています 作成:2015/04/14 更新:2018/02/05 2014年7月にGoogleドライブのデザインが新しくなりました。 以前のGoogleドライブは設定をすると、画像やPDFをアップロードする際に画像内の文字を文書化するOCRにかけてくれるので重宝していました。 しかし、新しいGoogleドライブになるとアップロード時の設定が無くなり、アップロードしただけでは自動で文書化されなくなりました。 Googleドライブ右上の「歯車」→「設定」をクリックすると、 「アップロードしたファイルを変換する」 という項目があり、これにチェックを入れればアップロードした画像を自動解析してくれるかと思ったのですが、アップロードしただけでは文書化されませんでした。（この設定は関係ないのでチェックいれなくて良いです。） いろいろ模索していると画像内の文章をテキスト化
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
CSS3のtext-shadowを使ったテキスト装飾のサンプル集 - かちびと.net