はてなブックマーク

WEBサービス企業・システム会社が運営するエンジニア向けテックブログ一覧WEBサービス企業やデザイン会社やゲーム運営会社のエンジニアが技術について語っている技術系ブログ「テックブログ」「デベロッパーブログ」が増えています。 これらのブログは、実践的な最新技術に関する知見を得られるため、エンジニアの情報収集に最適です。 実際の仕事の現場で利用されている実践的な技術について書かれている企業で採用されている最新技術の動向がわかるプロダクトの裏側や問題解決プロセス・考え方がわかる 本記事では、エンジニアが読むべきテックブログ・デベロッパーブログを厳選して紹介致します。 プロダクトの裏側や問題解決プロセスがよくわかるテックブログ4選。「cookpad」クックパッド開発者ブログオススメ

スタイリッシュなデザインの区切り線・水平線（hrタグ）のCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 文章やコンテンツの区切りでつかわれるhrタグ。文章をたくさん扱うサイトなどでは、利用するユーザにとってもひと目で区切りがわかるので、とても重要です。 一方でhrタグは仕様上シンプルになりがち。カッコいいデザインにするために、hrタグ以外を使って水平線を表現しているサイトも多く見受けられます。本記事ではフォームの中でも「区切り線・水平線」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 まずは基本！シンプルでわかりやすいhrタグ要素のCSSデザイン例。基本的なhrタグのバリエーション一覧 その①See the

ログインフォーム、サインアップ画面(Login & Sign-Up Form)のCSSサンプルをまとめました。デザインが美しいウェブサイトやサービスが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にログイン画面はユーザが最初に触れる画面。目を引くデザインのログインフォームは利用者の興味を引き付けます。 ログイン画面はシンプルなデザインのものが好まれますが、ちょっとした遊び心は必要。楽しいデザインの画面だと煩わしいログイン作業も少しは心軽くなるでしょう。本記事ではフォームの中でも「ログイン画面」「サインイン画面」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルなログインフォームのCSSデザイン例。迷ったら簡素で見やすいものにしよう。フラットデザインのシンプルログイン画面。See the Pen Flat HTML5/CS

スタイリッシュなデザインのハンバーガーメニューのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 ハンバーガーメニュー（三本線のメニュー）はメニュー表示の定番となっていて実装することも多いと思います。モバイルファーストの時代になり限られたスペースを有効活用するために生まれたデザインです。本記事ではフォームの中でも「ハンバーガーメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 ハンバーガーメニューアイコンの多彩なデザイン・動作がよく分かるCSSデザイン例。シンプルな三本線のハンバーガーメニュー。クリック時の多彩なアニメーション。See the Pen CSS Menu Icons by Naoya (@

すぐ実装できる！初心者向け。Pythonの設定ファイル管理についてまとめました。Pythonでプログラムを書く際に、プログラムで使用する設定値を外部ファイルで管理したいケースは多いと思います。 Pythonの設定ファイル読み込みはいくつかの方法があり、大半の形式のファイルに対応可能です。 本記事ではPythonでの設定ファイル管理について、形式別(settings.py、ini、json)の特徴などを整理してサンプルコードをまとめています。 実行環境はローカルPCのWindows環境で実行しています。

フォームのデザインをかっこよくするアコーディオンメニューのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 入力項目が多くカテゴリー毎にコンパクトに開閉したい場合、アコーディオンメニューを実装することも多いと思います。本記事ではフォームの中でも「アコーディオンメニュー」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルで押しやすい見た目・動作のアコーディオンCSSデザイン例。基本形のシンプルアコーディオン。Pure CSSで実装できる。See the Pen acordion by P (@Triphon) on CodePen. 基本形のシンプルアコーディオンでJSを使わずCSSのみで実装しています。

フォーム項目の注釈説明をわかりやすくするツールチップ(tooltip)/ヘルプのCSSサンプルをまとめました。趣向を凝らしたデザインが素敵なウェブサイト・ブログが増えています。ただし、サイトは利用者が快適に操作するためのものであり、ユーザビリティが悪いサイトや項目説明が不足しているサイトは使いにくいです。 サイトの使い方を補足説明する方法として「ツールチップ(tooltip)」が挙げられるでしょう。 本記事ではフォームの中でも「ツールチップ(tooltip)」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルにバルーンがポップアップするタイプのツールチップ(tooltip)CSSデザイン例。基本形のシンプルなバルーンツールチップ。Pure CSSで実装できる。See the Pen CSS Tooltip Magic by Envato Tuts+ (@tutsplu

リッチなUIのWEBサイトを簡単に実装できるCSSライブラリ「Animate.css」の実装手順、実現できるアニメーションの種類、テクニックを整理しました。Pure CSSだけでも充分に動きのあるサイトを作ることができる時代になり、素敵なデザインのサイトやサービスが増えました。 ただし、自分でCSSを書くのは大変。便利なライブラリがあれば使いたいところです。本記事ではCSS3アニメーションのライブラリとしては最も有名だと思われる「Animate.css」について、利用手順・アニメーション種類・実装テクニックを整理しました。 例えば、このような動きを簡単に実現することができます。 ↓ちなみにこのアニメーションが突然動かなくなって困っているケースが多いようです。詳細は後述しますが、もしアニメーションが動かない場合は視差効果の設定を見直してください。 サンプル Animate.cssのダウンロー

フォームのデザインをかっこよくするタブ(tab)切り替えのCSS/JSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 入力項目が多いけどスクロールは避けたい場合、タブ切り替え機能をhtml/CSS/Javascript/jQueryなどで実装することも多いと思います。本記事ではフォームの中でも「タブ切り替え」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルで押しやすい見た目・動作のタブ切り替えCSSデザイン例。基本形とも言えるシンプルタブ切り替え。縦型・横型の2パターン。See the Pen Bootstrap Tab Group by Stefan Rusu (@stephanrusu) on Cod

WordPressプラグイン「コンタクトフォーム」は便利だが、海外からのSPAMメール対策は必須。サイト/ブログを運営する場合、問い合わせフォームが必要な場合は多いです(Google AdSenseの申請など)。WordPressの場合は「Contact Form 7」という非常に便利なプラグインがあり、インストールして使っている人も多いでしょう。 しかし、何も対策をせずに問い合わせフォームを公開していると、海外からたくさんの迷惑メール/スパムメールが届くことになります。 「Akismet(アキスメット)」を連携させて対策している人も多いかと思いますが、「Sign upしたくない」「対策ロジックが不明瞭」等の理由で使用したくない人もいるかと思います。 本記事ではAkismetを使わずに、「Contact Form 7」の問い合わせフォームのスパムメール対策をする3つの方法とそれぞれのメリッ

フォームのデザインをかっこよくするラジオボタンのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「ラジオボタン」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルで押しやすい見た目・サイズのラジオボタンCSSデザイン例。クリックで色が変わるシンプルなラジオボタン。選択中の項目が分かりやすい。See the Pen CSS radio buttons by Angela Velasquez (@AngelaVelasquez) on CodePen. オンフォーカスで明度が上がり、クリックでさらに色が変わるタイプのシンプルなラジオボタンです。 クリック時にtransitionが

PythonのWindows環境下におけるTIPSが少ない…。実行方法についてまとめました。昨今では人工知能・bot開発・自動化などでPythonが注目されていますが、インターネット上を検索してみても、Linux・Mac環境におけるノウハウが多くWindows環境でのノウハウが少ないように思えます。 生粋の技術者はLinuxを使うのでそれでも良いのでしょうけど、OSのシェア率は依然としてWindowsが9割を占めている状態ですので、一般のすそ野を広げるためにはWindowsのTIPSが増えてくれることを願うばかりです（ほとんどのビギナーはWindows環境を使っていると思います）。 そこで本記事ではWindows環境におけるPythonの手動/自動実行方法について整理しました。 Windows環境でコマンドプロンプトからPythonスクリプトを手動実行する。まずは基本になります。Pytho

フォームのデザインをかっこよくするチェックボックスのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にチェックボックスはデフォルトのデザインが地味で押しにくいことも多いですので、装飾することで改善できます。 本記事ではフォームの中でも「チェックボックス」に焦点を当て、おしゃれなCSSスニペットをまとめました。 通常のチェックボックスだけでなくトグルボタンやスイッチ形式のデザインもあります。 実用性重視。シンプルなチェックボックスでユーザビリティを向上できるCSSデザイン例。クリックしやすいシンプルなデザインのチェックボックス。See the Pen Simple CSS Checkboxes with Font Awesome by James Barnett (@jamesb

フォームのデザインをかっこよくする選択プルダウンのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「選択式プルダウン(SELECT～OPTION)/ドロップダウンリスト」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 プルダウン/SELECT要素(シングル)の見栄えを劇的に良くするCSSデザイン例。ふわっとポップにアニメーションするドロップダウンリスト。See the Pen Custom Select by Yusuf (@yy) on CodePen. ポップでステキなデザインのプルダウン/SELECT要素です。 選択時にふわっとボックスが動くと同時に、選択肢が吹き出し形式で表

フォームのデザインをかっこよくするテキストボックスのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「テキストボックス」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 テキストボックスは入力フォームの中でも基本のコントロールになりますので、デザインセットでのサンプルも掲載しております。 シンプルだが確実にテキストボックスの見栄えを良くするCSSデザイン例。テキストボックスにフォーカスすると、ラベルが上に移動するシンプルなデザイン。See the Pen Animated Textbox by Stefan C. (@stefcharle) on CodePen. よく見るタイプのデ