Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法
レイアウト
jquery.js,multicol.min.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script type="text/javascript" src="jquery.js" id="jqueryJS" charset="UTF-8"></script>
<script type="text/javascript" src="multicol.min.js" id="jqueryJS" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#sample").multicol({colNum: 3, colMargin: 10});
});
</script>
<style>
#wrap{width:666px;}
#sample {line-height: 18px; font-size:12px;}
#sample p, #sample h2, #sample h3, #sample h4, #sample h5, #sample h6 {
margin-bottom: 18px;
text-align: justify
}
</style>
</head>
<body>
<div id="wrap">
<div id="sample">
<p><img src="1.jpg" alt="" /></p>
<h2>Romeo and Julia</h2>
<p>
'Romeo und Julia' (Or, 'Romeo and Juliet' and Romeo and Juliet) is a drama by playwright William Shakespeare in England. It is roughly said about 1595 though there are various opinions about the first performance fiscal year. 'Romeo und Julia' is not considered to be a profound tragedy like a four great tragedy ('Hamlet', 'Macbeth', 'Othello', and 'King Lear') though the classification of the complete volume (the following "The 1.2th case book") that was made to the tragedy, and published when Shakespeare postmortem is also the same. In a shakespearian tragedy at later years, the striking feature that characters' characters cause the tragedy is seen. The one that is called "Fate" that is surrounding circumstances and chance, etc. from characters' characters leads both and surroundings to the tragic ending for this in Romeo und Julia. Moreover, a joke to excessive in the text and violent words and phrases and indecent talk [yaritori] are seen, and are obviously stronger than other shakespearian tragedy works the element as the farce (vulgar farce). It had been entirely written before though the mark of "Romeo und Julia" was general now, "Romeo and Juliet". Therefore, the mark is different in [**dai] of the movie according to year of the Japan opening to the public. Moreover, the mark of the latter is used in the still custom in the field of the classical music and the ballet. In the English pronunciation, it is not necessarily accurate though the former is nearer.
</p>
<p><img src="2.jpg" alt="" /></p>
<h2>Story</h2>
<p>
The stage is city Verona in Italy of the 14th century. The Montagu family and the Capulet family repeat contention that quarrels with one's own flesh and blood there. Montagu's only son Romeo suffers from the unrequited love to [rozarain]. Romeo who sneaked in to the party in diversion of mind, friends, and Capulet family meets Capulet's only daughter Juliet, and two people fall into love at once. Two people marry secretly in Osamu road monk Lawrence's origin. Lawrence expects two people to put the period to the fight over both houses the marriage. Romeo immediately after the marriage however kills Mrs. Capulet's nephew [tei;boruto] retaliation that it is rolled in the fight in the street, and the best friend and Mercutio are killed. Archduke [esukarasu] of Verona punishes Romeo to the crime of banishment. On the other hand, Capulet orders Juliet who gives it sadly to marry archduke's relative's Paris..
</p>
</div>
</div>
</body>
</html>
雑誌のレイアウトの様なカラムを作成するスクリプトです。
jqueryを使用するプラグインなのでとても簡単に実装できます。
また、日本製なのでチュートリアルも分かりやすいかと思います。
ダウンロード先のチュートリアルを参照してください。
line-height や font-size を直接指定していないと、うまくカラムが実現できないので、少し気にかけといてください。
シンプルだけど効果抜群ですね。CSSを自分で設定して、レイアウト自体は簡単に設定できますが、カラムの切り替えによるテキストの連続性を維持することは難しいので、このスクリプトはすごく便利だと思います。
SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。
画像表示
コンテンツ表示
ナビゲーション
ユーザー補助
その他
