文系プログラマによるTIPSブログ文系プログラマによるTIPSブログ文系プログラマ脳の私が開発現場で学んだ事やプログラミングのTIPSをまとめています。世間のフラットデザインへの移行もあり、bootstrapもバージョン3になったので、bootstrap3を使ってデザイン変更してみました。メニュー部分は思いっきりgoogleを真似しています。主な変更点トップページの表示項目トップページから全ページに遷移できるように、タブ形式で全ページへのリンクを用意していましたが、やめました。新着記事のみを表示するようにして軽量化しました。左サイドナビ・右サイドナビ左サイドナビと右サイドナビの役割をはっきり分けました。左サイドナビはメインメニューとサブメニューとadsenseです。右サイドナビは主にメインコンテンツと関係ないものを配置しています。記事の表示回数を元にしたアクセスランキングページと、はてなブックマーク数の多い順のアクセスランキングのページを新設しました。bootstrap3への移行時の問題点いろいろ苦労しました。classの書き方がかなり変わったかなり書き方が変わりました。bootstrap2から3でどう変更されたかはオフィシャルサイトに記載されています。Redirecting...マージン・パディングがまた変わったbootstrap1から2の時と同様、またスペースの定義が変わっています。実はこの件が関係しています。nav-tabs・nav-pillsの挙動がおかしいのです。結果、スクロールするとタブのホバーが勢い良く動いてチラチラするのです。この問題を解決するのが面倒なので、すっぱり使うのをやめました。フラットデザインは難しい元も子もない問題なのですが・・・そもそもフラットデザイン必要なの?と思いました。フラットデザインは要素にボーダーが設定されていないので、要素と要素の境目がかなり見づらいです。うまくデザインしないと、1990年代のcssを全く使わないクソサイトみたいになりがちです。実際自分でデザインしてみると解りますが、フラットデザイン難しすぎ!本当に糞デザインになりやすいです。自分は目に優しい色が好きなのですが、これらのトレンドカラーはどぎつい色です。試しにエメラルドにしてみたのですが、とにかく目に悪い。フォントを白にするので見難い。総評こんな感じでブーブー言いながらbootstrap3のフラットに移行してみました。全体的に要素を調整して描画に負担がかからないよう高速化しています。Kitのライブデモを用意してみました!こういうのは触ってみないといけませんね。03:24昔は業務系SIer、今はベンチャー企業でプログラムを書いています。mapDispatchToPropsを撲滅するReactオススメ書籍React自体の基礎、AtomicDesignの適用、CSSの運用手法の歴史的な経緯とメリットデメリット、Reduxの基礎、redux-sagaによる非同期処理、サーバサイドレンダリング、テスト、lint、を学ぶ事ができます。啓太マイナビ出版AmazonAngularオススメ書籍Angularを学ぶなら絶対以下がおすすめです!バインディング、ディレクティブ、パイプ、フォーム、コンポーネント、サービス、ルーティング、httpClientによる非同期httpリクエスト、テスト、angular-cli、を非常に丁寧な説明で網羅的に解説しています。技術評論社AmazonSEOオススメ書籍SEOを学ぶなら絶対以下がおすすめです!クローラに対して何をどうすればサイトの巡回効率・速度を上げる事ができるのか、どういったマークアップをする事が標準仕様なのか。巷に溢れる業者による経験則に基づくオレオレSEO情報は一切無く、全てGoogle等のオフィシャルな情報に基づいて何をすべきか、どんな手段があるのかを解説されています。プログラマな私が業務で行った施策が多く書かれており、プログラマ寄りで高度な内容となっており、巷のビギナー向けの曖昧な情報集とは一線を画しています。Amazonアソシエイト・プログラムの参加者です。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。