[Code] Excelを使ってHTML生成

[Code] Excelを使ってHTML生成
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
Posted : 2011-12-12 16:15:13
by namba ハック   共有
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？
そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。
面倒な作業が、わずか数秒で終わります！
Excelを使った高速HTML生成
僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！
DreamweaverでもCSVファイルを取り込むことはできるのですが、
＜dl＞タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。
さぁ、お客さんから送られてきたExcelデータから ...
＜dl＞タグでマークアップされたHTML生成する流れを説明します。
データ数はうんざりするくらいあると思ってください。
Let's Excel
1) 列の追加
まず、送られてきたExcel表に、タグを入力する列として、BDF列を追加します。
「No.」などの必要ない列がある場合は、消してください。
2) タグの入力
追加したB, D, F列とH列の１行目セルそれぞれに、以下のように入力します。もうなんとなく、わかってきましたね。
B列 ＜dt＞
D列 ＜/dt＞＜dd＞＜span class="address"＞
F列 ＜/span＞＜span class="telno"＞
H列 ＜/span＞＜/dd＞
3) 全行にコピー
１行目が書けたら、全行にコピー！。同じように、追加した列（B～F列）と末尾のH列もコピーします。
コピーの方法は、他の方法でも構いません。
4) データを全選択
入力したタグも含たデータを全選択して、クリップボードにコピーします。
ここまでくれば、こっちのものです！。
5) メモ帳でタブの削除
このままでは、タブ文字が入っていて使えないので、一度メモ帳に貼り付けて、
「編集」メニュー→「置換」
を使ってタブ文字を消します。
他のエディタソフトでも同様です。
置換ダイアログの「検索する文字」には、タブ文字を入力するのですが、タブ文字ををキーボードから入力することはできないので、
→
をコピーして「検索する文字」に貼り付けてください。
6) 完成！
これで完成です！。タブを置換したものをコピーして、
Dreamweaverなどにさらに貼り付けて使用してください。
インデントが気になる場合は、Dreamweaverなどでオートフォーマットすれば問題ないですね！
データが多くなると効果絶大！
ここで紹介した方法ですが、特にデータが多くなってくるとこの方法は、絶大な効果を発揮します！
何より、この方法を使うことで、タイポなどちょっとしたミスがなくなるのが、うれしいですね。
また、この方法は、＜option＞タグや、＜td＞タグなどの生成にも応用できます。
めんどくさい作業は、さっさと終わらせてしまいましょう！

Web Rockets
http://webrocketsmagazine.com/entry/20111209/html-code-generation-using-excel.html






Excel表に、タグを入力する列として、BDF列を追加
    V
追加したB, D, F列とH列の１行目セルそれぞれに、以下のように入力
B列 ＜dt＞
D列 ＜/dt＞＜dd＞＜span class="address"＞
F列 ＜/span＞＜span class="telno"＞
H列 ＜/span＞＜/dd＞
    V
１行目が書けたら、全行にコピー
    V
同じように、追加した列（B～F列）と末尾のH列もコピー
    V
入力したタグも含たデータを全選択して、クリップボードにコピー
    V
一度メモ帳に貼り付けて、
「編集」メニュー→「置換」
を使ってタブ文字を消します
    V
これで完成,タブを置換したものをコピーして、Dreamweaverなどにさらに貼り付けて使用

Web Rockets
http://webrocketsmagazine.com/entry/20111209/html-code-generation-using-excel.html

[code][html] YouTubeパラメータ,VIDEO_IDをカンマで並べて連奏する

playlist
値: 再生する動画 ID をカンマで区切ったリスト。
値を指定すると、URL パスの VIDEO_ID に指定した動画が最初に再生され、playlist パラメータに指定した動画はその後に再生されます。 

YouTube
https://developers.google.com/youtube/player_parameters?hl=ja

https://www.youtube.com/embed/VIDEO_ID?controls=1&showinfo=1&playlist=VIDEO_ID,VIDEO_ID,VIDEO_ID,,,,,&autoplay=0&rel=0"＞
＜/iframe＞

＜iframe allowfullscreen="" autohide="1" autoplay="0" controls="" frameborder="2" height="220" width="290" showinfo="0" src="
https://www.youtube.com/embed/v8gtod0RF-M?controls=1&showinfo=1&playlist=V-czWaF5WjY,2NPQUuW-fW4,QZhO8PT-FKk&autoplay=0&rel=0"＞
＜/iframe＞

[code] YouTubeパラメータ,再生リスト

◆再生リストの読み込み
listType プレーヤー パラメータを playlist に設定します。
また、list プレーヤー パラメータを、読み込む YouTube 再生リスト ID に設定します。
http://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID
再生リスト ID の前には、次の例に示すように、文字 PL を付ける必要があります。
http://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6
YouTube Data API（v3）を使用している場合、再生リスト ID を検索結果、チャンネル リソース、またはアクティビティ リソースから取得して、これらの URL をプログラムによって構成することができます。再生リスト ID を取得した後、上の URL の中にある PLAYLIST_ID というテキストをその値に置き換えます。
◆ユーザーのアップロード動画の読み込み
listType プレーヤー パラメータを user_uploads に設定します。
また、list プレーヤー パラメータを、読み込むアップロード動画の所有者の YouTube ユーザー名に設定します。
http://www.youtube.com/embed?listType=user_uploads&list=USERNAME
◆特定のクエリの検索結果の読み込み
listType プレーヤー パラメータを search に設定します。
次に、list プレーヤー パラメータに検索キーワードを指定すると、その検索結果がプレーヤーに読み込まれます。
http://www.youtube.com/embed?listType=search&list=QUERY

google
https://developers.google.com/youtube/player_parameters?hl=ja








◆再生リストを埋め込む
パソコンで YouTube アカウントにログインします。
ページの左側で、埋め込みたい再生リストを選択します。
URL から再生リスト ID をコピーします。
次の手順に沿って個々の動画の埋め込みコードを変更します。
動画 ID の代わりに（「embed/」の後に）、「videoseries?list=」を入力します。
次に「=」の後に再生リスト ID を貼り付けます。
ブログやウェブサイトの HTML にコードを貼り付けます。
例:
＜iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

wisdommingle.com
https://wisdommingle.com/





「再生リスト」、「ユーザーアップロード動画」、「特定のクエリの検索結果」
続いて、「動画単体」以外の埋め込み方法です。
「動画単体」以外にも、
「再生リスト」、
「ユーザーアップロード動画」、
「特定のクエリの検索結果」
の埋め込みが可能です。
それぞれの埋め込むURLは、「https://www.youtube.com/embed」以降に以下のように付け加えます。
「再生リスト」…「?listType=playlist&list=[再生リストID]」
「ユーザーアップロード動画」…「?listType=user_uploads&list=[ユーザーID]」
「特定のクエリの検索結果」…「?listType=search&list=[検索文字列]」
再生リスト、ユーザーアップロード動画のIDに関しては、それぞれページへアクセスしてURLを見れば分かります。
下記がIDとなります。
「再生リスト」…「https://www.youtube.com/watch?v=ZJzbIxP0pWU&list=PL1F408CDA76C6192F」
「ユーザーアップロード動画」…「https://www.youtube.com/user/kazuyoshisaitoch/featured」

俺の開発研究所
https://itlogs.net/youtube-embed/







◆動画リストを表示
組み合わせて使用　listType list
指定した文言のリスト search=検索クエリ
YouTube チャンネル user_uploads=チャンネル ID
再生リスト playlist=再生リストID
◆再生リストを作成
再生リスト 動画IDをカンマ区切りで並べる

wisdommingle.com
https://wisdommingle.com/








使えるパラメータ
ちなみに、こんなパラメータがあるよというレベルの説明ですが、気になるものがあれば調べてご利用ください。
cc_load_policy：字幕表示
color：プレーヤーの動画進行バーに動画を開始してからの経過時間を示すときに使用する色を指定
disablekb：キーボード操作の有効無効
enablejsapi：JavaScript API が有効無効
fs：全画面表示ボタンを表示の有無
hl：プレーヤーのインターフェースの言語を設定
iv_load_policy：動画アノテーション表示
list：プレーヤーに読み込むコンテンツを識別するときに、listType パラメータと組み合わせて使用
listType：レーヤーに読み込むコンテンツを識別するときに list パラメータと組み合わせて使用
modestbranding：YouTube ロゴを表示の有無
origin： IFrame API のセキュリティを強化
playlist： 再生する動画 ID をカンマで区切ったリスト
playsinline：このパラメータは iOS 上の HTML5 プレーヤー制御

Report Hot Cafe
https://report.hot-cafe.net/youtube-code-1254



＜iframe src="
https://www.youtube.com/embed?listType=playlist&list=PLxXBlqZHSvQCKELPXIBUdQsjri0dLn1ry&controls=1&loop=1&showinfo=0&autoplay=0&autoplay=0&rel=0" width="350"＞
＜/iframe＞

gfgdgfd pc






（非推奨）Flash形式（
※注記：YouTubeの Flash API は、現在では、非推奨になっています。
YouTubeの Flash API というのは、Flash形式の埋め込み動画プレーヤー（「Flash（AS3）プレーヤー」）（
Flash形式の埋め込み動画プレーヤー（「Flash（AS3）プレーヤー」）の映像の左下の部分に、下記のように表示される文章が、非推奨であることを示しています。
「The YouTube Flash API was officially deprecated on January 27th, 2015.」
（日本語訳：「YouTubeの Flash API は、2015年1月27日に、公式に非推奨になりました。」）
ですので、現在は、HTML5形式の動画プレーヤー（

[code][html,css] divでつくるdiv-box

＜div style="
background-color: #508ca3;
color: white;

width: 450px;
margin: 5px;
padding: 10px;"＞
....................
.............
...
.............
........
＜/div＞

vcvxc pc

[code] YouTubeパラメータ

再生するコンテンツの選択
埋め込みプレーヤーの設定次第で、動画、再生リスト、ユーザーのアップロード動画、または特定のクエリに対する検索結果が読み込まれるようにすることができます。
以下のリストで、これらのオプションについて説明します。
◆動画の読み込み
埋め込み IFrame の場合は、読み込む動画の YouTube 動画 ID を IFrame の src URL に指定します。
http://www.youtube.com/embed/VIDEO_ID
YouTube Data API（v3）を使用している場合、動画 ID を検索結果、再生リスト アイテム リソース、動画リソースなどのリソースから取得して、これらの URL をプログラムによって構成することができます。動画 ID を取得した後、上の URL の中にある VIDEO_ID というテキストをその値に置き換えてプレーヤー URL を作成します。
◆再生リストの読み込み
listType プレーヤー パラメータを playlist に設定します。
また、list プレーヤー パラメータを、読み込む YouTube 再生リスト ID に設定します。
http://www.youtube.com/embed?listType=playlist&list=PLAYLIST_ID
再生リスト ID の前には、次の例に示すように、文字 PL を付ける必要があります。
http://www.youtube.com/embed?listType=playlist&list=PLC77007E23FF423C6
YouTube Data API（v3）を使用している場合、再生リスト ID を検索結果、チャンネル リソース、またはアクティビティ リソースから取得して、これらの URL をプログラムによって構成することができます。再生リスト ID を取得した後、上の URL の中にある PLAYLIST_ID というテキストをその値に置き換えます。
◆ユーザーのアップロード動画の読み込み
listType プレーヤー パラメータを user_uploads に設定します。
また、list プレーヤー パラメータを、読み込むアップロード動画の所有者の YouTube ユーザー名に設定します。
http://www.youtube.com/embed?listType=user_uploads&list=USERNAME
◆特定のクエリの検索結果の読み込み
listType プレーヤー パラメータを search に設定します。
次に、list プレーヤー パラメータに検索キーワードを指定すると、その検索結果がプレーヤーに読み込まれます。
http://www.youtube.com/embed?listType=search&list=QUERY

google
https://developers.google.com/youtube/player_parameters?hl=ja






動画リストを表示
組み合わせて使用: listType list 再生リスト
指定した文言のリスト: search 検索クエリ
YouTube チャンネル: user_uploads チャンネル ID

Qiita
https://qiita.com/stakei1/items/ccae2e0029b2cbd7e33b











YouTube動画の埋め込みコード…自動再生など細かく設定できた！
2017/6/6 2017/6/7
ＩＴ・サイエンス
YouTube動画をブログに埋め込んで、ここぞというポイントから自動スタートさせたいと思っても、YouTubeには分かるような説明が見当たらずに、何となくあきらめていませんか？
挙句のはてには、「動画の○○分●●秒あたりから問題のシーンになります」なんて記載してみたりしていませんか？
もっとスマートにYouTube動画をあなたのブログに埋め込みましょう。
尚、この記事では、コードの仕組みを理解して、簡単にアレンジできるようになることが目的です。
お好きなところからご覧ください

Report Hot Cafe
https://report.hot-cafe.net/youtube-code-1254



◆動画ページ上で提供されているコードのアレンジ
YouTube上で、以下の設定が可能
動画のサイズを指定
「560×315」「640×360」「853×480」「1280×720」「カスタムサイズ」の中から動画のサイズを選択できます。
また、動画のアスペクト比は16対9になっています。
動画が終わったら関連動画を表示
ブログに入れるのでしたら、表示しないほうがYouTubeへ行かれないかもしれません。
プレーヤーのコントロールを表示
表示しないと、ブログなどで見てもらった場合、どうしてよいのか分からない人もいると思います。
動画のタイトルとプレーヤーの操作を表示
動画の上部に表示されるタイトル等です。
プライバシー強化モードを有効
プライバシー強化モードを有効にすると、ウェブサイトの訪問者が動画を再生しない限り、訪問者に関する情報は YouTube に保存されないとのことです。
ほとんどの人がこの設定を有効にしていないと思いますので、ここはあまり気にしないでも良いと思います。
これらのチェックをするとコードに反映しますので、コピーペーストします。
◆コードの仕組みを確認しておく
取得した埋め込みコード
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI” frameborder=”0″ allowfullscreen＞＜/iframe＞
動画が終わったら関連動画を表示する
プレーヤーのコントロールを表示する
動画のタイトルとプレーヤーの操作を表示する
src=”https://www.youtube.com/embed/sIgawh0g-PI”
この３つにチェックを入れたのが、コードに何も付加されていない状態
動画が終わったら関連動画を表示する
チェックを外すと
src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0”
プレーヤーのコントロールを表示する
チェックを外すと
src=”https://www.youtube.com/embed/sIgawh0g-PI?controls=0”
動画のタイトルとプレーヤーの操作を表示する
チェックを外すと
src=”https://www.youtube.com/embed/sIgawh0g-PI?showinfo=0“
３つともはずすと
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0&controls=0&showinfo=0″ frameborder=”0″ allowfullscreen＞＜/iframe＞
このコードをベースにやりたいことを追加する
これらの利用頻度が高いと思います。
自動再生
autoplay=1
値: 0 または 1
動画が自動的に再生されますので、使う動画によっては注意してください。
〇〇秒よりスタート
start=秒数
値: 正の整数
動画の先頭から指定された秒数分進めた位置から再生されます。
xx秒で終わる
end=秒数
値: 正の整数
動画の先頭から測定し、再生を停止します。
ループ再生
loop=1
値: 0 または 1
1 を設定すると
最初の動画が繰り返し、再生されます。
尚、このパラメータを単一動画に使うには
loop=1&playlist=VIDEO_ID
このように「 playlist 」パラメータとセットでの利用になります。
startパラメータが設定してあっても、ループ再生時には頭からのスタートになります。
これらは、複合して利用できます。
尚、上記のパラメータはすべて省略可能です。
◆これら以外の使えるパラメータ
ちなみに、こんなパラメータがあるよというレベルの説明ですが、気になるものがあれば調べてご利用ください。
cc_load_policy：字幕表示
color：プレーヤーの動画進行バーに動画を開始してからの経過時間を示すときに使用する色を指定
disablekb：キーボード操作の有効無効
enablejsapi：JavaScript API が有効無効
fs：全画面表示ボタンを表示の有無
hl：プレーヤーのインターフェースの言語を設定
iv_load_policy：動画アノテーション表示
list：プレーヤーに読み込むコンテンツを識別するときに、listType パラメータと組み合わせて使用
listType：レーヤーに読み込むコンテンツを識別するときに list パラメータと組み合わせて使用
modestbranding：YouTube ロゴを表示の有無
origin： IFrame API のセキュリティを強化
playlist： 再生する動画 ID をカンマで区切ったリスト
playsinline：このパラメータは iOS 上の HTML5 プレーヤー制御
◆実際のコードの書き方を確認
前述のYouTubeから取得したコードの動画を示す部分
src=”https://www.youtube.com/embed/sIgawh0g-PI”
sIgawh0g-PIの部分はVIDEO_IDなので以下のように簡略化して説明します。
src=”https://www.youtube.com/embed/VIDEO_ID”
この部分にパラメータと値を加えていきます。
「?」を加えてからになります。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ＝値”
複数のパラメータを加えたい場合は「&」で繋げます。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値”
YouTubeからコードを取得すると「&」部分が「&」となっているかと思います。
HTMLのソース表記で「&」と記載してブラウザで見ると「&」と表示されるはずです。
ブログのエディターなどで、うまく動画が表示されない場合のみ注意してみてください。
「&」と記載して問題が無いですが、念のため覚えておいてください。
実際に記載する場合は以下のようになります。
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値” frameborder=”0″ allowfullscreen＞＜/iframe＞
◆まとめ
基本的な埋め込み方法は次のとおり
埋め込みたい動画を選ぶ
検索するなどブログ等に埋め込みたい動画を選んでください。
埋め込みコードの取得
動画ページ上で提供されているコードのアレンジ
YouTube上で、以下の設定が可能
動画のサイズを指定
動画が終わったら関連動画を表示
プレーヤーのコントロールを表示
動画のタイトルとプレーヤーの操作を表示
プライバシー強化モードを有効
これらのチェックをするとコードに反映します。
そのコードをメモ帳などのエディターにコピーペーストしておきます。
例：＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/sIgawh0g-PI?rel=0&loop=1&playlist=sIgawh0g-PI” frameborder=”0″ allowfullscreen＞＜/iframe＞
そして、このコードをベースにやりたいことを追加する
自動再生
autoplay=1
xx秒よりスタート
start=秒数
xx秒で終わる
end=秒数
ループ再生
loop=1
このパラメータを単一動画に使うには
loop=1&playlist=VIDEO_ID
このように「 playlist 」パラメータとセットでの利用になります。
埋め込みコードの動画を示す部分の例
src=”https://www.youtube.com/embed/VIDEO_ID”
この部分にパラメータと値を加えていきます。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ＝値”
複数のパラメータを加えたい場合は「&」で繋げます。
src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値”
実際に記載する場合は以下のようになります。
＜iframe width=”853″ height=”480″ src=”https://www.youtube.com/embed/VIDEO_ID?パラメータ=値&パラメータ=値&パラメータ=値&パラメータ=値” frameborder=”0″ allowfullscreen＞＜/iframe＞

 Report Hot Cafe
https://report.hot-cafe.net/youtube-code-1254

主なYouTubeURLパラメータ一覧（※2015年5月22日現在）

デフォルト値	概要／設定値の説明
loop=0	繰り返し再生オフ
loop=1	繰り返し再生オン
playlist=VIDEOLIST_ID	動画連続再生,リストID
playlist=XXXXX,XXXXX	動画連続再生,カンマ区切り
hl=ja,enなど	言語設定
rel=0	動画終了後の関連動画の表示オフ
rel=1	動画終了後の関連動画の表示オン
autohide=0	進行バー自動非表示オフ
autohide=1	進行バー自動非表示オン
autoplay=0	自動再生オフ
autoplay=1	自動再生オン
end=秒数	動画再生の停止位置(時間）,正の整数
iv_load_policy=0	動画アノテーション(オーバーレイ広告）オフ
iv_load_policy=1	動画アノテーションオン

[トラブル] HTMLファイルが文字化けしてしまう

2010年08月17日に投稿
HTMLファイルが文字化けしてしまう
HTMLファイルを作成して、ブラウザで閲覧すると文字化けしてしまう時があります。
文字化けが発生してしまった場合は下記の項目をチェックして見てください。
1.HTML文書内で文字コードは宣言されていますか。
HTMLでは、使用する文字コードを宣言することができます。
宣言をしていなかったためにIEで正常に表示されなかったことがありますので
トラブルを回避するためにも宣言を行ってください。
以下のコードは、文字コードを宣言する記述の例です。
HTML文書内に日本語が出現する前に宣言する必要があります。


   
       
       
   
   
        ボディーです。文字化けしていますか？
   


2.HTMLファイル自体の文字コードと文書内で宣言されている文字コードが一致していますか。
HTML文書内で宣言を行っても、HTMLファイル自体の文字コードと違う文字コードが使用されていては文字化けの原因となります。テキストエディタによって、文字コードを設定できる箇所は違いますが大抵は保存時か、文書のプロパティなどで変更可能です。HTML文書内で宣言された文字コードとHTML文書自体の文字コードが異なってしまっている時の例が以下の画像です。宣言はUTF-8ですが、文書はSJISです。

Codaholic
http://codaholic.org/?p=232

[ソフト] GetHTMLW

[ソフト] GetHTMLW
GetHTMLW
ホームページをまるごと Get して、オフラインで閲覧 GUI版
ソフト名：GetHTMLW8.3.0
ファイル：gethtmlw-8.3.0.zip / 452,036Bytes / 2011.11.03
ユーザーの評価(18人)：3.5
コメント：18件
■関連キーワード
閲覧 ,ホームページ ,オフライン ,GUI

Vector
https://www.vector.co.jp/soft/dl/win95/net/se077067.html





評価:★★★★☆
10個ちかくダウンロードしたソフトの中で唯一機能している。
古いページの保存専用。
新しいHTML5ページの保存は無理。

vgfvxc pc










コメント・評価
このソフトに対するコメント・評価です。
No.18：
2016-11-24 00:06:19 ココ2
タイトル：現代の複雑なサイトでは不向き？
本文： 自動で「HTML/CSS/JS/画像」全部ダウンロードして解析したいな。
とここに行き着いたわけなのですが
CSS上で画像を指定されていた場合、ダウンロードされません。
css{ background: url(../images...
No.17：
2012-03-08 14:37:07 龍馬1
タイトル：フラッシュサイトの保存が出来ない
本文： 最近の企業サイトは多くがフラッシュを使用していますが
このソフトでは、フラッシュページを取得できない為、多くのホームページでは機能せず、まるで役に立ちません。
紹介文にある「全て Get」とは大嘘です。
フラッシュサイトでは使用で...
No.16：
2010-10-30 15:19:17 トモタカ4
タイトル：ブログに使ってみて、
本文： 使い方は簡単に分かりましたが、ＨＰの収集には問題なかったです。
しかし、赤い三角ボタンでブログの収集には１０時間もかかった為途中で止めました。
赤い三角にＰボタンはそれほど掛からず終ったのですが、画像がまったくありません。もっとしっかり収集...
No.15：
2009-08-08 10:33:53 nakanaka120015
タイトル： 掲示板を丸ごと保存できるのは、これ以外に私は知りません。
本文：自分のブログ、サイトをＰＣに保存・バックアップするのに使わせて頂いています。
類似のソフトウェアは他にもありますが、掲示板をちゃんと丸ごと保存できるのは、これ以外に私は知りません。
掲示板というのは、表示する際にサーバー側でＣＧ...
No.14：
2007-03-24 10:28:31 nnn734
タイトル： 今尚必要としています。
本文： ダイアルアップ接続の時からくらべると、使用頻度は少なくなりましたが、やはり今でもＨＰ上の有用な情報など見つけたときには、使用しています。
高速回線接続といえども、ＨＰ上のカタログ等、サイトがリニューアルされたり、変更されると不便になる（コチラ...
ダウンロード

Vector
https://www.vector.co.jp/soft/dl/win95/net/se077067.html

[code][css] DIV背景

[code][css] DIV背景

＜div style="
padding: 7px;
background-color: #508ca3;
color: #ffffff;"2＞
＜/div2＞

      VVV

$.ajax({
url:'http://aqwiki.net/rss/rss_list.txt',
success: function(data){

var rss_url = 'http://aqwiki.net/rss/' + data;

var htmlstr = "";
htmlstr += '＜h2＞＜a href="http://aqwiki.net/rss/ko.html" rel="nofollow" target="_blank"＞アクアリウムWiki 相互RSS＜/a＞ 新着記事＜/h2＞';
xxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxx
var container = document.getElementById("aq_feed");
container.innerHTML = htmlstr;

});
}
});

jhhjhg pc

テーブル用CSS設定ツール

テーブル用CSS設定ツール
テーブル用のCSSを設定できるツールです。枠線のスタイルやセルの背景色などを、CSSを使って設定することができます。
CSS テーブルカテゴリー｜HTML テーブルタグカテゴリー

TAG Index
https://www.tagindex.com/tool/css_table.html

HTMLフォーム

HTMLフォーム
ちなみに使用頻度は低いですが、

のように予めvalue属性の値に文字列をセットしておくと、以下のようになります。
ただ、これをあえて使う機会はあまりないでしょう。多くの場合単に入力の邪魔です（笑
よく「カタカナで入力下さい」のように薄い文字を表示させて、カーソルを合わせると文字が消えるというようなものがありますが、あれはこれではありませんので注意下さい。
たまに誤解されて使っている方がおります。
これはplaceholder属性というものを使います。 下記「placeholder属性」を参照下さい。

php-factory.net
https://www.php-factory.net/trivia/17.php







長い文章の入力
テキスト型のinput要素では1行のデータしか入力することができません。
HTMLのフォームでは複数行にわたる文章の入力のためにtextarea要素が用意されています。
アンケートの自由意見欄などにこのテキストエリアを使うことができます。
textarea要素はinput要素とは異なり、開始タグと終了タグのペアを使います。
タグの間に記述された内容が初期値として使われます。
データの名前を指定するname属性のほかに、入力エリアの行数、列数を示すrows属性とcols属性を指定します。
自由に意見を記述してください

KANZAKI
https://www.kanzaki.com/docs/html/htminfo31.html

[css] border-imageプロパティ,枠線の模様を画像で描画

CSS3のborder-imageで、しましまの目立つ枠線を作る
執筆者：西村 文宏
CSS3で追加された「border-image」プロパティを使えば、枠線の模様を画像で描画できます。
しましま柄の画像を枠線として指定すると、とても目立つ「しましま(ストライプ)柄」のボックスを簡単に作ることができます。
実線・破線といった平凡な枠線ではなく、もっと凝った枠線を引きたい際に便利です。
border-imageプロパティの使い方を解説します。
border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引く方法
それでは、border-imageプロパティを使って、枠線に画像を指定し、しましま柄の枠線を引いてみましょう。
以下の3手順で解説致します。
枠線として使いたい画像を用意する
CSSで、通常の枠線を引くよう記述する
CSSで、border-imageプロパティを使って、枠線の模様を画像にする
1. 枠線として使いたい画像を用意する
枠線に使うための画像
まずは、画像を用意します。ここでは例として、右図のように72×72ピクセルのサイズで用意しました。
どんな画像でも構いませんが、縦横とも「3で割り切れるピクセル数」で作っておく方が望ましいです。
詳しくは後述しますが、ここで用意した画像は、縦横3つ(合計9個)に分割された上で枠線に使われるためです。
なお、サンプルで利用した3種類の「しましま柄」の画像は、ご自由にダウンロードしてご活用頂けます(詳しくは後述)。
画像を自力で用意するのが面倒な場合は、それを使ってみて下さい。
2. CSSで、通常の枠線を引くよう記述する
続いて、スタイルシートを記述します。まずは、borderプロパティを使って「実線の枠線」を引くよう、以下のような感じで記述しておきます。
p {
   border: #ff8635 solid 10px;
   padding: 5px;
}
borderプロパティで作る普通の枠線
枠線に画像を指定できない古いブラウザでは、上記の指定だけが枠線の描画に使われます。
ですから、「枠線に使う画像」と似たような色を「枠線の色」として指定しておきましょう。
ここでは、右図のようにオレンジ色(#ff8635)を指定しました。
ここで指定した枠線の太さ(上記では「10px」)が、画像を使う場合でも枠線の太さになります。好きな値を指定して下さい。
なお、paddingは、「枠線」と「内容」との間の余白量です。ここでは「5px」と記述していますが、
好きな値を指定して下さい。省略しても構いません。
3. CSSで、border-imageプロパティを使って、枠線の模様を画像にする
先のスタイルシートに追加して、以下のようにborder-imageプロパティを記述します。
このborder-imageプロパティは、先のborderプロパティよりも後に記述して下さい。
p {
   border: #ff8635 solid 10px;
   padding: 5px;
   border-image: url("shimashima.png") 24 24 round;
}
border-imageプロパティを使って作った枠線
ここでは、枠線の画像として、「shimashima.png」というファイルを指定しています。
その結果、右図のように表示されます。
その後の2つの「24」は、画像の縦横ピクセル数を3分の1にした値を指定しておきます。
ここでは、縦横72pxの画像を使ったので、その3分の1である「24」を指定しています。
最後の「round」は、画像の繰り返し方法を指定しています。
ここでは、とりあえず「round」と記述して下さい。
記述できる種類と効果については、最後にご紹介致します。

All About
https://allabout.co.jp/gm/gc/441025/2/

[seesaa blog] スマートフォン専用ページを消す方法

[seesaa]スマートフォンでもPCサイトを表示
『デザイン』→『スマートフォン』→『コンテンツ』とクリック
      V
『自由欄形式』を『ブログタイトル』の上に設置
      V
『自由形式』以外のコンテンツを削除
      V
『自由形式』をクリックし、以下を記載。
＜SCRIPT LANGUAGE="JavaScript"＞
＜!--
document.cookie = 'force_pc=1; max-age=15768000; path=/';
document.cookie = 'force_sp=0; max-age=15768000; path=/';
location.href=location.pathname;
setTimeout("autoLink()",1000);
// --＞
＜/SCRIPT＞
      V
『保存』ボタンをクリック
      V
『保存』ボタンをクリック

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597




シーサーブログの「スマートフォン専用ページを表示」を消す方法
1、「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリック
      V
2、#iphone-link { display: none !important; }を追加
      V
3、保存をクリック

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597




シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
最終更新日2014/11/16 
公開日2014/06/05
category:ウェブサイトやブログ作成に役立つ無料ソフトやwebサービスとブログカスタマイズ
シーサーブログのスマートフォンサイトは広告がいっぱいだ。
ん？「スマートフォンサイトは設定して無い」って？
残念でした。
スマートフォンサイトは自動的に出来ちゃってるのだ。
シーサーブログユーザーは、一度スマートフォンで自分のブログにアクセスしてみるといい。
いつの間にかスマートフォンサイトが出来ているから！
しかも、べたべたと広告がいっぱいである。
シーサーブログユーザーはスマートフォンでもPCサイトを表示させよう
シーサーブログのスマートフォンサイトの広告、消すことも、場所を動かすことも出来ない。
なぜなら、シーサーブログはスマートフォンサイトのHTMLを公開していないから。
そのくせ、なぜか携帯用のサイトでは広告がほとんど無い。
しかもスタイルシートもHTMLも公開されている。
まあ、無料ブログにとっては、広告収入がほしいってところだろうから仕方が無いといえば仕方が無い。
が、あまりにも広告が多すぎる。
シーサーブログはスマートフォンでもPCテンプレートで表示させた方がいいと思う。
スマートフォンでPCサイトを表示させるには？
スマートフォンでシーサーブログを見たときにPCサイトを見せるための方法はちゃんとある。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597




シーサーブログの「スマートフォン専用ページを表示」を消そう
シーサーブログの「スマートフォン専用ページを表示」を消す方法
「デザイン」⇒「デザイン設定」⇒適応しているスタイルシートをクリック。
2、＃iphone-link { display: none !important; }を追加。
3、保存をクリック。
　これで、「スマートフォン専用ページを表示」が消える。
　後は、PC用のテンプレートやスタイルシートをPCでもスマートフォンでも閲覧できる形に変えるだけ。
　この、PCでも、スマートフォンでも適切な表示がされるサイトのデザインをレスポンシブWebデザインというのだそうだ。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597





これで、スマートフォンで閲覧してもPCサイトが表示されるようになる。
さあ、シーサーブログユーザーはスマートフォンで自分のブログを見てみよう。
PCサイトで表示されているものと同じサイト表示が見れる。
が、そこには大きな
「スマートフォン専用ページを表示」
の表示が！！！
さあ、この「スマートフォン専用ページを表示」をどうする？
シーサーブログの「スマートフォン専用ページを表示」を消そう
「スマートフォン専用ページを表示」は、PC用テンプレートのHTMLの中にも、コンテンツHTMLの中にもそれらしい記載が無い。
どうも、シーサーブログにデフォルトで設定されているらしい。
ここはスタイルシートにdisplay: noneというのを追加して、「スマートフォン専用ページを表示」を表示されないようにしてしまおう。
display: noneの効果
display: noneで指定した部分は、表示されない。
表示されないだけでなく、領域もなくなる。
「スマートフォン専用ページを表示」という表示が出ていた部分が隙間無く表示されなくなる。
display: noneの使用で表示を消すとSEO上問題があるか？
ここで、気になるのは、検索エンジンなどでスパムとみなされないかという点だが、
「正当な理由で利用する限り問題がない」
という話が米GoogleのエンジニアMatt Cutts氏から出ているそうだ。
要は、display: noneで表示させない部分に、やたらに複数のテキストを入れたりしない限り今のところ問題ないということらしい。

使える無料ソフト＆無料サービス
http://freesoft.0hs.org/4169.html#comment-3597
http://freesoft.0hs.org/4169.html#comment-3597

[code]HTML5タグの語源

略されたHTML5タグの語源
タグ名 基となった英単語
nav navigation links
h* heading *
hgroup heading group
p paragraph
hr horizontal rule
pre preformatted text
ol ordered list
ul unordered list
li list item
dl description list
dt description term
dd description description
figcaption figure caption
div division
a anchor
em emphasis
s strike
q quotation
dfn definition
abbr abbreviation
var variable
samp sample
kbd keyboard
sub subscript
sup superscript
i italic
b bold
u underline
rt ruby text
rp ruby parentheses
bdi bi-directional isoration
bdo bi-directional override
br break
wbr word break
ins insert
del delete
img image
iframe inline frame
param parameter
colgroup column group
col column
tbody table body
thead table header
tfoot table footer
tr table row
td table data cell
th table header cell
optgroup option group
keygen key-pair generator

WEBCRE8.jp
http://webcre8.jp/investigate/html5-tag-etymology.html

はじめに ― HTML5を覚えるにあたって
最近HTML5入門と銘打っていくつか記事を書いています。
HTML5に関してはかなり思い入れが出てきて、最近色々制作しています。
webcre8自身も大してできるわけじゃないんですけど、人と会うと結構HTML5の話になったりします。
その中で「まだまだHTML5覚えられないなー」的な人にウケがいいのが
「知ってるようで知らないタグの元の意味を知る」
事です。
折りよく昨日TM LifeさんのHTML のタグを一度覚えたら一生忘れないようにするためのコツ | TM Lifeという記事を見かけ、
これのHTML5版を作ったらちゃんと知りたい人多そうだなーと思いました。
という訳で早速表を作った
と言う訳で略されたHTML5タグの語源表を作ってみました。まず表を見てみましょう。
略されたHTML5タグの語源
タグ名 基となった英単語
nav navigation links
h* heading *
hgroup heading group
p paragraph
hr horizontal rule
pre preformatted text
ol ordered list
ul unordered list
li list item
dl description list
dt description term
dd description description
figcaption figure caption
div division
a anchor
em emphasis
s strike
q quotation
dfn definition
abbr abbreviation
var variable
samp sample
kbd keyboard
sub subscript
sup superscript
i italic
b bold
u underline
rt ruby text
rp ruby parentheses
bdi bi-directional isoration
bdo bi-directional override
br break
wbr word break
ins insert
del delete
img image
iframe inline frame
param parameter
colgroup column group
col column
tbody table body
thead table header
tfoot table footer
tr table row
td table data cell
th table header cell
optgroup option group
keygen key-pair generator
タグ名がそのままタグの意味になっているものは抜いてあります。
ここにあるのは108つあるHTML5タグのうち49個。
付け加えておきますと、この表はタグの英語での意味ではなく、単純にタグの名前になった元の単語を示しただけです。
それでもどうしても分かりにくそうなものは熟語として加えてあります。

WEBCRE8.jp
http://webcre8.jp/investigate/html5-tag-etymology.html

jQuery Google Map

jQuery Google Map
Google Mapsの地図を簡単に表示「jQuery Google Map」
Google Mapsの地図を簡単に表示するプラグイン「jQuery Google Map」を紹介します。
jQueryプラグイン「Google Map」
jQueryプラグイン「jQuery Google Map」は、「Google Maps javascript API」を利用して、地図を描画するプラグインです。
「Google Maps javascript API」の操作を全く知らなくても大丈夫！
操作部分の全ては「jQuery Google Map」プラグインがやってくれます。
サイトに地図をサササッと簡単に挿入できるので便利！

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/









デモとソースをご覧ください。
「jQuery Google Map」のデモ
ソース（HTML + jQuery）
＜!DOCTYPE html>
＜html>
＜head>
＜meta charset='utf-8'>
＜meta name="description" content="jQuery Google Mapのデモでーす。">
＜title>jQuery Google Map - jQueryプラグインまとめのカルマ
＜script src="http://code.jquery.com/jquery-2.0.0.js">
＜script type="text/javascript" src="https://www.google.com/jsapi">
＜script type="text/javascript">
    google.load("maps", "3.4", {
      other_params: "sensor=false&language=jp"
    });
＜/script>
＜script src="src/jquery.googlemap.js">
＜/head>
＜body>
＜p>＜a href="https://webkaru.net/jquery-plugin/jquery-google-map/">「jQueryプラグインまとめ」に戻る

＜h1>TOKYO 2020
＜div id="map" style="width: 800px; height: 600px;">
＜script type="text/javascript">
  $(function() {
    $("#map").googleMap({
      zoom: 15, // Initial zoom level (optional)
      coords: [35.681382, 139.766084], // Map center (optional)
      type: "ROADMAP" // Map type (optional)
    });
  })
＜/script>
＜/body>
＜/html>

webkaru.net
https://webkaru.net/jquery-plugin/jquery-google-map/















Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。 | バシャログ。
地図カスタマイズのコツ
カスタマイズのコツとしましては、
デフォルトのgooglemapを見て、いる要素といらない要素、サイズ、ズームレベル、色など、Styled Map Wizard で作るより前にちゃんと決めておく。
Styled Map Wizard を開いて、文字やアイコンなど不要となりえる要素を先に全て非表示にしたものを元に、
HTML、CSS、JSの３つを、地図の座標を入れた状態で先に組み立てる。
Styled Map Wizard に戻り、必要なものだけ表示(変更)させ、その部分だけjsへコピペし、実際のプレビューはHTML上で行う。
というのがコツかと、作ってみて思った点です。
ちょっと面倒でも、このひと工夫でサイトの統一感がいっきに増す、Google map のデザイン変更。
皆さんも一度試してみてください。オリジナル感が出せるのでハマるとちょっと楽しいですよ！

バシャログ。
http://bashalog.c-brains.jp/13/02/12-104000.php

<----------api file="" nbsp="" p="">

スマホ内画像一括コピー[File Transfer x イメージ・ダウン]

スマホに溜まってきた画像をPCに一括コピーした。

使ったソフトは

　File Transfer(スマホアプリ) x イメージ・ダウン(PCソフト)。

まず「File Transfer」でスマホ内環境をftpミラーリング。

そのミラーリングページにPCのブラウザでアクセス。

表示されたftpページのアドレスをPCソフト「イメージ・ダウン」に入力。

表示された画像ファイルを一括ダウンロードした。

「いもづるダウンロード」,「Complete Getter」ではうまくいかなかった。

fdsfdgsg pc

環境：　

　スマホ：NEC Medias

  PC ：Windows 10 

　File Transfer(スマホアプリ,FreeWare) 

  イメージ・ダウン(PCソフト,FreeWare)

fgdhhh pc

  

UI,data-icon

data-icon
ボタンに対してdata-iconを付加することことでボタンにアイコンを付けることが可能です。
たとえば削除アイコンをつけたい場合は「data-icon=”delete”」を追加します。
 Delete
他にも、以下のような値が指定可能です。
 •data-icon=”arrow-l”
 •data-icon=”arrow-r”
 •data-icon=”arrow-u”
 •data-icon=”arrow-d”
 •data-icon=”delete”
 •data-icon=”plus”
 •data-icon=”minus”
 •data-icon=”check”
 •data-icon=”gear”
 •data-icon=”refresh”
 •data-icon=”forward”
 •data-icon=”back”
 •data-icon=”grid”
 •data-icon=”star”
 •data-icon=”alert”
 •data-icon=”info”
 •data-icon=”home”
 •data-icon=”search”
 •data-icon=”bars”
 •data-icon=”edit”
アイコンの表示位置はdata-iconpos属性で制御できます。

webcreativepark.net
http://www.webcreativepark.net/jquerymobile/buttons/data-icon/

[css] pointer-events:none; でリンクを非リンクに変える

[css] pointer-events:none; でリンクを非リンクに変える | 鹿児島のホームページ制作 株式会社 カナメン
2014.2.22
author : canamen, Inc.
「pointer-events:none;」はレスポンシブで重宝する可能性が高いです。
「pointer-events:none;」をレスポンシブで使用する方法や考え方はこちらから。合わせてご確認ください！
pointer_events_index
メニューリストを作成して、現在閲覧中のページのaタグをspanタグに変えリンク無効にするか、
aタグのままで表示してしまうか、悩みますよね。
「pointer-events:none;」を指定することで、タグのリンクを無効にしてる。
「pointer-events」の導入方法とメリット・デメリット
リンクを非表示にしたい項目の親要素にidを付けcssで装飾を変更する
メリット
    ・各ページのcssをbodyタグで制御できる。
デメリット
    ・cssのコードが増えてしまうので、読み込みに時間がかかる可能性がある。
各ページ毎に読み込むcssを分け装飾を変更する
メリット
    ・各ページの読み込み時間の短縮が可能。
デメリット
    ・cssを作成していくと共有と各ページで重複するソースが増えてしまう。
    ・作成に時間がかかります。
ポイント
時間があったり、綺麗なソースにしたい場合のみcssを分けた方がいいと思います。
それ以外は親要素にidを付けて使用しましょう。
ページ数が膨大になる場合、ページロード時間を短くする為に共通のcssと各ページ毎のcssの2種類をlinkさせるサイトが多いです。
「pointer-events」ソースコード例
//html
//css
#list a.about
{
pointer-events:none;/*リンクを非リンクに変える*/
cursor:default;/*マウスカーソルを矢印のまま変えない*/
text-decoration:none;/*下線を消す*/
color:#000000;/*非リンクの文字色と同じにする*/
}
補足
非リンクになっても、他のリンクと装飾は変わらないので、装飾を変えて一目で非リンクだと分かるようにした方がいいでしょう。
対応ブラウザが少ないので、過信は禁物です。

株式会社 カナメン
https://canamen.co.jp/css/css-pointer-eventsnone/

Font Awesome

Font Awesome
The iconic font and CSS toolkit
  Download
Version 4.7.0   ·    GitHub Project   ·
Old 3.2.1 Docs   ·   Created by Dave Gandy

Font Awesome
http://fontawesome.io






 One Font, 675 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.
 No JavaScript Required
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.
 Infinite Scalability
Scalable vector graphics means every icon looks awesome at any size.
 Free, as in Speech
Font Awesome is completely free for commercial use. Check out the license.
 CSS Control
Easily style icon color, size, shadow, and anything that's possible with CSS.
 Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
 Plays Well with Others
Originally designed for Bootstrap, Font Awesome works great with all frameworks.
 Desktop Friendly
To use on the desktop or for a complete set of vectors, check out the cheatsheet.
 Accessibility-minded
Font Awesome loves screen readers and helps make your icons accessible on the web.

Font Awesome
http://fontawesome.io









..........................
.fa-step-backward:before{content:"\f048"}
.fa-fast-backward:before{content:"\f049"}
.fa-backward:before{content:"\f04a"}
.fa-play:before{content:"\f04b"}
.fa-pause:before{content:"\f04c"}
.fa-stop:before{content:"\f04d"}
.fa-forward:before{content:"\f04e"}
.fa-fast-forward:before{content:"\f050"}
.fa-step-forward:before{content:"\f051"}
.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}
.fa-chevron-right:before{content:"\f054"}
.fa-plus-circle:before{content:"\f055"}
.fa-minus-circle:before{content:"\f056"}
.fa-times-circle:before{content:"\f057"}
..............................

fgdf pc

Google Fonts

Viewing 821 of 821 font families

Google Fonts
https://fonts.google.com/




//code
Abril+Fatface|Vidaloka
" rel="stylesheet">
Google Fonts
https://fonts.google.com/

css,table,,

[HTML-CSS] コピペですぐに使える「table」のコードサンプル - Webworker's Clip

Webworker's Clip
http://webworkersclip.com/2875/






html   
項目名   
内容がはいります。
項目名
内容がはいります。
項目名
内容がはいります。

Webworker's Clip
http://webworkersclip.com/2875/








css
table.type02 {
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    line-height: 1.5;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}
table.type02 th {
    width: 150px;
    padding: 10px;
    font-weight: bold;
    vertical-align: top;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    background: #eee;
}
table.type02 td {
    width: 350px;
    padding: 10px;
    vertical-align: top;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

Webworker's Clip
http://webworkersclip.com/2875/