ブログに使う写真、どんなものを使っていますか？ 高品質な写真配布サイトから探せば何も加工しなくても素敵な写真を使うことができるのですが、自分で撮影した写真を使う場合って、なんかこう・・・「野暮ったいなぁ」って思うことありませんか？ 今回はそんな、ちょっと残念な写真にひと手間加えて、ふんわり柔らかな写真に仕上げるテクニックをご紹介します。 サンプルとして、このトイレの写真を使います（なんでトイレ・・・）。 これは我が家のトイレの写真で、特に加工もしていない、撮ったまんまの写真をブログ用に縮小したものです。 ブログ用に縮小してしまった画像でもしっかり加工できるので、場合によっては重宝するかも！ なお、「レンズのフィルターもあるしRAWで撮ってるからいくらでも調整できるよ」という中上級者の方にはつまらない話かも知れませんので、ご了承ください。 写真を加工するのは「画像編集」ソフト さて、撮った写

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分

最終更新日: 2022年10月3日 Photoshopで画像から人や物などのオブジェクトを除去する方法は、デザイン制作において重要なテクニックです。しかし、用途に応じてツールを使い分け、除去レタッチ作業を行っているというひとは、どれだけいるでしょう。 今回は、Photoshopの各種ツールを駆使した除去、消去テクニックと、いつその技を使うのがベストなのか、各サンプルと一緒にまとめてご紹介します。これらの方法を実践することで、写真に写り込んでしまった不要なモノを、2〜3分の短時間で、スピーディーに除去することができるので、フォトショップ初心者のひとにもオススメです。

Chrome 69 から CSS conic-gradient が使えるようになります ※2018年8月3日時点ではバージョンが 68 なので、以下のソースは Chrome Canary でご確認ください。 今までグラデーションといえば、線形グラデーションの linear-gradient と 放射状グラデーション の radial-gradient の２つだけでしたが、conic-gradient で円錐状グラデーションを表現することができます これを利用しビックリマンシール風の背景を作成してみました。*1 実際に描画されたものを見たい場合はこちら。 名前のところは太字にして枠をつけただけなので、もう少し何とかしたいところですが、 主旨のキラキラはいい感じにできました。 キラキラソース HTML .kirakira { position: relative; width: 240px;

WHATWGのHTML Living Standardと、W3CのHTML5.2を見比べつつ、たまにMDNをながめながら書いていますが、少し感情的な部分も混じっています。 <article>と<section> A section forms part of something else. An article is its own thing. But how does one know which is which? Mostly the real answer is "it depends on author intent" 4.3.12.1 Article or section? | HTML Standard 実装する人の意図によるよ！ってそれを言っちゃおしまいですよ。気持ちはわかるけども。 <article> in principle, independently distri

はじめに 今までフロントエンド→インフラと経験してきた 社会人3年目(エンジニアとしては2年目)の自分が、 勉強していく中で参考になったサイトなどをまとめます。 リンク集 学習系全般 Ping-t LinuC/LPIC、Oracle Master Bronze、ITパスポート、ITILなど検定を勉強できるサイトです。 特に、 ・Webサーバーなどに少しでも関わりのある人は、LinuC/LPICを学習してLinuxの基礎を学びましょう。 ・データベースに少しでも関わりのある人は、Oracle Master Bronzeを学習しましょう。 それ以外の項目については言うまでもないかと。 自信がついたら実際に受けてみるのもいいですが、受験料が高いのでお財布と相談。 paiza プログラミング学習サイト兼求人サイトです。 広告などでよく出てくる、女の子と勉強できるプログラミング学習サイトです。 スキ

新卒で入社してもうすぐで一年を迎えようとしている大久保です。（´-`） 最近ジョインしたプロジェクトでIntelliJ IDEAを使っているのですが、あまり機能を使いこなせていないなと感じたので、IntelliJ IDEAのショートカット調べました。（´-`） 自分がググったとき、ショートカットキーだけじゃなくて、Gif画像付きで使用例も見れたらうれしいので可能な限り作ってみました。（´-`） 例で使用しているコードの言語はScalaです。 現在使っているのがMacなので記述はMac版のショートカットのみです。 WindowsのIntelliJ IDEA使っている方がいましたらWindowsのショートカットキーについての編集リクエストいただけると嬉しいです。（´-`）.｡oO（他力本願） @data9824 さんにWindows版のショートカットを追加していただきました！ Git機能につい

なぜgulpfile.jsをES6で書くの？ ES6にとりあえず触れて慣れてみたいという場合に、まずはgulpfile.jsで試してみるとよさそうという風潮があるみたい。理由はたぶん次のような感じかなと思ってる。 他への影響が少ない コードの分量が少ない 実装にあまり頭を使わないで書ける 環境によってはbabel等のトランスパイラをインストールせずにES6がそのまま使える 環境を準備する gulpfile.jsでES6を使えるようにするには、gulp側で対応するか、Node.js側で対応するかどちらかになります。 gulp側でES6に対応する gulpはv3.9.0からbabelを標準サポートするようになったので、babelを介してES6構文を利用できるようになりました。 ただし、ES6構文を使う場合は、ファイル名をgulpfile.babel.jsにする必要があります gulpのバージョ

作ったWebサービスが誰からも使われなくてさみしい問題を解決する（しない）意識低い方法論Jul 29, 2018 意識低い個人開発論ポエム個人開発でWebサービスを作ったものの、全然ユーザーが集まらなくて自然消滅、、というのはよくある話です。 おそらく個人開発者の一番の悩みは「作ったものが誰からも使われない」でしょう（当社調べ）。 この記事では、この問題に対するおそろしく意識の低い方法論を整理してみたいと思います。 めっちゃバズらせる・ヒットさせる方法論ではなく、あくまでバズらないWebサービスでもさびしく孤独死するのを避けたい…という後ろ向きなハックですのであらかじめご了承ください。 そもそも、なんでWebサービスは死ぬのかいきなり哲学的な見出しになったけど、もちろん中身は意識低い話です。 Webサービスの死因完全に私見ですが、「サービスの死」とは以下３つの状態を指します（断言）。 【死

レスポンシブ用のMedia Queriesを使う時に「@media (min-width: 400px) {}」のように「px」を単位に使用している人も多いと思います。しかし、px指定には注意が必要です。 Webページでよく使用される条件で検証を行い、Media Queriesでなぜpxを使ってはいけないのか、そして何が適しているのかが分かる検証記事を紹介します。 PX, EM or REM Media Queries? 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに pxとemとremの検証方法 検証1. html要素でfont-sizeを指定 検証2. ブラウザでズームが可能 検証3. ブラウザでフォント設定が変更可能 検証の結果 はじめに あなたはMedia Queriesで使う単位にpx, em, remのどれが一番

WordPressでアイキャッチを利用するテーマの場合、登録されなかったときの処理として記事内にあるひとつ目の画像やあらかじめ用意しておいた代替画像をアイキャッチとして表示させることが多いのですが、そのようなときに使えるスニペットの備忘録です。 基本的な動作 以下では2通りの方法をあげますが、いずれも大まかには下記のような動きになっており、最終的なゴールとしては画像とalt属性を条件に応じて出力するというものになります。 画像 アイキャッチが登録されていたらそのまま使用。 アイキャッチが未登録の場合、記事内の画像をアイキャッチとして使用。 アイキャッチが未登録且つ記事内にも画像がない場合、代替画像をアイキャッチとして使用。 alt属性 アイキャッチが登録されており「代替テキスト」があれば、そのままaltとして使用。 アイキャッチが登録されており「代替テキスト」ない場合、「タイトル」の内容を

お弁当のおすすめおかずレシピ32選！詰め方やお弁当箱もこれで完璧！ 毎日お弁当作りを頑張っている方……。決まった容器のなかに食べてくれる人が喜んでくれるものを作るのはなかなかむずかしいですよね。そこで今回は、お弁当のおかずレシピをはじめ、詰め方のコツや話題のお弁当箱もご紹介します！

概要 npm タスクを Maven と連携してみる。 具体例をひとつあげるとJSライブラリを取り込む npm タスクを用意して、mvn compile と同時に動くようにしてみる。 手順 exec-maven-plugin を使って、npm install を実行する。 Maven には多様なライフサイクルが定義されている1。例示した npm タスクは JS ライブラリを npm 経由で取ってくるタスクなので、compile 前のソースコード変換をする generate-sources ライフサイクルがこれに該当する（厳密には違う感じもするけど）。 以上を pom.xml に書くとこのようになる。 <build> <plugins> ... <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec-maven-plugin

前回，前々回に引き続き，Twitter botの拡張をしていきます．わーい． ottosan84.hatenablog.com ottosan84.hatenablog.com 天気予報の取得とツイート 今回はbotのTL上で #お嬢天気予報 というハッシュタグをつけてつぶやいた人に対して，天気予報を送りつけるという機能を作ってみますた． 天気予報の取得 これも色々とやり方があると思いますが，今回はライブドア天気情報「Weather Hacks」の結果を利用します．例えば，滋賀県大津の天気の取得はこんな感じ． require 'net/http' require 'uri' require 'json' uri = URI.parse('http://weather.livedoor.com/forecast/webservice/json/v1?city=250010') json =

error: Cannot delete the branch 'ブランチ名' which you are currently on. 原因 : カレントのブランチを削除しようとしている 対応 : 削除対象外のブランチに切り替えてから削除する

はじめに まず「ぺたっとついてくるやつ」という日本語は無視してもらって、 今回作りたいのは、こういうやつ↓。 主にheaderとかsidebarで使われたりしていますよね。 sticky〇〇なんて言われています。 JavaScriptで実装されていたり、それらに特化したプラグインなどもあるみたいです。 ですが、今回はCSSのposision: stickyを使って ペタッとさせますー ※お使いのブラウザによっては正しく表示されない場合があります。 完成品 headerがペタッと CVがペタッと パララックス風 おまけ headerがペタッと HTML <header> topだよん </header> <div class="items"> <div class="title title_color_red"> ギ </div> <div class="item"> なんかの箱1 </di

開発しやすい環境の作り方~Web系~ こちらを参考に「gulpfile.js」を修正。 この時点でgulp + sass + pugの設定が完了。 auto-prefixerを設定したい 制作しているサイトがかなり古いものまでサポートしなければいけないため、 auto-prefixerを使おうにもどうにもうまくいかない。 正確には「style.scss」のベンダープリフィックスはつけられるのに、 他のファイルになると全く何も起きないと行った状態。 display: flexはdisplay: flexのまま。 そこで色々試した結果下記のサイトを参考に設定をしました。 gulp-autoprefixerを使ってCSSのベンダープレフィックス付与を自動化する 結果出来上がった「gulpfile.js」がこちら var gulp = require("gulp"); var sass = req

CSSのfont-sizeが%とかemとかremとかvwで指定されてると、ビビっちゃう君と僕を救う2分HTMLCSSHTML5CSS3 ーーーーーーーーー 追記 2020年10/15 この歳になるとこういう記事のアプトプット怖いですね。。 とりあえず周り見てると、こうやってる人多いです html,body{ font-size:62.5%; } って書いてあげて　そうすると 1.0rem が 10pxになるみたい。 そんで例えば24pxにしたい場合は2.4remって指定してあげるみたい。 以上。 ーーーーーーーーー いまだにレスポンシブ怖い、、、、。 なぜなら%とかemとかremのフォントサイズ指定があるから。。。 これらをなんとなくでしてる人。 途中で引き継いだ案件とかでpx以外が指定されててビビってしまった 僕とあなたへ捧げます。 😭 大前提 CSSのフォントサイズ指定方法は次の2つ

スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき