Layoutに関するeditlifeのブックマーク (7)

  • [CSS]divなど余計なものを使用しないで、レイアウトをセンターに配置するテクニック | コリス

    「<div id="wrapper">」などのラッパーを使用しないで、レイアウトをセンターに配置するスタイルシートを紹介します。 デモページ ※スタイルにCSS3を使用しているため、この版はIE6には対応していません。後ほど紹介するシンプル版はIE6に対応しています。 「<div id="wrapper">」を使用しないでレイアウトをセンターに配置するスタイルシート 元記事ではスタディが段階ごとに紹介されていますが、ここではその最終段階を紹介します。 CSS:シンプル版 <!DOCTYPE html> <style> html{overflow: hidden; height: 100%; background: #c72;} body{overflow: auto; height: 100%; width: 600px; margin: 0 auto; /* center */ padd

  • アップした写真をお洒落に見せるJavaScript

    久しぶりのJavaScriptネタです。最近は、マック(MBP)で作業することも多いのですが、アップルの提供する.Mac というサービスを使うと簡単に見栄えのよいホームページ(HP)を作成することが出来ます。このサービスはマックを使ってこそ活きるものですが。 で、何種類ものHP向けのテンプレートが予め用意してあるんですが、多くのテンプレには、デジカメで撮った写真を単に貼り付けるだけでなくて、それらをちょこっと斜めにしたり切手風に縁取りしたり出来て、お洒落に演出できるわけです。自分も以前からこういうことをppBlogでしたいなぁとは思っていて、現状、写真っぽく見せたりドロップシャドウを付けたりというのはスタイルシートを使って出来るようにしています。後は、切手風とか写真を少し傾けて貼り付けるとかですが、これらはサーバーサイドのPHPプログラムで画像を加工すれば可能なんだけど、写真をアップする際

    editlife
    editlife 2010/04/19
    写真を傾けるアレ。IE対策もあるでよ。
  • Playstation mk2

    Free Backgrounds Browse the selection of free beautiful background photos submitted by our community of talented contributors and completely free to download and use.

    Playstation mk2
    editlife
    editlife 2010/04/01
    ソースコードを見やすくするライブラリ
  • 確率変更可能なランダムテキスト/広告 - JavaScript

    サンプルと機能 → Sample 1:確率指定可能なランダムテキスト テキストをランダムに変更します。 確率変更が可能ですが、もちろん完全にランダムにすることもできます。 この機能を用いてランダム広告を作成するにはこちらを参考にしてください。 サンプルスクリプト 緑の文字が変更箇所で、赤い文字が対応するスクリプトです。 "//"以下はコメントです。削除しても影響ありません。 必要な箇所をコピー&貼り付けして編集してください。 → Sample 1:確率指定可能なランダムテキスト <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- // ランダムテキスト function randomAdv() { m = 0, x = 0, y = 0; ad  = new Array();

    editlife
    editlife 2009/12/28
    お手軽でいい。
  • スタイルシートで縦書き - 縦書き用CSS - tategaki.info

    縦書きレイアウト用スタイルシートです。JavaScriptなどを使用せず、スタイルシートのみで縦書きを実現できます。 縦書きWebレイアウト用のスタイルシート "tate-style.css"です。コピーしてお使いください。 ※ 2013.03.27 font-family設定をアップデート。 ※ 2011.07.03 細か〜い修正をしました。詳しくは → こちらで。 @charset 'UTF-8'; /* 縦書きレイアウト用スタイルシート tate-style.css last updated : Mar 27 , 2013 tyz@freefielder.jp http://freefielder.jp http://tategaki.info/ */ div.tate-area{ float:right; font-size:12pt; } div.tate-area a{ col

    editlife
    editlife 2009/12/15
    ちょっとおもしろそう。
  • jQuery Masonry › Basic Examples

    These examples demonstrate the basic effect of jQuery Masonry. $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); itemSelector is specified to rearrange all box elements, including the ones inside another div. <div id="primary" class="wrap"> <div class="box col2">...</div> <div class="box col1">...</div> <div class="box col1">...</div> <div class="box col3">...</div> <div> <div c

    editlife
    editlife 2009/12/12
    不揃いなテキストを簡単な記述でfloatできるjQuery。
  • CSS Text Wrapper

    The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Examples Not Just Rectangles Anymore The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code

    editlife
    editlife 2009/03/26
    曲線に沿わせたテキストができるCSSを作れる。
  • 1