android用browserランキング

 android用ブラウザーを勝手にランキングしました。道草blogにアクセスするあるいはブログを書く時の使いやすさを自分なりに評価しました。

 対象ブラウザーは次の5種類になります。

 

viaブラウザー

yahooブラウザー

samsung internet browser

google chrome

microsoft edge

 

f:id:ogoesamurai:20181007224732p:plain

 

《スピード》

1位 yahooブラウザー

2位 viaブラウザー

3位 samsung internet browser

4位 google chrome

5位 microsoft edge

 

《CSSの対応力》

1位 viaブラウザー

2位 yahooブラウザー

3位 samsung internet browser

4位 google chrome

5位 microsoft edge

 

注1) CSSとはHTMLで作成された文書のデザインについて指定を行う際に使用される言語です。画像の表示位置や背景や文字の色・大きさなどの指定に使用されます。

スマホで記事をご覧になった時に最後の方でシェアボタンが出ると思いますが、次のような記述を入力してます。

<style type="text/css">
/* シェアボタン */
.share-area {
margin: 20px 0;
}
.share-button a {
position: relative;
overflow: hidden;
display: inline-block;
width: 52px;
height: 52px;
padding: 4px 0;
line-height: 18px;
font-size: 14px;
font-weight: bold;
text-align: center;
color: #fff;
text-decoration: none;
border-radius: 4px;
vertical-align: bottom;
transition: all 0.4s;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.share-button a::before,
.share-button a::after {
position: absolute;
top: -75px;
left: -40px;
background: #fff;
content: "";
}
.share-button a::before {
width: 100px;
height: 100px;
border-radius: 50px;
opacity: 0.2;
z-index: 2;
}
.share-button a::after {
width: 86px;
height: 86px;
border-radius: 45px;
z-index: 3;
opacity: 0.1;
}
.share-button a:hover {
opacity: 0.6;
transition: all 0.4s;
}
.share-area i,
.share-area .lg {
font-size: 24px;
}
.share-button .hatena-bookmark-button .lg {
font-size: 32px;
}
.share-button .hatena-bookmark-button {
padding-top: 1px;
padding-bottom: 6px;
}
.share-button .twitter-button {
padding-top: 5px;
}
.share-button .facebook-button .lg {
font-size: 27px;
margin-top: -1px;
}
.share-button .twitter-button .lg {
font-size: 27px;
}
.share-area .small-text {
font-size: 11px;
}
.share-area .fa-spin {
font-size: 8px;
color: #fff;
}
.share-button .hatena-bookmark-button {
background: #00A4DE;
border: 2px solid #00A4DE;
}
.share-button .facebook-button {
background: #405BA7;
border: 2px solid #405BA7;
}
.share-button .twitter-button {
background: #55ACEE;
border: 2px solid #55ACEE;
}
.share-button .LINE-button {
background: #5ae628;
border: 2px solid #5ae628;
}
.share-button .pocket-button {
background: #EE4256;
border: 2px solid #EE4256;
}
</style>

注2)viaブラウザーとyahooブラウザーは、アクセスした時に下部のメニュー画面項目すべてが完全に機能します。samsung internet browser、google chrome、microsoft edgeはアクセスすると記事一覧が出ますが、どれか一つの記事にアクセスしてからでないと、「人気記事」、「カテゴリ」、「top」が機能しません。

 

《使いやすさとレイアウト》

1位 viaブラウザー

2位 samsung internet browser

3位 google chrome

4位 microsoft edge

5位 yahooブラウザー

 

※viaブラウザーは軽くて速いのでデフォルトで使っておりますが、cssの対応力が上がればsamsung internet browserが一押しです。見た目も使いやすさもずば抜けております。google chromeとmicrosoft edgeはスマホ用に参入してまだ日が浅いのでこれからでしょう。yahooブラウザーは賑やかなのが合いません。