\ えぬすぴブログ

タグ検索: HTML+CSS

 #  [スポンサー広告

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 #1725  [PC

Vivaldi は“友人たちのための新しいブラウザ”

このごろは「Vivaldi」をよく使っている。 4月にバージョン 1.0 になったばかりの新しいブラウザだ(現在1.2。安定版は1.1)。

Opera の元CEOだったテッツナー氏(ヨン・スティーブンソン・フォン・テッツナー - Wikipedia)の開発ということで注目して、プレビュー版から試していた。

新しい Opera は、Google Chrome(以下 Chrome)とほぼ同じになって特徴がなくなってしまってからは関心がなくなって、普通に Firefox をメインに使っていた。 これからは、Opera の流れを受け継ぐ Vivaldi に切り替えることになりそうだ(と言うか、もうなっている)。

ずっと前のことだけれど、テッツナー氏が「Opera 8 が100万ダウンロードを達成したら大西洋を泳いで横断する?!」というバカげた公約をしたという記事を見てから、おもしろい人だと思っていた(笑)。

途中、出身地でもあるアイスランドで紅茶を飲んで一休みする……みたいな計画もあったような(うろ覚え)。 実際には、泳ぎだしてすぐにドクターストップがかかって中止になったように記憶している。

Opera の公式のサイトに載っていて URLが http://www.opera.com/swim/ だったので覚えやすかった(笑)。 だいぶ前になくなっていて、もう見られないのが残念。

「HTML5 Test」では、自分でそれぞれのブラウザを選んで HTML5 の対応度を比較(compare)もできる。

ブラウザごとの最新バージョンのスコアは「Chrome 44」526,「Opera 31」525,「Firefox 40」467,「Edge 13」453,「IE 11」336。

 → HTML5test - How well does your browser support HTML5?

Vivaldi はまだ含まれていなかった。 前にボクがチェックした時は同じレンダリングエンジン(Blink)を使っている「Chrome」や「Opera」と同じ高スコアだった。

Vivaldi では、前の Opera 12 にあったような便利な機能も復活している。 そして、Chrome 用の拡張機能もそのまま使えるみたいだ。

設定(左下の方にアイコン)は機能ごとに整理されていてとてもわかりやすい。 マウスジェスチャーの設定もグラフィカルになってやりやすかった。

それから、特にタブ関係がとても便利になった!  設定できる項目が多くて、新しいタブの位置や閉じた時に戻る位置や巡回する順番などが細かく設定できる。

そのサイトの Favicon で、タブの色がそれぞれのイメージカラーになるのがおもしろくてわかりやすい。 このブログの場合は赤みがかったオレンジ色で、Vivaldi サイトとほとんど同じ色になったのがうれしい♪ 

タブバーの位置はウィンドウの上下左右に簡単に変えられる。 「タブの休止」はメモリの節約にもなる。 タブ用の「ごみ箱」(右上の方にアイコン)から閉じたタブを開けるので、間違ってしまった後の復活がやりやすい。

それから、Opera にもあった複数のタブを1ヶ所にまとめる「タブスタック」機能があるのがうれしい。 表示スペースを節約するだけではなく、複数のタブを並べて表示することもできるようになる(右下の方にアイコン)。

例えば、左側にブログ記事、右側に管理画面という風に開いておくなどしておくと、手間が少なく効率が良くなる。

キーボードの F2 のクイックメニューで一覧を出せる。

マスコットキャラクターもいて、調べてみると「Tony」という名前でアイスランドの火山から生まれた溶岩ということだった。 赤い「毛玉」みたいなものかと思ったら違った(笑)。

Opera の時みたいな擬人化キャラ(おぺらたん - Wikipedia)も欲しくなる。

「Vivaldi」の名前の由来は作曲家のヴィヴァルディ(アントニオ・ヴィヴァルディ - Wikipedia)。 歌劇の方のオペラ(Opera)の作曲家としても活動していたということで、何かややこしい?(笑)。

特に有名な「四季」は、ボクも大好きだ。 「春」は華やかな印象で、他にも「みんなのうた」の「白い道」を聞いてからは「冬」も好きになった。

Vivaldi も「四季」のように一年中お世話になるブラウザになりそう。

Vivaldi公式サイトの“友人たちのための新しいブラウザ”という言葉が親しみやすいイメージで良いと思った。 “パワフル、パーソナル”という言葉も心強い。 もちろん、これからも応援するよ♪ 

スポンサーサイト

 #1715  [PC

HTML5 にブラウザがどのくらい対応しているかをチェック

新しい要素をほとんど使わなくても HTML5 にしていくのは思ったよりも難しくなさそう。

ブラウザがどのくらい対応しているのか。 それをテストして、結果をスコア表示するサイトがあるということで実際に手持ち(?)のブラウザで行って調べてみた。

 → HTML5test

環境は Windows 10(64ビット)でブラウザも64ビット版(32ビット版でも結果は同じ?)。

スコアは次の通り。 満点は555点。

555
・
521  Vivaldi 1.2.470.11 (Developer Build) 
521  Google Chrome 50.0.2661.94
520  Opera 37.0.2178.32
・
・
478  Firefox 46.0.1
・
453  Microsoft Edge 25.10586
・
・
・
・
343  Internet Explorer 11.212.10586
338  Opera 12.18
・

「Opera 12.18」は3年前に開発終了していて今回はゲスト参加扱いだったのだけれど。 最新版「IE 11」がほぼ同じスコアっていうのは……。

10年ぐらい前、他のブラウザでは問題がなかったのになぜか「IE6」だけはダメということが多かった。 それでけっこう悩まされた経験が、また蘇った(汗)。

もうだいぶ経っているのに、まだ表示の違いに苦労させられることになるのは嫌だ。 ……と言うか、もうそこまでやる気力が出ない。

不幸中の幸いと言うか「IE11」より古いバージョン(IE8,IE9,IE10)は今年1月にサポート期限が切れているということなので、気にしなくていいのかも知れない。

それから、「IE」だけでなく Windows 10 の目玉になっているはずの新ブラウザ「Edge」が Firefox を超えていないし。 Microsoftさんには「もう少し頑張ってみてね」と言いたくなる。

HTMLレンダリングエンジン別では、共に「Blink」を使っている「Vivaldi」「Google Chrome」「Opera」 が高スコア。

 → HTMLレンダリングエンジン - Wikipedia

  • BLINK : Vivaldi,Google Chrome,Opera
  • Gecko : Firefox
  • EdgeHTML : Microsoft Edge
  • Trident : Internet Explorer
  • Presto : Opera (7~12)

HTML5test にはこれまでのテスト結果の一覧もあった。

 → HTML5test - How well does your browser support HTML5?

ボクは「Vivaldi」が好き♪  今のところ一覧に見当たらないけれど、早く仲間に入れて欲しいな。

 #1713  [PC

XHTML から HTML5 に手直し中

今更感だけれど「HTML5 にしたい!」という気持ちが改めて強くなった。 それで手始めに「えぬすぴ」の方を手直ししてみた。

XHTML と HTML5 は、もう初めの部分からけっこう違う。

XHTML だと <title> にたどり着くだけでも次のように長くなるし、間違えないようにするには毎回コピペした方がいいんじゃないかというレベル。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>えぬすぴ</title>
・
・

それが、HTML5 だと次のようにとてもシンプルに!  これだけでも魅力的で「こっちにしたい」という気持ちになってたよ。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>えぬすぴ</title>
・
・

本当はもっと色々記述しておいた方が良いこともあるのだけれど、一例として。

ただ、「section」「article」「nav」などの新しい要素とその意味合いを理解するのが難しい。 あと、ブロックレベル要素とインライン要素の分類もなくなったとかで、それにも慣れないといけない。

もう以前のようには脳がついていけないので、少しずつ。

「えぬすぴ」の方は、日記以外はみんな HTML5 にしてみた。 こちらのブログの方も、いつかは HTML5 にしたい。

記事の本文でよく使うのは <p><pre><ul><li>くらいなので、全然大丈夫だと思う。 写真を載せるときに使う <img> など /> で閉じているのも、多分大丈夫……? 

性格のせいなのか、どうしてもより厳密な strict にこだわってしまう。 文法の正確さが完全でなくても読む人にとってはあまり意識されないことだし、書いている内容が大切だからそっちを更新していかないと本末転倒になってしまう。

文章を書き直すのがめんどうで放置している状況が長く続いてしまっているのを何とか……。 とりあえず書いていこう。

▼ HTML5 関連サイト

 #1231  [PC

CSSで描かれたキュゥべえ

キャラクターの可愛い外見とは違って、お話の方はかなりシリアスな雰囲気にもなっている「魔法少女まどか☆マギカ」。 重くて大きなテーマも含んでいる感じ。

「僕と契約して、魔法少女になってほしいんだ」
  /人◕ ‿‿ ◕人\

こんなに可愛いマスコットみたいなキュゥべえの正体も、実は…という感じなので…。

 → CHARACTER|魔法少女まどか☆マギカ

そのキュゥべえを CSS を使って描いたというニュースがあった。

早速見に行くと、本当に画像みたいに見えるキュゥべえだった!

CSS(スタイルシート)はウェブページの見た目を指定するもの。 本来の使われ方と全然違っていて、手間や時間もかかった職人技で、とてもすごい!!

例えて言うと、定規とコンパスだけを使ってイラストを描くのと同じくらいの難しさかも。

標準的な Internet Explorer 8 以下では CSS3 に対応していなくて、丸い線が描けないのでカクカクになっちゃうけれど(苦笑)。

そのほかの主なブラウザではきちんと表示されるので、見てみたい人は Firefox, Opera, Google Chrome, Safari などから好きなのを選んでインストールして使ってみるといいかも(笑)。 とりあえず Firefox がおすすめ。 ボクは Opera が好きだけれど(笑)。

ボクも、枠線の角を丸くしたり文字に影を付けたりするのに CSS3 を使っているので、このページの見た目も変わってくるはず(笑)。

 #866  [PC

XP では利用できない IE9

ブラウザのことで IE9 (Internet Explorer 9) についての記事も調べました。

ついでに、Gazelle (ウェブブラウザ) - Wikipedia や動物の ガゼル属 - Wikipedia についてもです(笑)。

IE9 では新技術が使われていて Windows 7 や Vista にしかないグラフィックス機能(Direct2D)に依存しているということで、XP では利用できないそうです。

これまでバージョンアップがとてもゆっくりで、ほかのブラウザが進化する中でウェブ標準化の流れからも取り残されていましたけれども、ここにきて急にスピードアップしている感じがします。 できるのなら、もっと早くから本気で取り組んで欲しかったと思います。 サイト作りをしていて、ほかのブラウザではOKなのに IE6 だけ表示が上手くいかなくて苦労した思い出がありますので、今でも好きになれないです(苦笑)。

今の IE8 がどうなっていくのか分かりませんが、より新しくなっていく方のが安全なようにも思いますので、Windows XP のままで続ける場合にはほかのブラウザを使うようにするのも良いと思います。

ボクは Opera が好きなのでおすすめもしたいです(笑)。 とっつきにくいとか、対応していないサイト(ゲーム・コミュニティ系など)がけっこう多いとか、色々ありますけれども(苦笑)。 速度と操作性とカスタマイズ性などで優れていると思います。

10.5 が発表されてから色々ありましたが、10.51 になった今はかなり安定しているようです。 長い間続いていたフォント設定の問題も改善されて、サイトによって見づらいフォントになることもなくなったみたいです。

ほかには、対応しているサイトも多くてたくさんの種類の追加機能(アドオン)がある Firefox も便利に使えて良いと思います。

FC2ブログ > ジャンル:コンピュータ > テーマ:Internet Explorer全般

 #852  [PC

CSS3 でデザイン(Opera 10.50 記念)

サイトのデザインを一新して雰囲気を変えました。 CSS3 の中で、text-shadow(影付きの文字)box-shadow(影付きのボックス)border-radius(角が丸い枠線)の3つを使っているだけですが(苦笑)。 border-image(枠線を画像にする)は使っていないですが、ゲームに使われるようなメッセージボックスを作るのに便利そうです。

以前に border-radius を使いました(Opera 10.50 beta / 角が丸い枠線 - #824)。 その続きで、今日は box-shadow も使いました。 Opera がバージョン 10.50 になって対応するようになった記念です♪ 

見やすくなって、立体的でやわらかい感じにもできると思います。 ただ、使う前よりも動作が重くなるのにも、今気が付きました(汗)。 ページをスクロールさせると、表示が少し引っかかるようにもなります。

でも、特に“地球上で最速のブラウザ”(!)でもある Opera 10.50 ではほとんど影響が出ない感じです(笑)。

FC2ブログ > ジャンル:コンピュータ > テーマ:Opera

 #824  [PC

Opera 10.50 beta / 角が丸い枠線

去年、Opera Software からのクリスマスプレゼントだった「Opera 10.5 pre-alpha」が気に入って、ニュースのネットサーフィンをする時などによく使ってきた。 もしもエラーが出て落ちたりしても大丈夫なので(苦笑)。

 → Choose Opera 日本支部 - Opera 10.5 pre-alpha をリリースしました。

ブラウザの「エンジン」が変わったということもあって、速くなっていて快適だった。 Carakan (チャラカン) という名前も良い感じ♪(笑)。

バージョンアップされて、今では「Opera 10.50 beta」とベータ版まできた。 正式版まであと一息。 特に問題なく使えている。

 → Opera ブラウザ | 高速で安全 | 新しいインターネットブラウザを無料でダウンロード

地球上で最速のブラウザ”って、何かかっこいい!  ちょっと大げさっぽいけれど(笑)。

今までの 10.10 はそのままにしておいて、別にインストールして使っている。 ページの表示が速いのはもちろん、ページのスクロールがスムーズで速い!というのがよく分かる。 今までと同じ感覚でホイールを回すと、すごい勢いで飛んで行っちゃうくらい(笑)。

たいていの場合、ページが表示されたあとはゆっくり読むことになるので、普通に速かったら大丈夫のような気もするんだけれど(笑)。

あと、使いやすく便利になったのは、「アドレスフィールド検索」と「ページ内検索」。 今まで少し不便だったけれど、改良されて良かった♪ 

ただ、Opera 10 からの新機能などは、ほとんど使わないまま(苦笑)。 「Opera Turbo」や「Opera Unite」、それから「Opera Link」や「Opera Widget」も、ちょっと試したあとは使っていない。 ブラウザ以外でよく使うのは、色々なブログの RSS を読むための「メール」機能くらい。 ブラウザとして便利に使えるようにカスタマイズするだけでも、十分おもしろいし♪(笑)。

FC2ブログ > ジャンル:コンピュータ > テーマ:Opera

 #757  [お知らせ

カーソルを乗せた時に文字をずらします

リンクの上にカーソルを乗せたとき、その文字(画像)がずれて表示されるようにしました。

どのようになるかと言うと、‘ここに書かれている文字’ のようにずれる感じです。 1ピクセルなので見た目にはとても分かりづらいと思います(汗)。

動きに慣れないという方もきっといらっしゃると思いますが、ボク自身はより分かりやすくなった…と言うか、おもしろい感じなので試してみることにしました(笑)。

07 ← 2017年08月 → 09
--12345
6789101112
13141516171819
20212223242526
2728293031--



 Google サイト内検索

▼タグ(抜粋)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。