はてなブログでソースコードを表示させる方法

はてなブログでソースコードを表示させる方法

photshop

パターンをphotshopで作りました。リピートさせるとこんな感じになります。

イラレでsvgに変換→htmlに埋め込む方法

<html> <head> <meta charset="utf-8"> <title>かぼちゃ</title> <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen,print"> </head> <body> <div id="content"> <object data="image/2.svg" " type="image/svg+xml" width="592" height="120">かぼちゃ</object> </div> </body> </html>

svgで線・円・楕円を書く

<html> <head> <meta charset="utf-8"> <title>線・円・楕円を書く</title> </head> <body> <svg width="600" height="300"> <rect width="100%" height="100%" fill="red" /> <rect x="50" y="50" width="100" height="100" rx="20" ry="20" fill="yellow"./> </rect></rect></svg></body></html>

css 縫い目のようなデザイン

<html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" media="screen,print"> <title>縫い目のようなデザイン</title> <style type="text/css"> div { background: #036; display: inline-block; /*デフォルトのpaddingがかかる h1をたくさ…</link></meta></meta></head></html>

svgで描く

<html> <head> <meta charset="utf-8"> <title>グループタグを使ってまとめて指定</title> </head> <body> <svg width="600" height="300"> <g stroke="black" stroke-width="10"> <rect width="100%" height="100%"/ fill="red"/> <rect width="400" height="100"/ fill="white"/> </rect></rect></g></svg></body></html>

クロスフェードのソース

<html> <head> <meta charset="utf-8"> <title>クロスフェード</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="jquery.cross-slide.js"></script> <style> #slideshow { width: 500px; height: 200px; margin: 100px auto; } </style> </head> <body> </body></html>

svg アニメーション

<html> <head> <meta charset="utf-8"> <title>アニメーション2</title> </head> <body> <svg width="600" height="300"> <rect width="100%" height="100%" fill="red" /> <circle cx="100" cy="100" r="20" fill="pink"> <animate attributeName="r" from="20" to="80" dur="2s" repeatCount="indefinite" /> </animate></circle></rect></svg></body></html>

flash

<html lang="ja"> <head> <meta charset="utf-8"> <title>flash フェイドアウト</title> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen,print"> </head> <body> <div id="container"> <h1>■Flash</h1> <p class="label">幸運 おみくじ</p> <div class="display"> </div></div></body></html>

ようやくfloatについて、理解が出来てきた頃の授業での課題です。 2003.01.07

svg 閉じられたベジ絵曲線

<html> <head> <meta charset="utf-8"> <title>閉じられたベジ絵曲線</title> </head> <body> <svg width="600" height="300"> <rect width="100%" height="100%" fill="red" /> <polygon points="100 50 150 100 50 100" stroke="black" fill="none"/> </svg> </body> </html>

0からはじめるweb日記。

文字通り、超初心者が奮闘するブログです。 日々の勉強で更新出来るか心配ですが、 勉強のまとめ等が出来たら載せたいと思っています。 よろしくお願いします。

はてなブログでソースコードを表示させる方法

>|| の間に以降のソースコードを記載すればよい。htmlなら >|html|phpなら >|php|と、記述すればタグとして判断されなくなり ソースコードが記述されるようになります。