長過ぎる文字列に対して、文末に「…」をつけて省略して表示したい時があります。 これをHTMLのtable要素で実現する方法について書きます。 固定幅テーブル まず、行が固定幅で良いのなら以下のように書けます。 table { table-layout: fixed; } td { white-s…

table-layout: fixed; せずに text-overflow: ellipsis; する

Hamlについて軽く勉強しました。 ※Haml＝HTMLがカンタンに書けるもの。同系統に、jade, slimがあり。 ドットインストールを見て、 dotinstall.com 公式ドキュメントを見たくらい。 haml.info 感想としては、やっぱり今使っているslimの方がいいかなと。 まず…

一応Hamlを勉強してみた。でもやっぱりslim一択

chuckです。 自分のための個人サイトを作成しているので、作成過程を記録します。 ちなみに、現状↓ http://chuck0523.github.io/front-end-coding/rotateWindow/rotateWindow.html まあ、クリックイベントならスライドできます。 ここにスワイプ動作も付け加…

個人サイト作成① スワイプ動作を実装…できなかった

chuckです。 HTMLとCSSでオシャレなベルト風アイテムを作ってみたいと思います。 ひとまずの完成図はこちら。 こちらをベースにして試行錯誤していこうかなと思います。

【HTML・CSS】オシャレなベルトっぽい部品を作った

chuckです。タイトルはちょっと意味不明かもしれません。 画像で見たほうが早いですね。 要はこれを こうしたいというお話。 つまり、列の枠線としてではなく、列の区切りとしてボーダーをつけたいという使い方ですね。 HTML まずHTML的にはこうです。 gist3…

【HTML・CSS】列の間にだけボーダーをつける

chuckです。 オシャレなサイトを発見しました。こちらです。 www.startup50.jp こちらのTOPページの背景画像が動いている（ように見える）んですよね。 面白いなーと思ったので、自分なりに再現してみます。

【HTML】画像を動画っぽく表現してみる

どうも！chuckです。 いきなり私事ですが、最近は転職に興味アリアリですｗ 求人を眺めているとやっぱりフロントエンドエンジニアになりたいな！と思う次第です。 そこで！今回はHTMLを高速で記述できると噂のslimを使ってみたいと思います。

HTMLが高速に記述できると噂のslimを使ってみる

どうも！chuckです。 前回こちらの記事でHTMLのvideoタグについて書きました。 HTML5のvideoタグを試してみるも、敗北する - コンパイラかく語りきchuckwebtips.hatenablog.com まー、使ってみたはいいものの動かないｗ しかし今日はリベンジに成功したので…

HTML5のvideoタグが使えたよー！ついでに再生・停止ボタンとスマホ対応も実装

どうも！chuckです。 CSSのdisplay（ディスプレイ）プロパティってあるじゃないですか。ブロックレベル要素とかインライン要素とか、そういうやつです(´ω`) 今回、主要なHTMLタグについて、デフォルトでのdisplayの状態をまとめてみましたヽ(=´▽`=)ﾉ

主要なHTMLタグのdisplayプロパティを調べてみた

どうも！chuckです。 皆さん、HTML5使ってますか？？当たり前？それともまだ手をつけてない？？ 僕自身、HTML5で使ったことあるのはCanvasくらい。なので、今日はHTML5の中でも気になっていたVideoタグを試してみましたヽ(=´▽`=)ﾉ

HTML5のvideoタグを試してみるも、敗北する