阿部 寛 ホームページ。 阿部寛と堂本剛のホームページを見て阿部寛をもっと好きになった│意識高い系中島diary

WEBサイトのページスピード選手権!表示速度が最も速いのはどこだ?|きにぶろぐ.com

阿部 寛 ホームページ

[Sponsored link] まず,の基本スペックを確認しよう。 ホームページビルダーで作成• フレーム&テーブルで牧歌的な表現を演出• 壁紙から自作するのが基本• nifty会員用のサーバーに設置(現在は新規募集していないので注意されたい)• htmlではなくて. htmなのはホームページビルダーの仕様で,拡張子3文字時代の牧歌的雰囲気を細部からも演出• アクセス解析の類いが見当たらない(ニフティにそんなサービスはないしあったとしてもタグを貼り付ける必要がある)• 現在もまめに更新されている• 189cm75kg,中央大学理工学部 電気工学科卒(サイズと学歴は個人サイトで最も重要な情報) 無駄をそぎ落としたシンプルなデザインにその美しさを求める者もいるが,htm l のソースを確認すると,むしろ装飾的な要素がふんだんに搭載されていることがわかり,webサイトを作る楽しさを思い出させてくれる。 以下はフレームでデザインされたトップページの右側に表示されるtop. htmの分析である。 メタタグの記述によって,ホームページビルダーの体験版を駆使して作られたことがわかる。 ビルダーが勝手に吐き出すジェネレーター タグは昔から評判が悪かったけれども,これはむしろ評価ポイント。 スタイルシートはhtm l に直接記述し,クラス指定されている CSSで暮らす指定された「style1」は 「New! 」を赤色に装飾するためだけに使われている。 もちろんこれはCSSを使わなくてもタグでできるのだが,別言すれば阿部氏のホームページの多くの部分はCSSに記述して表現することも可能である。 一つの技術に集約するのではなくて,複数の方法できることなら,むしろ全部を使って表現したくなるものだ。 webサイトを作る楽しさを知る者ならこの感覚はよくわかる。 所属: 茂田オフィス 107-0052 東京都港区赤坂9-5-29 赤坂ロイヤルマンション303 TEL : 03-5410-8585 FAX : 03-5410-0588 「所属 :」とコロンをストロングタグで強調しているのは,おそらく,適当に割り当てられた番号にすぎない「TEL : 」や「FAX : 」と「所属 :」が同列ではないことをはっきりと見た目で示すためのデザイン面の配慮であろう。 さらにいえば,半角スペースがTELやFAXの後にあるのに所属の後にはないのも,コロンが必要以上に目立ってしまわないための配慮だと思う。 画像のサイズが中途半端なのはホームページビルダー上でリサイズするから。 しかしabe-top2-4. これは画像編集ソフトでリサイズとトリミングをしてから、さらにホームページビルダーでもう一回修正を加えるという,ギリギリまで適正サイ ズを追求した管理人の妥協なき姿勢の痕跡。 どさくさ紛れに縦横の比率を変えてスリムに仕上げられているが,じつに示唆的である。 常に美しくあらねばならない芸能人は,時に残酷なまでのデジタル加工を受け入れなければならないことを教えてくれる。 ちなみにabe-top2-2. jpgとabe-top2-3. jpgもサーバー上に存在していて,それぞれ大きさや写っている範囲が違う。 nifty. jpg の存在を疑うのがウェッブの正しい見方であり,こちらもしっかりと存在する。 abe-top. jpgはイケメン成分を多めに含んでいてマニア向けの隠しファイルとして用意されたものだと思う。 abe-top2-4という示唆的なファイル名は比較的簡単に隠しファイルの存在に気づかせてくれる。 ネット初心者にも優しいユーザビリティ重視のweb作り。 保存済みのabe-top. jpg(直リンはしてないよ) 最も理解を困難にさせているのが,ソース最上部に記述された下記の2行だ。 どうやら web上のhtm l ファイルをローカルに保存した時にIEが勝手に挿入するメタタグらしいが,これはよくわからない。 クリエイティビティの巨大な見本市であり,オリジナリティのかたまりである阿部寛のホームページが,デザインの盗用目的で保存した他人のファイルを出発点にしているわけがないということだけは,冗談抜きに断言できるし見れば誰でもわかる。 まあ,管理人のマイドキュメントフォルダが一時的にカオスでtop. htmが行方不明になってしまったことがあって,ゆっくり探したくても迅速な更新が要求される阿部氏の「エッチピー」でそれは許されないから,自らオンライン上のファイルを保存したとかそんな感じだと思う。 ftpで安心と信頼の nifty サーバーに接続してダウンロードすれば済む話かもしれないけれど,コアファイルのtop. htmが行方不明なパニック状態で冷静な判断は無理だし結果が同じならどの方法を選ぼうがおーるおっけーなのである。 おしまい.

次の

阿部寛のホームページを徹底解説するよ

阿部 寛 ホームページ

の10日目の記事です。 「阿部寛のホームページ」はWEB高速化界隈のトレンド 先月、dev. toと阿部寛のホームページが非常に高速ということで、 インターネット界隈で話題になりました。 この一連の流れは、• dev. to あまりにも速すぎて全てのサイトが過去になってる mizchi あたりがブームのきっかけになったと認識しています。 自分もこれまでに無かった爆速っぷりに感動し、中でもこの記事には特に感銘を受けました。 もう最高です。 阿部寛のホームページの高速化については、• あたりで先人たちがいろいろと試されている模様でした。 と、そんな時にちょうど昨日社内勉強会の当番が回ってきたので、ネタとして阿部寛さんのホームページをPWA化してさらに高速化するというのにチャレンジしてみました。 自分は普段はほぼサーバサイド・バックエンドをやっており、恥ずかしながら最近のフロントエンド界隈のトレンドは追えておらず、ReactはおろかVue. jsすらもまともに触ったことがありませでした。 が、この記事内で紹介されているなら自分でもいけるかも、と。 PWA(Progressive Web Apps)とは PWAについてはこのあたりが参考になりました。 単に高速なだけでなく、オフラインでも動いたりネイティブアプリっぽく出来たりととても素敵な感じです。 公式ホームページを写経してコンポーネント化 PWAとはこういうものなのか、という雰囲気を掴んだところで、 いよいよのhtmlを眺めます。 伝統的なHTMLを修正していく 元がホームページビルダー製のHTML4なので、地道に修正していきます。 frameが使えなかったり• 閉じタグで怒られたり• 大文字のタグを小文字に置換していったり• menu. htm をコンポーネント化したり ひたすら地味に修正していきます。 慣れてない作業なのでここが一番時間がかかりました。 🤧 frameが使えないため、CSSで代替 自分はCSSもあんまり分からないので、この最高のChrome拡張 のCSS部分を参考にさせていただきました。 骨組みが出来たので、速度計測をしながら少し改良 速度計測には、以下のものを使わせていただきました。 jpgをWebP化 を使わせていただき、formatをautoにしてChromeではWebP、Firefoxではjpgになるようにしました。 さすがCDN、もうこれだけで十分速いです。 ついでにモザイクをかけたりもオンラインで出来るので超楽でした。 Cache-Controlを設定 静的なassetsにはCache-Controlを設定したりしました。 ちょっとだけレスポンシブに preactデフォルトのテンプレートだとPC viewは良いものの、スマホブラウザだと疑似フレームの箇所が結構崩れてしまうため、ちょこっとだけ微調整しました。 ただし、元のトラディショナルなホームページの雰囲気を残すために、メニュー等のベースはそのままにしています。 とりあえず完成 早速計測します Google PageSpeed Tools• 本家が93のところ、無事に97まで行くことができました。 webpagetest. org• Cache static contentのところはCache-Conrolとか入れていいのか分からなかったのでそのままにしておいてます。 😅 Lighthouse• Preact PWA abehiroshi さすがpreact、何も無い状態の100点からはちょっと落ちちゃいましたが、PWA面は素晴らしいスコアです。 まとめ これまでフロントエンド界隈はあまり興味を持っていなかったのですが、今回阿部寛さんのホームページを介してpreactを試してみて、PWAの可能性を体験することが出来ました。 これからはフロントエンド方面についても少しは勉強していかねばと思わされました。

次の

阿部寛のホームページが話題!表示速度が爆速?デザインがダサい?

阿部 寛 ホームページ

阿部寛とは、の・・・である。 生まれ• 特技:古• 称: さんちゃん• 若い頃はに出入りしてた が欲しくて「第3回ノンノ大賞」に応募、して以後として活動を始める。 ノンノ創刊から4まで表を飾り、「で最も『同じ雑誌の表を連続して飾った人物」としてを受ける。 当初はなとして売り出し、成功を収めたものの、それだけではが持続せずに凋落。 一時は後半にして「あの人は今」の取材対に挙げられるなど、いくところまでいってしまった、 が、それを契機に一念発起し、演技としての再を切る。 代を迎えると、渋みの利いた演技とで再びを獲得。 のの『』では、非常に渋い外見でありながらな性を持つ、者次郎を好演。 共演したとともに、そのを不動のものにした。 は、から三枚、狂ったからはては役まで幅広く演じる本格として活躍中。 には『』にて時代の浴場専門設計技師ルシウスを見事に演じ、「第回祭 演賞」、「第回賞 演賞、第36回 最優秀演賞」を受賞。 さらにには「第38回 優秀演賞」「優秀助演賞」、同年には『』でと闘いながら夢を追い続ける・佃航を熱演、に「第回 ザ 演賞」「アウォード6 演賞」を受賞した。 (ちなみに作品自体もに「作品賞」を一緒に受賞している。 ) に演を務めた名でもある『できない男』のが長らく定着していたが、翌年に年下のとしている。 最近はが死ぬほど軽いことでもに有名。 詳しくは記事「」へ。 主な出演作 テレビドラマ• (芝山貢)• (次郎)• 最後の弁護人(和明)• アット・ダッド(和之)• (建二)• できない男 桑野信介• (好古)• い(男)• ゴー マイ (良多)• 幸福のいカチ(勇作)• (佃航)• スニッー 捜官(信一郎) 映画• プラト・(秀行)• ~FO ~()• (次郎)• へ は式(路功)• 隠し砦の(太)• 伝 闘の章(の)• (時)• からの(陽)• 聯合艦隊長官 (多聞)• の 〜・〜()• (ルシウス・モトゥス)• (武沢夫)• つやのよる あるに関わった、女たちの(生二)• よりもまだ深く(良多)• ド(和幸)• 妻(陽) CM• (サンテ)• ( )• 積工業(ム)• 第一生命(~「な」篇~) 関連動画 関連商品 関連項目• 関連リンク•

次の