長形フォントの描画に苦労したのでメモ <div class="longtype-container"> <p class="longtype-content">長形フォント</p> </div> $scale: 0.5; //倍率 $font-size: 50px; .longtype-container { width: 100px; margin: 0; background: grey; .longtype-content { font-family: "メイリオ"; //計算の簡単のため等倍フォント font-size: $font-size; line-height: $font-size; //font-sizeと同じ値を設定しない場合上下の位置がずれる text-align: left; //左寄せ transform: scaleX($scale); transform-origin: left; //拡大の起点を左端に width: 100% / ($scale); //行折り返し点の調整 } } $scaleの値を変更すれば伸縮率を変更できる。
長形フォントの描画に苦労したのでメモ
<div class="longtype-container"> <p class="longtype-content">長形フォント</p> </div>
$scale: 0.5; //倍率 $font-size: 50px; .longtype-container { width: 100px; margin: 0; background: grey; .longtype-content { font-family: "メイリオ"; //計算の簡単のため等倍フォント font-size: $font-size; line-height: $font-size; //font-sizeと同じ値を設定しない場合上下の位置がずれる text-align: left; //左寄せ transform: scaleX($scale); transform-origin: left; //拡大の起点を左端に width: 100% / ($scale); //行折り返し点の調整 } }
$scaleの値を変更すれば伸縮率を変更できる。
概要 前置き エディタ上の芸のないブロック体の文字を眺めていると、なんだか気が滅入ってきます。 そこで、Mediumやdev.toなど海外メディアのプログラミング記事でよく見かける、いい感じにおしゃれな筆記体フォントをVisual Studio Codeに導入し、プログラミングを少しでも耐え得るものにします。 結果 以下の画像のように、VSCodeでコードの要所要所を筆記体に変えました。 手順 フォントのインストール Fira Code iScriptをインストールします。 Fira Code iScriptは、プログラミング用に最適化されたフォント「Fira Code」に、筆記体を加えたものです。以下がFira Codeの例です。 Windowsであれば、ダウンロードしたttfファイルをダブルクリックすることでインストールできます。 VSCodeのエクステンションのインストール 筆記体をサポートするものなら何でもいいのですが、私はDark ++ Italicを使いました。 フォント設定の変更 VS Codeの「ファイル」=>「基本設定」=>「設定」=>「テキスト エディター」=>「フォント」から、Font FamilyをFira Code iScriptに変更します。 CSSの変更 上までの手順を踏むと、JavascriptやPythonなどでは、いい感じに筆記体が表示されるようになります。 それでも、Go言語などでは、筆記体の箇所が少ないように思えます。そこで、cssをいじって、特定のクラスを持つ箇所は筆記体にします。以下がその例です。 注意！VS Codeのテーマを変更すると、クラス名の割り振りも変更になってしまいます。下の例はDark ++ Italic以外のテーマでは、いい感じに表示されないかもしれません。 .mtki{ font-size: 1.125em; font-stretch: ultra-condensed; } .mtk4, .mtk6{ font-size: 1.125em; font-stretch: ultra-condensed; font-style: italic; } 別のテーマを使っている場合などは、VS Codeの「ヘルプ」=>「開発者ツールの切り替え」をして、筆記体にしたい部分のクラス名を調べてください。 余談 単純にフォントの設定を筆記体にするだけだと、以下の画像のようにとても読めたものではなくなります。上記の通り、エクステンションを導入したりやCSSをいじったりする必要があります。
エディタ上の芸のないブロック体の文字を眺めていると、なんだか気が滅入ってきます。
そこで、Mediumやdev.toなど海外メディアのプログラミング記事でよく見かける、いい感じにおしゃれな筆記体フォントをVisual Studio Codeに導入し、プログラミングを少しでも耐え得るものにします。
Fira Code iScriptをインストールします。
Windowsであれば、ダウンロードしたttfファイルをダブルクリックすることでインストールできます。
筆記体をサポートするものなら何でもいいのですが、私はDark ++ Italicを使いました。
VS Codeの「ファイル」=>「基本設定」=>「設定」=>「テキスト エディター」=>「フォント」から、Font FamilyをFira Code iScriptに変更します。
上までの手順を踏むと、JavascriptやPythonなどでは、いい感じに筆記体が表示されるようになります。
それでも、Go言語などでは、筆記体の箇所が少ないように思えます。そこで、cssをいじって、特定のクラスを持つ箇所は筆記体にします。以下がその例です。
注意！VS Codeのテーマを変更すると、クラス名の割り振りも変更になってしまいます。下の例はDark ++ Italic以外のテーマでは、いい感じに表示されないかもしれません。
.mtki{ font-size: 1.125em; font-stretch: ultra-condensed; } .mtk4, .mtk6{ font-size: 1.125em; font-stretch: ultra-condensed; font-style: italic; }
別のテーマを使っている場合などは、VS Codeの「ヘルプ」=>「開発者ツールの切り替え」をして、筆記体にしたい部分のクラス名を調べてください。
初投稿なのにテンション低くてごめんなさいm(_ _)m 2019/09/11追記 こんなCSS使わなくても、border-style: outsetでよくね？って気付いた。 でも押した時のShadowエフェクトも良かったのでこのままに。 Windows1998ぐらいのボタンデザインを描く 基本的なコードは他所様のコピペです。（検索したフリー素材） なんで絶滅するIE11対応をやらされてるのだろう。 Google chrome標準インストールまだかな。 AndroidでGoogleアカウントほぼ必須なんだからWindowsとGoogle協力しない？ .btn-square-so-pop { position: relative; display: inline-block; padding: 5px 5px; text-decoration: none; color: #000000; background: #e9e3e0; box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(0, 0, 0, 0.05); font-weight: bold; border: solid 5px #c4c0ba #808080 #757575 #c9c9c9; } .btn-square-so-pop:active { box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); } もっとポップなデザインとかにしたいけれども、IE11の環境を自宅PCに入れたくないし、すでに新しいPCが隣で眠ってるのでガッツリは書かない。 けれども、動作環境を火狐でしかしてないから本番ぶっつけでやるという無駄作業をしつつこの記事を締めます。
初投稿なのにテンション低くてごめんなさいm(_ _)m
こんなCSS使わなくても、border-style: outsetでよくね？って気付いた。 でも押した時のShadowエフェクトも良かったのでこのままに。
基本的なコードは他所様のコピペです。（検索したフリー素材） なんで絶滅するIE11対応をやらされてるのだろう。 Google chrome標準インストールまだかな。 AndroidでGoogleアカウントほぼ必須なんだからWindowsとGoogle協力しない？
.btn-square-so-pop { position: relative; display: inline-block; padding: 5px 5px; text-decoration: none; color: #000000; background: #e9e3e0; box-shadow: inset 0 2px 0 rgba(255,255,255,1), inset 0 -2px 0 rgba(0, 0, 0, 0.05); font-weight: bold; border: solid 5px #c4c0ba #808080 #757575 #c9c9c9; } .btn-square-so-pop:active { box-shadow: 0 0 10px rgba(0, 0, 0, 0.30); }
もっとポップなデザインとかにしたいけれども、IE11の環境を自宅PCに入れたくないし、すでに新しいPCが隣で眠ってるのでガッツリは書かない。
けれども、動作環境を火狐でしかしてないから本番ぶっつけでやるという無駄作業をしつつこの記事を締めます。
リンク nth-of-type generator 目的 CSSの疑似クラス nth-child / nth-last-child / nth-of-type / nty-last-of-type について、 感覚的に理解するためのジェネレータです。 CSSの学習にご活用ください。 使い方 縦方向に表示する要素の数を入力する。 横方向に表示する要素の数を入力する。 テストしたい擬似クラスを選択する。 擬似クラスのカッコ内の指定方法を入力する。(odd、even、3n+1など) 生成された要素をクリックすると、擬似クラスの対象外に指定することができる。 背景 Vue.jsの練習用に、かんたんなジェネレータを作成しようと思いました。 nth-of-typeのジェネレータだったら、自分の仕事でも使えるし、うまくいけば広告収入も得られるんじゃ？と考えて作成してみました。 （後々ググったら、すでに作ってる人いましたけどね。） 感想 おもってたよりは時間かかったけど、 リアクティブなJavaScriptフレームワークや、flexboxや、Github Pagesのおかげで、 こういうジェネレータを作って公開するのがすごく楽になったのだと思います。 自分のしごとのスタイルにあわせた形の、自分用のジェネレータが気軽につくれるのはいいことだと思いました。 お願い 収益化の知識が一切なく、経験がほしいので、よかったら広告クリックしてください。 ていうか収益化の知識とかコメントください。 あと、ジェネレータについても、ここをこうしたらもっとわかりやすいとかのアドバイスもぜひ！ （スマホ用に調整してないので、スマホからだとUI微妙ですね。時間あるときに改善します。）
nth-of-type generator
CSSの疑似クラス nth-child / nth-last-child / nth-of-type / nty-last-of-type について、 感覚的に理解するためのジェネレータです。 CSSの学習にご活用ください。
Vue.jsの練習用に、かんたんなジェネレータを作成しようと思いました。 nth-of-typeのジェネレータだったら、自分の仕事でも使えるし、うまくいけば広告収入も得られるんじゃ？と考えて作成してみました。 （後々ググったら、すでに作ってる人いましたけどね。）
おもってたよりは時間かかったけど、 リアクティブなJavaScriptフレームワークや、flexboxや、Github Pagesのおかげで、 こういうジェネレータを作って公開するのがすごく楽になったのだと思います。 自分のしごとのスタイルにあわせた形の、自分用のジェネレータが気軽につくれるのはいいことだと思いました。
収益化の知識が一切なく、経験がほしいので、よかったら広告クリックしてください。 ていうか収益化の知識とかコメントください。 あと、ジェネレータについても、ここをこうしたらもっとわかりやすいとかのアドバイスもぜひ！
（スマホ用に調整してないので、スマホからだとUI微妙ですね。時間あるときに改善します。）
どうも！Hiroyukiです！ 今日は、 「CSSで画像を自在に切り抜く方法」 をご紹介しますっ！ つまり、 好きな位置で画像を切り抜いて表示できるっ！ という、素ん晴らしぃ〜ものです（＾o＾） 僕もやってみたら、超カンタンで驚きでした（笑） 実際の利用例は、下記の通りです。 元となる画像のアップロード機能 切り抜き後の画像表示 ※切り抜き高さを「任意」で指定できますっ！ 元となる画像アップロード機能を実装 HTML <h2>トップ画像をアップ</h2> <figure> <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}"> <figcaption>現在のチャンネルトップ画像（編集前）</figcaption> </figure> <form method="POST" action="/storeTop" enctype="multipart/form-data"> {{ csrf_field() }} <input type="file" name="photo" class="btn"> <input type="submit" value="更新する？" class="button btn btn-primary"> </form> コードだとこんな感じです。 アップした画像を表示させる imgタグ の src = "〜〜" の中身は、当然自由なパスを入れて下さい！ ここでは、PHP/Laravelを使って、S3というAWSのストレージ機能のパスを示しているんですが、 ご自身が画像を保存する先のパスを入れて貰えれば、OK!! CSSを使って画像を切り抜く！ はい、ここから本題ですね！ HTML <h2>トップ画像を編集</h2> <figure> <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}" style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;"> <figcaption>現在のチャンネルトップ画像（編集済）</figcaption> </figure> <form method="POST" action="/topTrim"> <div class="form-group"> <label>切り取る位置（高さ）を 0 ~ 100 の数値で入力</label> <div> <input type="number" name="top_trim" required> <div>例）画像の一番上を切り取る : 0 を入力</div> <div> 画像の一番下を切り取る : 100 を入力</div> </div> </div> <input type="submit" value="更新する？" class="btn btn-primary"> </form> imgタグ の src = "〜〜" で、上のアップした画像を表示させるものと「同じパス」を持ってきて、 それを切り抜きます！ ボクのページの場合、Twitterのマイページのトップ画像みたいに、横に細長〜く切り抜きたいので、 （上記コードも横に細長〜いため、右にスクロールしないと分かりづらいかも知れませんが（笑）） imgタグに style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%; "width:1200px; height:200px" と、任意で「表示させたい画像幅・高さ」を書いています！ で、ここからがポイント！ "object-fit:cover;"と記載することで、 「画像のタテヨコ比を保持したまま、トリミングが可能となりますっ！！」 初めてできたとき、「スッゲぇ〜〜」ってなりました(笑) 更に、 "object-position: 横の位置% 縦の位置%;"と追記すれば、 「横の位置＝一番左から○%の位置で切り取る」 「縦の位置＝一番上から○%の位置で切り取る」 なんていう、すごく融通が効く、、、ステキすぎることが出来ちゃいま〜す！！（感涙） このCSSの設定方法も、なかなか奥が深いので、ボクが書いたものじゃございませんが 下記のサイトも参考にしてみて下さい〜 1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー https://www.webcreatorbox.com/tech/object-fit で、ボクのページでは、上記機能を更に少し発展させて、 画像を切り取る高さ（縦の位置○%）をユーザーが好きな高さに設定できるようにしてます＾＾ つまり、コードをみて頂ければ分かりますが、 object-position:0% {{ $user->top_trim }}%; という風に、 「%」の前の数値を変数として、任意の値（高さのパーセンテージ）を 持ってこれるようにしています！！ ここでは、Laravelの変数で表現していますが、当然JavaScriptの変数など、他の変数でもOKですよ〜！ 実際のサービス上で、上記機能を試して確認して頂くのが一番分かりやすい と思いますんで、下記にボクのサービスのリンクを載せておきまーす ボクが作ったオリジナルWebサービス（下記リンク） http://youtubematome.herokuapp.com 新規ユーザ登録 → チャンネル設定 → ページ真ん中らへんの「トップ画像を編集」 で実際に使ってみることが出来まっす！！ 宜しければどうぞ〜〜
どうも！Hiroyukiです！
今日は、
をご紹介しますっ！
つまり、
という、素ん晴らしぃ〜ものです（＾o＾）
実際の利用例は、下記の通りです。
HTML
<h2>トップ画像をアップ</h2> <figure> <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}"> <figcaption>現在のチャンネルトップ画像（編集前）</figcaption> </figure> <form method="POST" action="/storeTop" enctype="multipart/form-data"> {{ csrf_field() }} <input type="file" name="photo" class="btn"> <input type="submit" value="更新する？" class="button btn btn-primary"> </form>
コードだとこんな感じです。
ここでは、PHP/Laravelを使って、S3というAWSのストレージ機能のパスを示しているんですが、 ご自身が画像を保存する先のパスを入れて貰えれば、OK!!
はい、ここから本題ですね！
<h2>トップ画像を編集</h2> <figure> <img class="rounded" src="{{ Storage::disk('s3')->url(Auth::user()->top_image_url) }}" style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;"> <figcaption>現在のチャンネルトップ画像（編集済）</figcaption> </figure> <form method="POST" action="/topTrim"> <div class="form-group"> <label>切り取る位置（高さ）を 0 ~ 100 の数値で入力</label> <div> <input type="number" name="top_trim" required> <div>例）画像の一番上を切り取る : 0 を入力</div> <div> 画像の一番下を切り取る : 100 を入力</div> </div> </div> <input type="submit" value="更新する？" class="btn btn-primary"> </form>
imgタグ の src = "〜〜" で、上のアップした画像を表示させるものと「同じパス」を持ってきて、 それを切り抜きます！
（上記コードも横に細長〜いため、右にスクロールしないと分かりづらいかも知れませんが（笑））
imgタグに
style="width:1200px; height:200px; object-fit:cover; object-position:0% {{ $user->top_trim }}%;
"width:1200px; height:200px" と、任意で「表示させたい画像幅・高さ」を書いています！
で、ここからがポイント！
更に、
なんていう、すごく融通が効く、、、ステキすぎることが出来ちゃいま〜す！！（感涙）
このCSSの設定方法も、なかなか奥が深いので、ボクが書いたものじゃございませんが 下記のサイトも参考にしてみて下さい〜
で、ボクのページでは、上記機能を更に少し発展させて、
つまり、コードをみて頂ければ分かりますが、
object-position:0% {{ $user->top_trim }}%;
という風に、
ここでは、Laravelの変数で表現していますが、当然JavaScriptの変数など、他の変数でもOKですよ〜！
と思いますんで、下記にボクのサービスのリンクを載せておきまーす
新規ユーザ登録 → チャンネル設定 → ページ真ん中らへんの「トップ画像を編集」
で実際に使ってみることが出来まっす！！
宜しければどうぞ〜〜
