Web Archive

アイコンをWebfontで実装する

スマートフォン案件などでアイコンを使用する際Webfontを導入すると解像度とか色とか考えなくていいから楽。

商用可のアイコンWebfont

とかで矢印アイコンをダウンロードして使用。

導入方法

  1. FontelloでWebfontをダウンロード・fontフォルダとかを作って格納
  2. cssファイルに以下を記述(webfontをダウンロードした際に同梱されているものを参考)
    @font-face {
    	font-family: 'fontello';
    	src: url("../font/fontello.eot");
    	src: url("../font/fontello.eot?#iefix") format('embedded-opentype'), url("../font/fontello.woff") format('woff'), url("../font/fontello.ttf") format('truetype'), url("../font/fontello.svg#fontello") format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    [class^="icon-"]:before,
    [class*=" icon-"]:before {
    	font-family: 'fontello';
    	font-style: normal;
    	font-weight: normal;
    	speak: none;
    	display: inline-block;
    	text-decoration: inherit;
    	width: 1em;
    	margin-right: 0.2em;
    	text-align: center;
    	opacity: 0.7;
    }
    
  3. リストとかの要素の:beforeとか:afterに使用
    	.list li a:after {
    		font-family: 'fontello';
    		color:#666666; /* アイコンの色味 */
    		content: 'e75e';  /* アイコンの種類の指定 */
    	}
    

:afterを使用するとコンテンツのすぐ横にアイコンが配置されるため、リストなどで横幅が可変で常にアイコンを右寄せかつ縦中央に配置しておきたい場合はcssのtable-cellを使用

html

<ul>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
	<li><a href="#"><div class="wrap">hogehoge</div></a></li>
</ul>

css

	.list li a {
		display:table;
		width:100%;
	}
	.list li a .wrap {
		display:table-cell;
		width:auto;
		padding:10px; /* 余白調整 */
	}
	.list li a:after {
		font-family: 'fontello';
		color:#666666;
		content: 'e75e';
		display:table-cell;
		vertical-align:middle; /* 文章が2行以上になった場合のアイコンの縦中央寄せ */
		width:15px; /* アイコンの大きさ分横幅指定 */
	}

Sass導入参考サイト

レスポンシブwebデザイン参考サイト

Twitterの公式ウィジェットの高さを可変にする方法

Twitterの公式ウィジェットの高さが固定だと途中で内容が切れてしまう。
ので、高さを可変にする方法の覚書。

CSSで以下の場所の高さの指定をimportantで上書きすればOK。

.twtr-timeline { height:auto!important; }

TypeSquare使用方法

作業の流れ

  1. http://typesquare.com/ でユーザ登録
  2. マイページでWebサイトのURLを登録
  3. マイページの「導入方法」で発行されるjsコードを貼り付け
  4. 使用したいフォントを探し、フォント名をcssの「font-family」に記述

めも

  • 表示されるまでに1秒ほどのラグがある → 気になる場合はページ表示時にフェード効果をかけてごまかすなどなどした方が良いかも
  • カタカナの字間が気になる → HTMLで文字詰めするタイポグラフィー用JS