CSS

WordPressやWEBサイトはCSSの書き方でも高速化できる?!

シェアして頂けると嬉しいです!!

はい。
今回は、WEBサイトを飾るCSSのお話。

少し前にも書いたように、現在はブログの表示時間を少しでも短縮しようと、時間があれば新しいテーマ作りの作業を行っています。

それと同時進行で、カテゴリーやタグの整理、古くなった不要記事の削除、過去記事の一部書き換えなんかも行っているので、ブログの表示がおかしくなる可能性がありますが、ご了承下さいませ。

使用するプラグインも減らそうと、今のところIE7にも対応出来るような仕様でテーマの作製を進めていますが、パソコン用のテーマは8割方できたと思っていました。

が………。

昨日の深夜、何気にCSS関連の検索をかけていると、愕然とする事案を発見してしまい、作成中のテーマも手直しが必要になりそうです。

ご存知の方には「今更何を言ってるのか」と思われるかもしれませんし、「赤信号で止まれ」と同じくらい常識的な事かもしれませんが、自分としては新たな発見だったので、一応記事にしておきます。

CSSとは何か

ブログを運営されている方も多いと思いますが、それらのサイトはHTMLとCSSの二つを使用する事によって、パソコンやスマホの画面にブログとして表示されています。

簡単に例えると、HTMLは家の骨格、CSSはクロスやフローリングといった装飾です。要は、HTMLで「ここに○というアイテムを表示しなさいよ~」と指示を出し、CSSで○というアイテムを装飾しています。

実際には、どんな感じかと言うと…。

HTML側で
<h1>釣りのブログ</h1>
と書くと 釣りのブログ な感じになります。
※本来なら文字も大きくなります。

「h1」というタグを使って、大見出しを表示させる指示を出します。でも、このままだと味気ないので、文字を少し装飾したい。そう思った時にCSSの出番です。今度はCSS側で…。

h1 {color: #C03;}

と指定してあげると 釣りのブログ と文字が赤色に変わります。

皆様がブログを書く際、投稿画面から文字の大きさや色なんかを変えたりする事があると思いますが、表示する工程でこのような作業が行われています。これがHTMLとCSSです。アクセス数を増やしたい場合等は、この辺りから弄るといいかもしれませんね。

CSSは右から読み込まれる

今回知った事案がこれです。CSSは右から読み込まれるんですね。今までは書いている順番通り、左から読み込まれているのだと思ってました。

HTML側の記述もスッキリするので、読み込み速度の向上に繋がるだろうと子孫セレクタをガシガシ使っていましたが…。どうやら、そこがマズいようです。例えば、少し強引なんですが…。

<div class=”ja_do”><p><a>スーサン</a></p></div>
.ja_do p a{color: #C03;}

なんていう感じで書いたとします。今までは、クラス「ja_do」を探して内包されている「p」を探す。更に「.ja_do p」内包されている「a」を探す。といった感じで左側から解釈しているのだと思っていました。

でも、これが全くの逆との事。

「a」を読み込んでから親要素となっている「p」を探す、さらにそこからクラス「ja_do」を探す。といった感じで、右側から処理が進むようです。ガビ~ン!!

CSS高速化の解決策・まとめ

検索結果を見た際、修正も大変だしCSSの読み込み速度まで気にしなくてもいいか。なんて思ったりもしましたが、気分的にスッキリしないので、これから地味に修正作業を始めます。

一応の解決策としては、
<div><p><a class=”ja_do”>スーサン</a></p></div>
.ja_do {color: #C03;}

子孫セレクタ等を使わず、直接クラスを指定する。HTML側の記述が煩雑にはなりますが、こんな感じで直接指定する方が良さそうな感じです。また、全体を指定できる「*」も処理が遅くなるとの事なので、極力使わない方がいいとの事。

まぁ、そうなってくると、CSSリセットなんかも使わない方がいいのかも…。

とにもかくにも、ほぼ終わっているスタイルシートの書き直しにウンザリしそうです。

ガジェットに関するお知らせ
現在、デジカメや家電に関する内容は、新ブログ『まころぐ』にて更新中です。当ブログよりも、丁寧に解説するよう心掛けていますので、宜しければチェックしてみて下さい!!

最後まで読んで頂き、ありがとうございます。今回の投稿と同じカテゴリーにある、次の記事は「」、前の記事は 「」となっております。

また、このカテゴリーが含まれている 「ライフ&ホビー」ジャンルには 「472件」 の投稿があります。カテゴリー内での人気記事や、ブログの最新記事リストも記載しておきますので、宜しければ合わせてご覧くださいませ。

新ブログについて サーバーの安定性を求め、2017年4月に「まころぐ」というブログを新設致しました。現在は、新ブログにて更新・運営を行っておりますので、宜しければ当ブログ「オーシャントリッパーズ」と合わせて御覧下さいませ。「まころぐ」の新着投稿は下記の通りです。 まころぐ
シェアして頂けると嬉しいです!!

Comment

お気軽にコメント下さい
  1. comment-user
    たかすぃー
    2014年9月16日 PM 9:45

    全然関係のないコメントですいません。 m(_ _)m
    どうしてもMacoさんには聞いてみたかったので許してください。
    14ステラの事なんですが、最近無性に欲しくなってます。 まだ11ツインパワーを買って半年程度なんですが、色んな方々のブログを拝見していると無性に欲しくなってしまいました。欲しかったら勝手に判断して買えよ!と言う意見はごもっともなんですがどうしても意見を伺いたいのです。
    リールのインプレ等のブログ形式でも良いので教えてください。もちろん急ぎませんので時間のある時で結構です。
    よろしくお願いします。m(_ _)m

    • comment-user
      MACO
      2014年9月16日 PM 10:23

      どうもです!!
      エライ気になってるみたいですね~!!

      14ステラのインプレも書きたいと思っているんですが、まだインプレ書ける程使って無いので、なかなかタイミングが…(汗

      詳しい記事は、もうしばらく使ってから書きますので、とりあえずコメントでの返信にて。14ステラを検討されているとの事ですが、実機を触られましたか?

      個人の好みの感覚は、実際に釣りに出掛けて使ってみて、魚を掛けてみないことには何とも言えませんが、巻き心地だけは店頭でも試せるので、店員さんに14ステラを検討している事を告げ、候補に挙がってるステラの番手を、巻かせてもらうといいかもしれませんね。

      基本性能としては申し分無いので、個人的には接する時間が長くなる巻き心地の方が大事かと。巻いた感じをツインパワーと比較して、惚れ込んでしまったら思い切って購入しても良いのでは??なんて思ったりもします。

      詳しい記事は時間が出来たら書きますが、とりあえずは現物を体感してみて、比較要素を増やしてみてはいかがでしょうか??

  2. comment-user
    たかすぃー
    2014年9月16日 PM 11:24

    早速のレスありがとうございます。
    えらい気になってしまってるんです!
    本当は触りたいんですが(ちょっと変態っぽいですが…)触ると承諾も得ずに買っちゃうのは分かってるのでショーケース眺める程度でとどめてるんです(^_^;)
    3000番台で考えてるんですけど4種類位あるし妄想ばっかりが膨らんでます。 おそらくC3000かなと思ってますが他のもありなんじゃないの?なんて考えるし。
    まあ、シーバス1年生のくせにステラなんて生意気な話なんですけどね。 でも来月で2年生なので進級祝い? あと30匹位で100匹なのでお祝い? 完全にアホになってます… 意味わからんコメントですいませんm(_ _)m 発情期みたいなもんです…

    • comment-user
      MACO
      2014年9月17日 AM 2:51

      あ!
      多分、巻いたら買っちゃいますよ!!(笑)

      シーバス1年生でも、ステラ全然いいんじゃないですかね~。根本的に、釣りは趣味なんですし、自分が使いたい・使ってみたいと思った道具で、釣りをしている大切な時間を気分良く遊べれば、それが一番の正解だと思います。

      でも、承諾は頂いてからにして下さいね!(笑)

      番手としては3000番台でOKだと思いますが、ハイギアまたはエキストラハイギアは候補に挙がってないんですか??

      それにしても、間もなく100匹って!凄いですね~!!
      僕より全然釣ってはりますやん(^_^;)

      ステラは逃げないんで、じっくりと考えて比較検討してみてください!!(^^ゞ

  3. comment-user
    たかすぃー
    2014年9月17日 PM 10:55

    またまた関係ないコメントですいません
    m(_ _)m

    今日は60分一本勝負に行ってきました。
    小潮、時間制限の中で一本あげればステラを迷わず買う!と言う勝負です。
    案の定べた凪でダメダメな雰囲気でしたが開始数投で手応えがありゴンと合わせると全く生命感が無かったんですが、急にドラグがなり走り出しました。

    先日の悪夢が蘇りましたがファイトしているとガッチリ掛かってる感じでファイトを楽しめました。ネットを持って行くと釣れないジンクスがあるので、足下まで寄せてリーダーを握って引っこ抜きました。65センチのナイスなシーバス!これでステラ決定です( ̄+ー ̄)
    まあ、釣れなくても来年まで我慢というどうでもいい勝負でしたが…
    そのあとも62、58、1バラしで圧勝でした。
    色々ご相談頂きありがとうございました。
    まずはご報告まで。

    • comment-user
      MACO
      2014年9月18日 AM 10:49

      なんだか、面白い企画を実行されたようで…。
      それにしても、キッチリと釣られますね~(^_^;)

      さてさて。釣りの道具に関わらず、趣味で使うものは欲しいと思ったら入手する方がいいと思いますよ。例えば、今回はステラを我慢してヴァンキッシュを購入したとしても、ヴァンキッシュを使って釣りをしていると「ステラの方が良かったかなぁ」と、ずっと気になると思いますし。

      気分良く、楽しく過ごせるのが一番だと思います!!(^^ゞ

      ステラを使うと、リトリーブの心地よさにニンマリすると思いますよ~!後は、ご家族の了承を得るだけですね(笑)

      また、感想でも聞かせて下さい!!

      話は変わりますが、サーフ以外の場所では、面倒かもしれませんがタモは必ず持って釣りに出掛けた方がいいですよ。65で引っこ抜いたのにもビックリですが、タモを持っていない時に70~90cmまでのシーバスなんかが掛かると、ほぼ抜き上げられませんから。せっかく記録サイズを釣ったのに、釣り上げ不可能という本当に悔しい思いをする事になります。

      また、抜き上げようとした際、シーバスの身が切れて、ルアーだけが勢い良く自分へ向かって飛んでくる。なんていう危険もありますし、ラインで手が切れるなんて事にもつながりますし。

      とにもかくにも、危険防止とデカシーバスを釣る為の保険として、常にタモは持っておいた方がいいですよ~!!(^^ゞ

  4. comment-user
    たかすぃー
    2014年9月18日 PM 9:12

    承諾も得ないままナチュラムに注文入れちゃいました…*\(^o^)/*
    物が入ってから承諾を得ます!一悶着覚悟です!(⌒-⌒; ) 某MAXは展示品のみの上にえらく高かったので…ナチュラムで買い物したことないので一抹の不安はありますが…

    で、引っこ抜きに関してはご指摘の通りです。ロッドでのごぼう抜きは無理だったのでリーダー握ってやったんですがおっしゃる通り手が切れました(^_^;)絶対にネットは持って行くようにします。
    手が切れる程度で済めば良いですけど針が刺さるのは恐ろしい…どなたかのブログでも見ましたがあれはヤバすぎです{(-_-)}
    釣れないジンクス打破します。北公園なんかだと持って行くんですけどね。

    それと釣果の件は、釣れた時しか報告してないからですよ(^_^;)
    たまには釣りに出かけてくださいな。
    涼しくて気持ちいですよ。
    釣果情報待ってまーす!

    • comment-user
      MACO
      2014年9月18日 PM 9:42

      おっと!
      チャレンジャーな!!(笑)

      ナチュラムで何度か買い物してますが、基本的には届くのも早くて問題無いと思いますよ~!!この土日は、ステラで釣り出来るんじゃないですか??手元に届くのが楽しみですね(^^ゞ

      で、やっぱり手が切れましたか~。「針が刺さるのは恐ろしい…どなたかのブログ」このブログでも、フックが刺さったショッキング画像ありますよ。バリッドか何かでゴミを引っ掛けた際、リーダー持って引っ張ってたらパチンとゴミがちぎれて、次の瞬間腕にルアーが刺さってました。何とか自分でゴリっと抜きましたが…。

      これは本当にエライこっちゃになりますんで、面倒でもタモは必ず持参した方がいいです~(^_^;)

      そろそろ抜歯後の傷も癒えたんで、こっちもボチボチ釣りに出掛けてみます。まぁ、タイミング的にはイマイチなんですが…。

  5. comment-user
    たかすぃー
    2014年9月21日 AM 12:47

    ステラ入りました!
    届いてすぐにMAXに行って糸巻いてきました! でも結局ちょっと納得いかなかったので巻き直しました。
    巻心地は最高です。
    で、早速行ってきました。でも巻き比べしたかったのでツインパワーも持って行きました。
    生命感ない感じでしたが目的はステラを楽しむ為なんで全然オッケー。
    気のせいかもしれませんがキャストもしやすい感じで飛距離も少し伸びた感じがしました。浮かれてるせいかもしれませんが…
    で、巻心地なんですが本当に雑味がない感じでルアーの動きがダイレクトに伝わりますね。同じロッドで巻いてるのに全く違いました。 でもダイレクトに伝わる分、今までより重く感じました。 XGとかHGM辺りの方が楽に巻けるかもしれません。次のモデルが出たらその辺選びます。
    でも良いお買い物したと大満足です。
    でドラグ性能ですがあんまり分かりませんでした…結果を言うと2バラしだったんで…ドラグを楽しみたかったのでドラグユルユルに(軽く指でつまんで出る位…)してたのでかかりが浅かったみたいで一瞬でフックアウトしました。 チリッって一回いって終わりでした…
    さらに残念なことにツインパワーで投げてた時に一本上がりました…なので入魂はしてません…
    ツインパワーも良いリールですがステラを覚えちゃうと全然違いますねー

    あっそれと夫婦関係には小さなヒビが入りました…
    怒りを通り過ぎるとあんまり怒られません。ロッドも欲しくなっちゃいますね〜
    あかんあかん

    • comment-user
      MACO
      2014年9月21日 AM 10:42

      早速行かれたんですね。
      でも「夫婦関係には小さなヒビ」はマズいですね(^_^;)

      さてさて。ステラの巻き心地、気持ちよかったかと思いますが、巻いた感触が重く感じられたようですね。多分、これはギア比の絡みで、ご利用のツインパワーが5.2・巻き取り量が76cm程度だと思いますが、ステラc3000が5.3・巻き取り量が77cmと若干増えています。この辺りの違いと構造の差だと思います。

      現在使っているc3000で重いと思うようであれば、XGやHGに変えると余計に重く感じると思いますよ。

      少し分かりにくい話しですが、3段変速ギア付きの自転車をイメージしてみて下さい。坂道を登る際、1速(小さいギア)からこぎ始めるのと3速(大きいギア)からこぎ始めるのとでは、小さいギアの方が楽に進めると思います。逆に、平坦の道でスピードを出したい場合は、大きなギアの方が楽に速度を出せます。

      リールも同じで、c3000はハンドルを1回転させると5.3周動きますが(自転車の1速)、c3000XGは6.4周(自転車の3速)。ラインの巻き取り量も20cm近く変わってきますので、それだけ力が必要になります。なので、巻き重り軽減に重点を置くなら現在のc3000。逆に、ラインを早く巻き取りたい場合は、ハイギアタイプのチョイスになると思います。

      何だかややこしい話しをしてしまいましたが、イメージはこんな感じだと思います。

      最初は巻き重りの違和感があるかも知れませんが、数回で気にならなくなると思いますよ~(^^ゞ

  6. comment-user
    たかすぃー
    2014年9月21日 PM 2:07

    さすがっ!
    分かりやすい!
    ギヤ比等のメカニックなことは何も考えず勢いで買いましたが、なるほどそういうことなんですね。
    MACOさんは一体何モンなんですか?
    とにかく勉強熱心な事は分かります。
    私は勢いで行く方なので失敗も多いっす。
    でも購入したステラは間違いじゃなかったですけどね(⌒▽⌒)

    • comment-user
      MACO
      2014年9月21日 PM 3:13

      自分で書いていても、若干分かりにくかったんですが…。
      言いたい事は伝わったみたいで安心しました(笑)

      自分は、欲しい物や興味がある事に関しては、ネチネチと調べるのが好きなので、自然と予備知識が溜まっていくだけです。興味の無い事に関しては、サッパリ分からないままなんですけど(^_^;)

      ステラを使っている際の巻き重りも、すぐに慣れると思いますよ。しばらく使い込めば、気にならなくなると思います!!(^^ゞ

たかすぃーさんにコメントを書く

お名前(ペンネーム)

あなたのBLOG URL ※無記入でもOK!

コメント記入欄

※コメント欄の『利用規約』を読み、本規約の内容を承諾してから送信下さい。

※初めてコメント欄を利用される場合、管理者の認証を受けた後ブログへ表示されます。
SHARE RANKING
※3月19日現在、同じカテゴリー内にて、主要SNSでのシェア数合計が多い投稿のランキングです。
SHARE シェアして頂けると嬉しいです!!