T&T

infomation

相互リンクRSS

ORBIT SPACE：
フリーソフトの樹：1/29 11:54
kurox.net：1/28 01:26
二十歳街道まっしぐら：1/27 10:00
(仮)：1/21 23:00
裏技shop DD：1/13 00:00
なんでもブログΣ：12/18 14:43
NETAZINE：12/3 16:25
花華花だよりプラスα：11/23 00:43
ryo'z web and life log：11/3 18:32

プロフィール

HN：鷹本
歳：平成生まれ

特技と呼べるものは
特に持ってませんが
ある程度HTML関係は触れます

ログイン

Bloggerがゆっくりしかし確かに成長していた件

はてなブログが一般公開されたようなのでアカウントを取って見ました。使った感じとしてははてなダイアリー以上にテンプレの自由度は低めですがその分シンプルでこのままその良いところを伸ばしてくれればと思います。

で割りと好感触だったので他のサービスとの比較がしてみたくなりまして、LivedoorBlog、SeesaaBlog、FC2Blog、Blogger等も久しぶりに触って見た所、Bloggerが思いの外使えるようになっていたので、今回機能紹介などをしてみようかな、と。

自分がBloggerを最後まともに触ったのは確か2008年に入る前だったと思います、それ以降はずっとWordpressにどっぷりだったので。その頃はFC2blogが広告もなく、ブログサービスの中では一番質が高かったと記憶していますが、少しずつ改良進歩が重ねられ今となっては機能的にもFC2blogや今人気のLivedoorBlogとも引けを取らない出来になっていると感じます。

追記：今からブログを始める人に、僕が「blogger」をすすめるワケ | 想造ノートおっとつい最近似た様な記事がヒットしてたのか……出すタイミング間違えたかも…

…more
タグ: blogger
- 未分類
- 2012-01-28

「画像を使わずに見出しを水平線で挟むCSS小技」をspan無しで実現してみた

元記事：画像を使わずに見出しを水平線で挟むCSS小技 – かちびと. net

何となくspanを使うのが気に入らなかったのでちょっと試してみた。

<html>
<style>
h1{
    margin:0;
    padding:0;
    font-family: 'Sorts Mill Goudy',serif;
    line-height: 1.5;
    font-size:30px;
}
p{
    text-align:left;
}
html,body{
    width:100%;
    padding:0;
    margin:0;
}

div#body1{
    text-align: center;
    position:relative;
}
#body1 h1 {
    background: none repeat scroll 50% 50% white;
    display:inline-block;
    text-align: center;
    padding:0px 20px;
}
#body1 h1:before {
    border-top: 1px solid black;
    content: "";
    display: block;
    margin: 23px 0 0;
    position: absolute;
    left:0;
    width: 100%;
    z-index: -1;
}

#body2 h1{
    position:relative;
    text-align:center;
}
#body2 h1:before {
    border-top: 1px solid black;
    content: "";
    display: block;
    margin: 23px 0 0;
    position: absolute;
    width: 100%;
    z-index: -1;
}
#body2 h1:first-line {
    background:white;
}
</style>
<body>
<div id="body1">
<h1>
Kachibito
</h1>
<p>Applicake chocolate cake carrot cake sweet roll icing marshmallow powder cake. Biscuit caramels faworki donut jujubes. Toffee dragée bonbon. Soufflé cookie topping powder jelly cookie I love. I love chocolate bar bonbon carrot cake chocolate bar caramels pastry. Pie I love candy applicake bonbon lemon drops. Dragée sweet roll cupcake I love gingerbread danish croissant cotton candy jelly-o. Topping croissant chocolate marshmallow oat cake I love. Pastry chocolate cake pudding cookie dessert marzipan topping wafer I love. Jujubes apple pie sugar plum marzipan I love dragée candy soufflé cotton candy. Sugar plum carrot cake liquorice faworki marzipan tiramisu. Wafer gummies croissant sweet I love. Dessert cake I love liquorice halvah halvah. Tootsie roll candy canes carrot cake chocolate bar gummi bears powder pie cheesecake carrot cake. Oat cake donut gummies soufflé. Sweet sesame snaps cake chupa chups caramels chupa chups.</p>
</div>
<div id="body2">
<h1>
Kachibito
</h1>
<p>Applicake chocolate cake carrot cake sweet roll icing marshmallow powder cake. Biscuit caramels faworki donut jujubes. Toffee dragée bonbon. Soufflé cookie topping powder jelly cookie I love. I love chocolate bar bonbon carrot cake chocolate bar caramels pastry. Pie I love candy applicake bonbon lemon drops. Dragée sweet roll cupcake I love gingerbread danish croissant cotton candy jelly-o. Topping croissant chocolate marshmallow oat cake I love. Pastry chocolate cake pudding cookie dessert marzipan topping wafer I love. Jujubes apple pie sugar plum marzipan I love dragée candy soufflé cotton candy. Sugar plum carrot cake liquorice faworki marzipan tiramisu. Wafer gummies croissant sweet I love. Dessert cake I love liquorice halvah halvah. Tootsie roll candy canes carrot cake chocolate bar gummi bears powder pie cheesecake carrot cake. Oat cake donut gummies soufflé. Sweet sesame snaps cake chupa chups caramels chupa chups.</p>
</div>
</body>
</html>

2パターン。1は割りとオーソドックスな感じ、外にtext-align:center:とposition:relative;が必要、だけど元ネタと同じように自由にデザインできる。もう片方は:first-line擬似要素をspanの代わりに使って実現してある。paddingが使えないのでデザイン的に微妙。

どちらも;before擬似要素を使ってあるのでIE6-7非対応。もうちょっとうまくやれる気がするけど今のところ思い浮かばない。

結論：おとなしくjQueryを使おう。

タグ: css

Webサイト制作の心得とテク
2011-11-08

android携帯を使ってノートを電子化してiPadで見る為のフローチャート

お久しぶりです。最近は体調も良くおかげで漸く受験勉強がまともとまでは行きませんが、出来る様になってきました。まあそのおかげでこっちの更新は全く手つかずになっていた訳ですが。ともかく今回はその勉強関係で一つ。（内容自体は続きを読むからどうぞ）

割と誰でもノート遍歴を持っていると思いますが、

私の場合はサイズはずっとB5でしたが、普通のノート→ルーズリーフ→方眼紙となってきました。ノート→ルーズリーフはノートを忘れて順番が滅茶苦茶になるのに嫌気が差した為。ルーズリーフ→方眼紙は後で纏めはするけどそれまでにバラバラになって順番が分からなくなる事が頻発した為に乗り換えました。

よくよく考えてみればルーズリーフ→方眼紙は「最初からバインダーに纏めてノートとして使う」とか「ページ毎に教科名とページ数書く」をするだけで改善する話なのですが、不精な私としては面倒くさかった訳です。

さて今回。今度はノートの管理が面倒くさくなりました。

これまではノートを見返してこなかったのでさしてコレの管理の手間は無かったのですが、最近になって2年分程見返さなくなってきました。

一つの学期のノート消費量は大体ハリポタ一冊分の厚みくらいになります。これはもう不精の私に管理は面倒くさいと言うより無理です。まず必要な部分を引っ張り出して来るのが面倒くさいです。必要なモノを各箇所から引っ張り出した後、また元の場所に戻すのはさらに面倒くさいのでかなりの確立でテキトーな所に仕舞います。（以下ループ）

そんな混沌(主に机の上)の世界に現れた救世主が電子化ですよ！　丁度iPadも買いましたし、整理は圧倒的にこっちの方がラクです。当然複数を同時にプレイするのが難しいと言ったデメリットがありますが、ノートとしての用途ならさほど問題になりません。という事でいってみましょう。

…more
タグ: android, iPad, 電子化
- 未分類
- 2011-08-19
次のページへ »

infomation

カテゴリー

アーカイブ

相互リンクRSS

プロフィール

Bloggerがゆっくりしかし確かに成長していた件

「画像を使わずに見出しを水平線で挟むCSS小技」をspan無しで実現してみた

android携帯を使ってノートを電子化してiPadで見る為のフローチャート

割と誰でもノート遍歴を持っていると思いますが、

さて今回。今度はノートの管理が面倒くさくなりました。