日記 > HTML関連 カテゴリーリスト

2017 May 14

レスポンシブWEBサイト製作の際にお世話になっている、safari専用のハックコード。

@media screen and (-webkit-min-device-pixel-ratio:0) { ::i-block-chrome, .box_bg_photo { height: 600px; /*縦幅*/ } }

こんな感じの分ですね。もう有名なコードですが(・ω・`)

今現在のiPhone7、iPadpro環境の新しいSafariには効かなかったので、ぐぐーる先生に相談したところ新しいハックコードを紹介しているブログサイトさんをみつけたので、メモメモッ

それがこちら(´・ω・`)ノ

_::-webkit-full-page-media, _:future, :root .box_bg_photo { height: 600px; /*縦幅*/ }

ただ、古いSafariだとこのコード反応しなかったので...(;°ロ°)

二つ書かないといけなくなったのか..._| ̄|○


◎参考サイト様
SublimeなLife日記さま
http://sublimelife.hatenablog.com/entry/2017/02/06/102109

2017年5月14日 21:12に投稿されたエントリーページです。

2015 Sep 17

自分用のメモです( ゜д゜)ノ

スマフォディスプレイサイズ(480pxで設定)に対して指定箇所にCSSの当て方メモ

/*max-width: 480px*/ @media (max-width: 480px) {

.end {
margin: 0 !important;
padding: 0 !important;
}
}

2015年9月17日 15:17に投稿されたエントリーページです。

2012 Aug 16

メモメモ(´з`)y-〜

Android用「Flash Player」新規インストールが、2012年8月15日終了します(;°ロ°)

といっても...

Google PlayストアからFlash Playerをダウンロードできなくなるのは、
Flash Playerがプリセット(初期インストール)されていない機種のみ

なので、現在発売中のモノに関しては大丈夫なのではないのかなっと...(*´ω`*;;)


ちなみに「Google Playストア」からダウンロード出来なくなるのですが、以前のバージョンであればアドビサイトからダウンロード出来ますので、欲しい方下記アドレスより入手してみてくださいー。

◎アーカイブ版 Flash Player の提供について
http://helpx.adobe.com/jp/flash-player/kb/228683.html

ちなみにアーカイブ版の最新バージョンは「11.1.102.59」なのですけど、アーカイブされているのはちょっとだけ古いバージョンになっているみたいです(*´ω`*)

2012年8月16日 09:55に投稿されたエントリーページです。

2012 May 21

自分用のHTML製作メモ(・ω・)

文章が長くなったりした任意のコンテンツの折りたたみ、展開用のAjaxです。

(1)外部javascript『slidecontens.js』作成

テキストエディターで、下記を記入後「slidecontens.js」の名称でファイル保存

$(function() {
$('div.collapsePanelHeader').toggle(
function() {
$(this).next('div.content').show('slow');
$(this).children('div:last').removeClass('expand').addClass('close');
},
function() {
$(this).next('div.content').hide('slow');
$(this).children('div:last').removeClass('close').addClass('expand');
});
});

(2)「slidecontens.js」を任意のフォルダに設置・呼び出し(今回は jsフォルダ)

HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す
※jQuery本体は、グーグル先生からソースいただいています(*´ω`*)
ver.1.3とver.1.6で動作確認済み

<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6");</script>

<script src="ドメイン名/js/slidecontens.js" type="text/javascript"></script>
</head>

(3)折りたたみをする場所に呼び出しコードを貼りつけ

<div class="containerPanel">

<div class="collapsePanelHeader">

<div class="headerContent">
<a href="#">エーベルジュ</a>
</div>

<div class="arrow expand"></div>

<!-- class="collapsePanelHeader" --></div>

<div class="content" style="display: none">
DLC「反逆のヴァルキュリア」内の「艦上のヴァルキュリア」のエース撃破で入手できる剣で、2でユリアナが所持していた大剣。
2ではDLC「激戦!メルフェア市EX」のエース撃破報酬で鹵獲武器として入手可能で、最強の剣として剣甲猟兵共々猛威を振るった。
3での剣甲兵弱体化の煽りをうけてか、本作では能力的にいまいちパッとしない性能に抑えられている。
<!-- class="content" --></div>

<!-- class="containerPanel --></div>

※文章例は「戦場のヴァルキュリア3 攻略Wiki」より引用

上記例だと、表題「エーベンルジュ」が開閉ボタンになります。
aタグが無くても動作はするのですけど、合ったほうがボタンとして分かりやすいので追加アレンジしています(=ω=)
class名を変えるときは、javascriptの対応する記述も変更しましょう。

■参考サイト様
JavaScript + Ajax 実践サンプル集
http://jsajax.com/Articles/collapsiblepanel/1334

2012年5月21日 17:59に投稿されたエントリーページです。

2011 Sep 13

2011_0913_02.jpg

自分用にメモメモ...

クライアントの方で更新作業を行う前提でウェブサイトを作った際に、文字ベースでガリガリつくっているので文字情報の更新は教えやすいのですけど...どうしてもテーブル(表組み)だけは説明し難いんですよね(;´ρ`)

「dreamweaver」あればまあまあ作りやすいのですけど、普段HTMLソースなんか触らないよ!って人にソフトをオススメするのもあれなので...

っていうときに、グーグル先生に相談して見つけたのがこのウェブサービス(・ω・)ノ

エクセルなら使える人がほとんどなので、このサービスはマジすげーーー!です。
HTMLソースを知らない人には神サイトじゃないのかなと。

参考サイトさま:

◎「エクセルシートをHTMLテーブルに変換しちゃう君 」がすごく便利
http://web-marketing.zako.org/web-tools/henkankun-html-tables-from-excel.html

2011年9月13日 18:46に投稿されたエントリーページです。

2011 Sep 13

2011_0913_01.jpg

ツイッターで教えてもらったと「HTML5実力テスト」(・ω・)ノ
一応現在の知識チェックをする為に挑戦してみるものの..._| ̄|○

いやー、ひどかったですヽ(゜ー゜;)ノ ホント大泣き

問題の範囲が、新しいタグの意味・文章構造だけでなく、 iOSのこととかよく分からん問題もちょこちょこあったので、なかなか難しいような気もしました。

回答の解説がすごく分かりやすいので、興味のあるかたは一度は試してみては如何でしょうか?(=ω=)

CSS3も含めて、本を買わないとこれはダメだな...

2011年9月13日 18:20に投稿されたエントリーページです。

2011 Aug 17

それぞれのカテゴリーページに、そのカテゴリーで使われてる「タグ」のナビを追加してみました(・ω・)

2011_0817_01.jpg

いやー前から思っていたのですけど、ウチのブログはカテゴリーの数を少なくしてて、ほとんどの記事が「雑記」にごっちゃになってるものだから、一度TOPページから外れたり、内容の旬が過ぎるとお蔵入りになってしまうので、探すのがメンドイなーとは思ってました(´・ω・`;)...自覚あり

まーそんな昔のページを探すときに、全文検索でも良いんですけど...
もうちょっとわかりやすい物をナビを設置しようと思って、
あれこれ試していて、今回の仕様を作成(・ω・)

製作方法は簡単「TagSupplementals」プラグインをMTに追加して、以下の文章をカテゴリーアーカイブテンプレートに追加。

<div id="categoryTagCloud" class="clearfix">
<h3>「<$MTCategoryLabel$>」カテゴリー内タグリスト</h3>
<ul>
<MTArchiveTags>
<li><a href="<$MTTagSearchLink$>" rel="TAG"><$MTTagName$></a></li>
</MTArchiveTags>
</ul>
</div>

簡単簡単〜(´ー`)〜♪

カテゴリーに関しては、1つ2つの記事しかないのに新しくカテゴリーを追加するとかしたくなかった!っていうのがあるんですけどね
とりあえず、記事ページのアドレスが変わってしまうけどカテゴリーの整理はしようと思ってます...(ノД`)

アイコン素材は、「猫手製アイコン屋」様からお借りしました(・ω・)ノ
いつもお世話になっていますー

2011年8月17日 20:32に投稿されたエントリーページです。

2011 Aug 12

テスト領域で時間の合間にチョコチョコ進めていましてー
先程「XHTML」コーディングから『HTML5』コーディング作業の変更作業を終わりましたのでご報告します(・ω・)ノふー疲れた

といっても、HTML5の構造を完全にマスターしている訳ではないので、またちょっとづつ修正修正にはなりそうですけどねε=(‾Д‾;)

アウトラインの確認にWebツール「HTML 5 Outliner」を使わせていただきました
これ、構造確認にすごく良いものでした(・ω・)b

一応Macでのブラウザ環境(Firefox,safari)と、win IE8では確認済み。
ただアンドロイドの初期ブラウザだと、sectionタグの認識が甘いみたいで...
デザインが破綻してしてしまってたので、sectionタグを外してちょっと様子みています(・ω・)

さて、HTML5に変換もおわりましたのでー
今度は本格的に、ここの「スマートフォンサイト」の作成を予定中(=ω=)
1から専用ページを用意するとアドレスが変わってしまうので、
現在のページのCSSをいじって表現する方法を模索中デスね

まだまだ勉強の日々はつづきそうナリねー(・ω・)

今回の参考サイト様:

◎HTML5で組んでみた | CSS-EBLOG
http://css-eblog.com/note/html5-test.html

◎HTML5とは何かを簡単にまとめてみた (Yahoo! JAPAN Tech Blog)
http://techblog.yahoo.co.jp/cat207/web_1/html5/

◎HTML5 におけるアウトラインに関して簡単解説 | WWW WATCH
http://hyper-text.org/archives/2011/07/html5_outline.shtml

◎HTML 5 Outliner
http://gsnedders.html5.org/outliner/

2011年8月12日 20:50に投稿されたエントリーページです。

2011 Aug 12

いまさらですが...

グーグルサービスのひとつ『Google AJAX API』を利用することで、「jQuery」や「Prototype」等のAjaxの基本的プログラムをグーグルからダウンロードできちゃうっていう

なんて便利な方法があったんだーー(ノ ゜Д゜)ノ ==== ┻━━┻

...あったんだ?

ええ、過去型です(笑)

参考サイトさんの紹介ページのタイムスタンプをみたら、
2008年とか書いてましたよ!(;°ロ°)ノーマークカヨ

記述方法はこちら!

■jQuery

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.6.2");</script>

■Prototype

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("prototype", "1.7.0.0");</script>

google.load("jquery", "1.6.2");の部分を
google.load("jquery", "1");と書く事で、
jQueryのバージョン1の最新版が常に利用できるみたいですヽ(´ー`)ノ

是非活用してくださいな(・ω・)ノ

本家サイト:
◎Google Libraries API
http://code.google.com/intl/ja-JP/apis/libraries/

今回の参考サイト様:
◎Google AJAX APIを使ってjQueryやPrototypeを読み込む | CSS Lecture
http://www.css-lecture.com/log/web/007.html

2011年8月12日 20:24に投稿されたエントリーページです。

2011 Jun 22

よく会社のウェブサイトなんかにアクセスすると、イメージ画像のスライドショーをよく見ますよねー(・ω・)

仕事の方でもよくFLASHで表現していたのですけど、準備に時間がかかってしまうので、ちょっと見直してみようーってことで、Ajaxで良いものないかな〜とグーグル先生に相談してみたらなかなか良さそうなJQueryプラグインを発見したので、自分のメモがてらにカキカキ。

JQueryプラグインはこちらを利用させていただきました(・ω・)ノ


(1)『jquery.cross-slide.min.js』ダウンロード

上記CrossSlideサイトのページ上部の「Download minified」部分より『jquery.cross-slide.min.js』をダウンロードします。

(2)『jquery.cross-slide.min.js』をの任意のフォルダに設置・呼び出し(今回は、jsフォルダ)

HTMLファイル側のヘッダー箇所に以下の構文を入力し外部ファイルとして読み出す
※jQueryのダウンロードはこちらから

<head>
<script type="text/JavaScript" src="ドメイン名/js/jquery-1.6.min.js"></script>
<script src="ドメイン名/js/jquery.cross-slide.min.js" type="text/javascript"></script>
</head>

(3)スライドショーを表示する場所に呼び出しコードを貼りつけ

<script type="text/javascript">
$(function() {
$('#mainVisual').crossSlide({
sleep: 4, //in sec
fade: 1 //in sec
},
[
{ src: 'mainImage_01.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_02.jpg', href: 'http://mtw.cocotte.jp/' }
]);
});
</script>

<div id="mainVisual">
<p>Now Loading...</p>
</div>

<div id="mainVisual">の場所に画像が表示されますので、CSSで横幅と高さの指定をしましょう。
「mainVisual」は任意の名前に変更可能です(・ω・)

それとjavascriptの表記内をちょっと補足しますー

【sleep】次の画像に切り替わるまでの時間
【fade】フェードさせる時間

になります。

画像ファイルを増やすときは、

{ src: 'mainImage_01.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_02.jpg', href: 'http://mtw.cocotte.jp/' },
{ src: 'mainImage_03.jpg', href: 'http://mtw.cocotte.jp/' }

こんな具合にコードを増やすことで可能。つなぎの『,』を忘れずに!

ハイパーリンクを消したいときは、

{ src: 'mainImage_01.jpg' },

この状態にしてもらえればハイパーリンクなしになります(・ω・)ノ

あと、このJQueryプラグインは、クロスフェードや拡大縮小みたいな事もできます
その辺りコードは、本家サイトを参考にしてください

※2011.0902追記

画像が表示される場所に表示される画像サイズ「width」「height」の指定をCSSで表記する必要があるようです。
それと、ちゃんと「jquery.cross-slide.min.js」は読み込んでるのに画像表示されない!っていうときは他の javascriptが干渉してる可能性があるみたいですので、検証して原因をつきとめてみてください。

■今回の参考サイト様
CrossSlide | 設置サンプル

2011年6月22日 19:55に投稿されたエントリーページです。

1  2  3  4  5

- TOPPAGE -

Site Search

Tag Cloud


2002.6.6 count start