HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
指定した幅からはみ出たテキストを...にする
ブログを更新してるって事はわりと仕事が落ち着いている時！ 良いのか悪いのかは分かりません。 して、さすがに、前のネタはビミョー過ぎたかな！とか思いつつも今回も特に珍しいネタではないですが、メモがてら。 随分昔に、似たような記事を書いてますが、あっちは使い勝手が悪いので、今回はちゃんと使えそうな方法です。 使いドコロとしては、パンくずリストとかスマホ対応の記事一覧とかでしょうか。 サンプルは下記よりご覧ください。 重要になってくるのは、以下の3つのプロパティです。 ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } どれか一つでも無いとダメなので、セットで書くようにしませう。 わりとIE6でも...にはならないけど、切ることは出来たりと対象ブラウザも広いです。 パンくずリストで使う場合は、2行にな
【文字数取得】jQueryでコンテンツ要素の文字数を取得するパターン | BlackFlag
以前ここで「jQueryで入力フォームに文字カウント（カウントダウン）を設置する方法」と題して 入力フォームの文字数の値（value）を取得して 文字数カウントダウンを設置する方法を紹介しましたが valueの値ではなくて＜p＞タグなど通常のコンテンツ要素の 文字数の値を取得するやり方について紹介してみます。 まずシンプルな記述方法として ◆SCRIPT $(●●●●).text().length; 単純にこれだけの記述でコンテンツ要素の文字数は取得することができます。 この「.text().length;」で文字数を取得する場合は 入力されている文字列に含まれるスペースや改行なども1文字としてカウントされる為 使用する場面によっては実際に取得したい値と変わってきてしまう可能性もあるかと思います。 その様な場合で、文字列の中のスペースや改行は 文字数カウントに含めないように取得する場合の記
http://strml.github.com/examples/jquery.textFit.html
jQuery.textFit Examples jQuery.textFit respects existing CSS and fits within the box it is placed, regardless of padding, line-height, font-face, or letter-spacing. These examples are run in slow motion using setInterval to show how they work. Actual sizings are invisible and average <3ms. View source to see how options are applied.
dynamo.js
A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content. About Dynamo is the simple way to add a new dimension to your site content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage. It was created by this guy and can be found on GitHub. Usage Implementing dynamo with your content involves l
可読性、ユーザビリティを向上させるテキストハイライトライブラリ·Fokus MOONGIFT
Fokusは選択した文字の周囲だけをハイライト表示させるJavaScriptライブラリです。 ユーザビリティを高めるアイディアの一つとして、ユーザが行ったアクションに対してその場で応えるというのがあります。今回はそのためのライブラリFokusを紹介します。選択した文字周辺だけをハイライトするJavaScriptライブラリです。 最初の表示です。 適当に文字を選ぶとその部分だけがハイライトされます。 選択する文字を変えれば当然ハイライトも移動します。 複数の段落にまたがればハイライトも大きくなります。 目立つのでコピーしやすくなりそうです。 Fokusはニュースや論文、ブログ記事など長文が多いサイトにおいて用いると読みたい部分だけに集中できて便利かも知れません。フォーカスが変わった時のアニメーションもスムーズでストレスなく読み進められそうです。 FokusはJavaScript製、MIT L
まるで画像。テキストを曲線上で表現する·CSSWARP MOONGIFT
CSSWARPはテキストをベジュ曲線や円に沿って表示するJavaScript/CSSライブラリです。 Web Fontの登場によってWebサービスのロゴをテキストで記述するサイトも増えています。しかしまっすぐではなく多少のイフェクトをかけようと思ったらIllustratorのようなソフトウェアを頼らざるを得ませんでした。そこでCSSWARPを使って複雑な文字の描画を実現しましょう。 これがテキストというのが驚きです。 ちゃんと文字として選択できます。 こちらは自分で文字を作れるデモ。 ビジュ曲線でぐりぐり動かせます。 回り込みもできます。 円に沿って描いています。 その結果のHTMLを取得できます。IE9/Opera/Firefox/WebKit対応です。 CSSWARPはベジュ曲線などに沿って文字が描けます。テキスト、曲線の動き、フォント、フォントの配置など細かく変更が出来ます。後は生成
Fokus - Emphasized text-highlighting using JavaScript
Fokus uses JavaScript to emphasize anything you select by covering the rest of the page with semi-transparent black. Try it out by selecting this paragraph or the sample content below. You'll see the entire page fade out while this text is highlighted. If you want to use Fokus on your site you just need to include the fokus.min.js script (3kb, no dependencies). Fokus is also available as a Chrome
Webブラウザで書いたメモをDropboxに保存·Text2Box MOONGIFT
Text2Boxはテキストエリアに入力した内容をDropboxにテキストファイルとして保存できるソフトウェアです。 最近オンラインのテキストエディタ的ソフトウェアが幾つか出ていますが、Text2Boxもその一つと言えそうです。オンラインで作成し、その結果は自分のDropboxに送るという形をとっています。 上がテキスト、下に選択した記法に沿って変換されたテキストが表示されます。 Markdownの場合、こんな感じです。 Dropboxと接続します。 テキストを作成したらDropboxに保存ボタンを押します。 ファイルが作成されました！ Text2Boxはファイル管理機能はないので、保存したらテキストファイルが作成されてその中にテキストエリアの内容が反映されます。そしてテキストエリアの内容は消える仕様です。ちょっとしたメモをさっと保存しておくと言った使い方に良いかも知れません。 Text2B
旧・Macの手書き説明書 - FC2 BLOG パスワード認証
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ https://mac-tegaki.comへ移転中 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
Set Text On A Circle | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There isn’t any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We’ll explore one way to do it here. But be forewarned, we’re going to use some CSS3 and JavaScript and not give two hoots about older browsers that don’t support some of the
jqIsoText: jQuery Text Effect Plugin
Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that. One of them is jqIsoText. With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On that way we’re getting something similar to isometric projection. That can be done for whole block
テストやモックアップに。ダミーのHTMLソースを生成する·Fixie MOONGIFT
Fixieは自動的にWebコンテンツを生成するモックアップアプリ用ライブラリです。 Webデザインをしていたり、デザインやライブラリのデモサイトを作る際に必要になるのがダミーのコンテンツです。適当な文字でも良いですが、より本物らしいコンテンツを使ってみたいならばFixieを利用してみましょう。 それっぽいコンテンツが表示されているのが分かります。 実際のソースです。コンテンツがないのが分かります。 読み込むたびに記述が変わります。 Fixieはコンテンツ生成時に使ってほしいタグを用いて利用します。例えば「 」といった具合です。さらに他のタグを使う場合には中に「 」といった具合に記述していきます。そうすれば自動的にそのタグを使ったコンテンツが生成され、文字も適当に作成してくれます。 FixieはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIF
overlasting.net
overlasting.net 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
テキストファイルを処理するときのUnixコマンドまとめ - nokunoの日記
個人的にテキストファイルを処理することが多いのですが，簡単な処理ならUnixのコマンドをパイプとリダイレクトで組み合わせてできることが多くあります．今回はそんななかでもちょっとマニアックなTIPSをまとめてみました． sortコマンドでタブ区切りのファイルを指定する最近知って驚愕したのがこれ．sortコマンドでタブ区切りのファイルを指定したいときは，Ctrl+v Tabでタブ文字を入力していたのですが，$ sort -t $'\t' -k 2,2 のようにしてタブ区切りで2番目のキーでソートすることができます． 1000行おきにデータをサンプリングする1000行おきにファイルからデータをサンプリングしたいときとかは，perlでワンライナーを書くのが速いようです．$ perl -ne '$i++; print unless ($i % 1000)' 某所のコードゴルフによるとこれだけ短くでき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Modal-Style Text Selection with Fokus
http://jrvis.com/trunk8/
Set a Shortcut to Type an Email Address Instantly in Mac OS X with Text Expansion
Making Room to Breathe: Wrapping Text Around Elements | Codrops
Bacon Ipsum - A Meatier Lorem Ipsum Generator
