For the past seven years, everyone who has created an account on Twitter starts out with their default profile photo as an egg. This was a playful way to reference how eggs hatch into birds that send all the Tweets you see on Twitter! But now it’s time for something new – something that encourages people to upload their own photos for more personal expression. So today, we’re introducing a new def
指定領域に収めたいテキストを適当な長さに切って表示するCSSです。text-overflow: ellipsis; の仕様と使用例。1行または複数行にわたる場合で書式が変わります。長い英単語（URLなど）の折り返しにもどうぞ。 テキストをCSSだけで適当な長さに省略表示する方法です。URLなどの折り返しが効かない文字列を扱うときなどにどうぞ。はみ出しても構わないから大量のカラムを一定サイズに収めたいときも便利です。 好きなサイズで切り取るには overflow:hidden; が一般的ですが、テキストの場合は text-overflow:ellipsis を使うと三点リーダー「…」を付与できます。省略したことがユーザにも伝わるので何となく親切というか。 text-overflow を使って1行で収める 細かい解説は後回しにして、まずはソースから。 指定領域の設定 基本となる表示領域と適当な
WordPressで自動改行処理をするwpautopの条件と対処方法、また無効にする方法についてまとめました。 WordPressのパラグラフ処理は、少し癖がありますね。 頼まれもしないのに勝手にPタグくっつけておきながら、いざ自分で装飾に使おうとすると、ちょっとしたことでブチブチ切れてしまうので困ってる方も多いんじゃないでしょうか。 …ということで傾向と対策について考えてみました。 WordPressの改行タグが閉じる条件 WordPressでは基本的に2連続の改行、つまりテキストの前後に空行が1行以上入ると<P>タグで囲まれるようになっています。 この処理は wpautop() という関数がおこなっており、他にもいくつかの条件でパラグラフを認識しています。 改行コード2連続 行頭のURL Pタグの中にDIVタグを入れる 傾向1: 改行コード2連続でPタグが閉じる 前述の通りWordPr
外部サイトへのリンクに印を付けます。fontawesomeのアイコンフォントを使っているので、基本コードはコピペで実装可能です。 ページ内のリンクを押したら外部サイトにいきなり飛んでいくとびっくりすることがあるので、前後にアイコンを付けて判りやすくします。 振り分け条件ごとに複数の書式があるので、いろいろと書き出してみました。 リンクにアイコンを表示するための基本設定 リンクの後ろにマークを付けて判りやすく目立たせます。 利用するマークはアイコンフォントの fontawesome を使うと手軽です。多数のアイコンに対応しているうえにCDNも用意されているため、コピペで実装できるのがミソ。 Font Awesome, the iconic font and CSS toolkit デモ これは外部リンクです。（押してもこのページに帰ってきます） HTML 【HTML】 <head> <lin
require "rhymer" lyric = <<"LYRIC" 1853年（嘉永6年）、長崎の出島への折衝のみを前提としてきた幕府のこれまでの方針に反して、江戸湾の目と鼻の先である浦賀に黒船で強行上陸したアメリカ合衆国のマシュー・ペリーとやむなく交渉した幕府は、翌年の来航時には江戸湾への強行突入の構えを見せたペリー艦隊の威力に屈し、日米和親条約を締結、その後、米国の例に倣って高圧的に接触してきた西欧諸国ともうやむやのうちに同様の条約を締結、事実上「開国」してしまった>。 同年6月22日、12代将軍家慶が「今後の政治は徳川斉昭と阿部正弘に委ねる」と言い残して61歳で亡くなった。同年7月1日、幕府、国書を諸大名に示し意見を問い、3日にはお目見え以上の幕吏にも意見を問うた。260年間>「知らしむべからず、由らしむべし」を大法則としてきた幕府にとっては大方向転換であった[9]。 開国した後は
Twitterの埋め込みコードが既存のCSSとバッティングすると描画の書き換えが余分に発生することがあります。ガタガタして読みにくいのでCSSセレクタで回避しましょう。 特定ツイートをWEBサイトに表示させるときは、Twitter公式のツイート埋め込みにて行います。 ただしツイートの全文が <blockquote> タグで囲われているため、既存の引用タグにクラスが割り振られていないとCSSがバッティングして何度もレンダリングすることになります。リソースの無駄だし何となくカッコ悪いことになりがち。 自前のコードにはクラスを割り振って棲み分けるのが一番なんですが、長くサイトをやっていて古い資産がたくさんある場合は遡るのも大変です。 そんなときにCSSセレクタでフィルタリングする方法です。 ツイートの非同期読み込みとCSS描画タイミング Twitterで埋め込み用のコードを出力すると、以下のよう
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方です。レスポンシブWebデザインにも活用できるので覚えておくと役立つかと思います。例えば、画面幅が500px以下の場合にだけ適用したいといったことがjQueryを使えばとても簡単にできるので便利ですね。 width()を使う ウィンドウサイズを取得するにはwidth()を活用していきます。以下は500px以下の場合、文字が赤に変わる例です。 <script> $(function() { var w = $(window).width(); var x = 500; if (w <= x) { $('#sample').css({ color: 'red' }); } }); </script> HTML <p id="sample">サンプル</p> ただし、これだと画面を読み込んだ時点でのサイズで判定されるので、読
上下に並んだボックス要素の順番を入れ替えるCSSです。レスポンシブにも対応しているので、デバイスごとにコンテンツの優先順位を変えたいときにも有効です。 CSSで上下に並んでいるボックス要素があったとき、CSSだけで順番を入れ替える方法です。 マークアップは論理的な読みやすさを優先して、レイアウトだけ遊びたい場合などに便利です。 また、メディアクエリで囲えばデバイスごとにコンテンツの順番を変えられるのでレスポンシブデザインとも相性が良いです。 上下のDIVを入れ替えるCSS 4つのDIVを box1, box2, box3, box4 の順に用意し、box1, box2 と box3, box4 をそれぞれ .wrap で包んで配置します。 【HTML】 <div class="wrap"> <div class="box1">box1</div> <div class="box2">box
HTML5 Advent Calendar 2012、7日目の記事として、Microdata （マイクロデータ） に触れてみます。サンプルソースを中心に、実際のページでどのように使えるのかを示しました。これから Microdata を使ってみたいという人に少しでも参考になればと思います。 HTML5 Advent Calendar 2012、7日目の記事です。なんか軽い気持ちで書いてみますとか言ってしまったんですが、緊張しますね… さて、タイトルの通りなのですが、HTML Microdata （マイクロデータ） について簡単に触れてみようかなと思います。この辺の話題に関して、Microdata とは何かとか、詳しい解説はすでに色々な方が書かれていますのでそちらを見ていただく （文末にまとめてあります） として、この記事では、そういう解説は置いといて、Blog や、企業の Web サイトなど
SVGファイルをHTMLに埋め込むときにつまずきがちな塗りの色指定についての解説。ベクターフォーマットの特性上、従来のcolor属性による指定では正しくマッチングしないのが原因です。 スマホファーストが叫ばれるようになって久しい昨今ですが、Retina対応にピクセルベースで2x画像を用意するのは大変な労力です。 そこで注目されるのがベクター形式のSVG(Scalable Vector Graphics)フォーマット。直接扱ったことがなくてもWebフォントなどで間接的に触ってる方も多いでしょう。 ただ、CSSで手軽に装飾できるWebフォントと違ってSVG形式データを直接叩くのは多少癖があるかも知れません。特にウェブフォントの延長でSVG画像を扱うとき最初につまづきがちなのがcolor指定じゃないでしょうか。 SVG画像における色指定の概念 SVG画像の着色はHTML5の塗り操作（ paint
CSSの遅延読み込みをjQueryで実装する方法。レンダリングブロックを起こすWebフォントなどを非同期で読み込めます。下地に使うrel=prefetch属性とrel=subresource属性の違いについても書きました。 WEBページの高速化をもくろんでCSSの遅延読み込みに行き着く人は多いでしょう。発想は単純で、rel=”stylesheet” 属性をつけていない <link> タグを用意して後から属性を追加します。 大きくて複雑なデータは非同期読み込みしたい一方、<link rel=”stylesheet”>はヘッダに書く決まりです。そのうえ接続を占有するのでレンダリングブロックが発生してしまう。 おち研でもWebフォント入れてるので体感速度は速いに越したことはないだろうってことで試してみた…んですけど、結論から言うとすぐに戻しました。 タイトルロゴがWebフォントなので、遅延読み込
<div> <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa fa-spin">く <span class="fa fa-spin">る <span class="fa
今年の「鎌倉花火大会」は、残念ながら中止になりました。 その代わりにはなりませんが、jsdo.it上で花火大会を開催します。 「hanabi」タグをつけて花火のアニメーションを投稿すると、 花火会場にあなたの花火が打ち上がります。 花火職人のみなさんへ 「hanabi」のタグがついたコードが会場で打ち上がります。 各コードはiframeで表示され、徐々にフェードアウトしつつ約3秒間表示されます。 他の花火と重なることはありません。背景は黒(#000)もしくは透過で作成してください。 画像から花火を作ってみよう！ 1. THE花火職人 / Fireworks Generatorに画像をドラッグ＆ドロップして配列を生成します。 2. 以下のコードをフォークして、htmlのscriptタグの中に生成した配列を貼り付けます。 → やらない花 注目の花火 これらの花火をあなたらしくアレンジ（＝フォー
JavaScript を PNG に圧縮するツールを作りました。JS_Packer demoscene は最近 WebGL を使ったものも多くなってきています。 demoecene は基本的に ローカルにファイルとして存在しているものを使う そのファイル容量は 1 バイトでも少ないほうがいい (容量制限がある分野がある) という文化です。そして JS ファイルを圧縮する手法の一つに、JS を PNG 画像にして、それをデコードする、という手法が存在します。 JS の性質JS のコードは基本的にアスキー文字の集まりです。アスキーコードは、小文字/大文字のアルファベット、数字、スペースといった 128 種類しか存在しません。 PNG8 の性質8 ビット PNG は 256 種類の色をパレットに持っています。 PNG は可逆圧縮（ロスレス）形式の画像です。圧縮しても失われるデータはありません。
僕は、プログラムをする上で変数や関数に良い名前を付けるのはとても重要と考えています。 というのも、良い名前を付ければ、それだけでそのコードがしたいことの説明になり、コメントと同等の働きをすることもあるからです。 自分がちゃんとそれをできているのかはさておき、僕は普段から、できれば読みやすくて分かりやすい名前を付けたいと思っています。他の人も読むコードであれば、できればプログラムでよく使われるような単語を利用して書いた方がより分かりやすいです。 ただ、よい名前を考えるのって、ちょっと面倒くさいんですよね。僕はこれまで、英語の辞書を利用して、考えたりしていたのですが、「何か、プログラムでよく使われる単語をまとめたものはないか？」と探したら、ドンピシャのものがいくつかあったので、それらをまとめて以下で紹介します。 photo by Michael Coté codic codic – デベロッパ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
WordPressで複数のBRタグを入れて長い行間を作る方法。XML記法で書くと自在に増やせます。タグ打ちをコンソールに増設する方法とCSSで指定する方法、技術的経緯などについても解説してます。 WordPressのテキスト処理は、パラグラフ処理のみならず、改行処理にも独特の癖がありますね。 テキストエディタ上でリターンすると改行コードに対して <br> タグを入れてくれるので、調子こいて2回リターンするとPタグで閉じてくれちゃう、というアレです。しかも手打ちでBR打っても勝手に消してくれよるよ！ Word並みのお節介に激おこですけど、英語圏の人は日本語的な改行が嫌いなので仕方ありません。プンスカするより建設的な方法を考えましょう。 【 もくじ 】 タグ打ちで空行が書ける方法を考える ├<wbr> 改行制御タグを入れてリターン ├<br>タグの書き方を工夫する ├BRタグをXML省略記法で
自動改札機の運賃計算プログラムはいかにデバッグされているのか？ 10の40乗という運賃パターンのテスト方法を開発者が解説（前編） ふだん何気なく使っている鉄道。改札を降りるときにICカードを自動改札にかざすと、「ピッ」という音と共に一瞬のうちに運賃を計算してくれます。けれど、複数の路線を乗り継いだり、途中で定期券区間が挟まっていたりと、想像しただけでもそこには膨大な組み合わせがあります。それでも運賃計算プログラムはわずか一瞬で正しい運賃計算が求められ、バグがあったら社会的な一大事にもつながりかねません。 爆発的な計算結果の組み合わせがあるはずの運賃計算プログラムは、どうやってデバッグされ、品質を維持しているのでしょうか？ 9月12日から14日のあいだ、東洋大学 白山キャンパスで開催された日本科学技術連盟主催の「ソフトウェア品質シンポジウム 2012」。オムロンソーシアルソリューションズ 幡
脱法シェル芸でマシンがトリップする案件が増加したため、名称を危険シェル芸に変更したら、変更後に危険シェル芸を試してさらにトぶ人間が増加。 それで・・・あのー宣伝で申し訳ないんですが・・・「シェルスクリプト高速開発手法入門」も・・・お願いします・・・ http://www.amazon.co.jp/dp/B00LBPGFJS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
