タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と
CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと
border-radiusの値をデスクトップとスマホで変える、例えばビューポートが大きくてマージンがある場合は8pxで角丸にし、ビューポートが小さくてマージンがない場合は0pxで矩形にする。 メディアクエリで簡単に実装できると思うかもしれません。しかし、ビューポートのサイズが小さく、マージンがある場合に8pxの角丸になりません。 この難しい条件をCSSの関数で実装するテクニックを紹介します。 Conditional Border Radius In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに border-radiusの値をスマホとデスクトップで変えるテクニック 実装方法の解説 なぜ、9999を使用するのか 終わりに はじめに 私はデベロッパーがどのようなCSSを書いている
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro
23 CSS features you should knowの動画でCSSの最近のテクニックが紹介されており、その中から特に注目すべき面白いテクニックを紹介します。 たった1行のCSSで、背景画像とテキストの間にグラデーションのオーバーレイを要素全体に適用するテクニックです。画像の一部を暗くしてその上にテキストを配置する際に非常に便利です。 実際の動作は、デモページでご覧ください。 See the Pen Gradient Overlay with border-image by coliss (@coliss) on CodePen. HTMLはシンプルです。 テキストのh1要素と背景を設定したdiv要素があるだけです。
PS4『BORDER BREAK』公式
PlayStation®4専用ソフト『BORDER BREAK』公式サイト。本格ロボットアクション、ハイスピードロボットチームバトルが「基本プレイ無料」スタミナフリーでいつでも戦える！武器や機体パーツを自由に組み合わせ、あなただけの「ブラスト・ランナー」をカスタマイズ！
昔購入して、着なくなった服を収納(封印)しているケースを掘り返してみたら 20年以上前に購入した古着のラルフローレンのボーダーTシャツが二つ見付かった。 何故そんな物を掘り返したかというと、普段交流させて頂いているsisoaさんという方が ラルフローレンの新作を紹介していて、そのアイテムの色使いに懐かしさを感じてしまい 若かりし頃に着ていた物を久々に見てみたくなったというところ。 sisoa.hatenablog.com 左はピンボーダーの半袖Tシャツで、右は今着るには少し派手なスリット入りのロンT。 たぶん購入したのは2000年前後で、当時は数千円が相場だったと記憶しているけど 現在の中古取引価格はその値段の何倍にもなっているらしい。 左はマルチカラーでも控えめな色合いに、柔らかい生地なので今でも普通に着れそう。 右はかなり丈夫な生地をしていて、ラガーシャツのクルーネック版みたいな感じ。
大戦迷彩の継承？【旧西ドイツ】国境警備隊（BGS）迷彩防寒パーカー（後期型）とは？ 0721 🇩🇪 ポリス WEST GERMANY BORDER POLICE（BGS）CAMO PARKA（LATE MODEL・SIMILAR TO WW2 CAMO）1980S DEADSOCK - いつだってミリタリアン！
今回は、1980年代の旧西ドイツ国境警備隊（BGS）の迷彩防寒パーカーを分析します。 以前分析した同じ迷彩ジャケットの上に着用する装備ですね。 見た目以上に暖かいパーカーです。 残念ポイントもありますが、デッドストックですよ！ 目次 １ 旧西ドイツ国境警備隊（BGS）迷彩防寒パーカー（後期型）とは？ ２ 全体及び細部写真です！ ３ その特徴とは？ ４ 製造とサイズのデータです！ ５ まとめ スポンサーリンク スポンサーリンク １ 旧西ドイツ国境警備隊（BGS）迷彩防寒パーカー（後期型）とは？ これまで、旧西ドイツ国境警備隊の迷彩装備を分析してきました。 【旧西ドイツ】国境警備隊迷彩トラウザース 【旧西ドイツ】国境警備隊迷彩ジャケット 【旧西ドイツ】国境警備隊迷彩スモック そろそろ終盤（？）に近付いてきましたが、今回のアイテムは防寒パーカーです。 やはり第二次大戦中のドイツ国防軍
再現度はアメリカ軍のお墨付き！【旧ソ連の軍服】KGB国境警備隊迷彩ユニフォーム（P79初期型・モデル品）とは？ 0437 USSR ミリタリー SOVIET UNION KGB BORDER GUARD CAMO UNIFORM（P79・EARLY MODEL）1980S REPLICA JAPAN MADE - いつだってミリタリアン！
今回は、1980年代の旧ソ連軍KGBの迷彩ユニフォームを分析します。 残念ながらモデル品ですが、ある理由で当初から品薄でした。 今や当時の官給品と同じくらい希少なものとなっていますね。 中古品ですが、程度は良好ですよ！ 目次 １ 旧ソ連KGB国境警備隊迷彩ユニフォーム（P79初期型・モデル品）とは？ ２ 全体及び細部写真です！ ３ その特徴とは？ ４ 製造とサイズのデータです！ ５ まとめ スポンサーリンク スポンサーリンク １ 旧ソ連KGB国境警備隊迷彩ユニフォーム（P79初期型・モデル品）とは？ 1980年代に、東京の上野にある老舗ミリタリーショップが、突如としてソ連軍の迷彩服（今回のモデル品）を発売しました。 いやー驚きました。 当時は、冷戦真っ盛りだったので、まさかこんな製品が発売されるとは夢にも思いませんでしたね。 当時のソ連軍迷彩服は、中古でボロボロのものでも１０万
希少です！【旧西ドイツ】国境警備隊（BGS）迷彩トラウザーズとは？ 0566 🇩🇪 ミリタリー ポリス WEST GERMANY BORDER POLICE（BGS）CAMO TROUSERS 1950S - いつだってミリタリアン！
今回は、1950年代？の旧西ドイツ国境警備隊（BGS）迷彩服トラウザーズを分析します。 既にいくつか同じ国境警備隊の装備を分析してきましたね。 でも今回のアイテムは、極端に現存数の少ないモデルになります。 程度は良くないですが、デザインは注目するべき箇所がありましたよ！ 目次 １ 旧西ドイツ国境警備隊（BGS）迷彩トラウザーズとは？ ２ 全体及び細部写真です！ ３ その特徴とは？ ４ 製造とサイズのデータです！ ５ まとめ スポンサーリンク スポンサーリンク １ 旧西ドイツ国境警備隊（BGS）迷彩トラウザーズとは？ 第二次大戦終了後も頑なに、旧ドイツ軍と類似した装備を使用し続けたドイツ国境警備隊（BGS）。 同時期のドイツ軍と一線を画した装備は、日本のドイツ軍マニアにも大いに歓迎されましたね。 何故なら大戦中のドイツ軍装備の代替品として、好都合だったからです。 （特にヒストリカ
大戦中迷彩の面影あり！【旧西ドイツ】国境警備隊（BGS）迷彩ジャケット（初期型・完全版？）とは？ 0522 🇩🇪 ミリタリー WEST GERMANY BORDER GUARD CAMO JACKET（EARLY TYPE・SIMILAR TO WWⅡ CAMO）1975 - いつだってミリタリアン！
今回は、1970年代の旧西ドイツ国境警備隊の迷彩ジャケットを分析します。 …とはいえ、第二次大戦中のドイツ軍マニアには、見覚えのある迷彩ですよね。 （殆ど軍服なのでは？） それはともかく、今回のアイテムもデッドストックですよ！ 目次 １ 旧西ドイツ国境警備隊迷彩ジャケット（完全版？）とは？ ２ 全体及び細部写真です！ ３ その特徴とは？ ４ 製造とサイズのデータです！ ５ まとめ スポンサーリンク スポンサーリンク １ 旧西ドイツ国境警備隊迷彩ジャケット（完全版？）とは？ 旧西ドイツ国境警備隊の個人装備は、かなり異質です。 何故なら、ヘルメット、水筒、雑のう（ヒップバッグ）、おまけに迷彩服まで第二次大戦中のドイツ国防軍にそっくりでしたから。 （カラーやデザインは微妙に違っていたりしましたが…。） 西ドイツ陸軍も当初は大戦中のドイツ軍類似迷彩を装備していましたが、早々に廃止されま
Ethiopian migrants say they were shot when they tried to cross from Yemen into Saudi Arabia Saudi border guards are accused of the mass killing of migrants along the Yemeni border in a new report by Human Rights Watch. The report says hundreds of people, many of them Ethiopians who cross war-torn Yemen to reach Saudi Arabia, have been shot dead.
【CSS】border-radiusとborder-imageは併用不可、ですが、強引になんとかしてみました。 - Little Strange Software
どうも！LSSです！！ 【CSS】虹色の枠線、もう２種類！ - Little Strange Software で作った枠線ですが、こちらはborder-imageを使って描いていました。 border-imageを使うと枠線の表現の幅が広がって面白いのですが、「border-radius（角丸）」や「border-style（枠線の種類を点線や二重線にする）」の指定と共存できない、というのが、ちょっと惜しいところです^^; 画像ファイルを用意して表現する事は可能ですが、gradientを使って…となるとあまり自由が利かなかったりもします。 今回は、「なかばインチキ」な方法ではありますが、「虹色の枠線」を角丸にする方法を試してみました！ 虹色の角丸枠線 解説 border-box、padding-box、content-box あとがき 虹色の角丸枠線 虹色の枠線 角丸１ コード <div
【CSS+SVG】枠装飾、border-imageによるバクダン２種と雲型 - Little Strange Software
どうも！LSSです！！ 【CSS+SVG】雲型の枠を作れないか試み中…【実験】 - Little Strange Software で試みていた装飾枠ですが、色々と応用してみました。 バクダン その１ バクダン その２ 雲型の枠 その４ その他の調整について あとがき バクダン その１ バクダン その１ ちなみに、このトゲの数は幅・高さに応じて変化します。 サイズによっては稀に変なスキマができてしまう事も？？ コード <style><!-- .bakudan1{ border:30px solid transparent; border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="90" height="90" viewbox="0 0 90 90" stroke="%
【CSS】border-image-sliceをkeyframesアニメーション【実験】 - Little Strange Software
どうも！LSSです！！ 未だ掴みきれないborder-image。 ちょいと試しに「border-image-sliceはkeyframesでアニメーションにできるのか？」を試してみました。 実験 コード アニメ化できましたね！ 実験 呼吸してるみたい コード <style> @keyframes testa{ 0%{border-image-slice:49%;} 100%{border-image-slice:35%;} } .test{ height:200px; border:40px solid; border-image-source:radial-gradient(farthest-side,transparent 59%,gray 60%,white,gray 89%,transparent 90%); animation:testa 3s infinite alterna
【CSS】border-imageとgradientで作る枠線３種 - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com で「border-styleでは表現できない枠線を、border-imageを使って作る」事をやってみました。 border-image を使うと、border-radius（角丸）やborder-style（線種）が無効になってしまいますが、border-imageに指定する画像によって「おおむね」近い表現ができる事もあるようです。 特にradial-gradientはborder-radiusの代わりに角丸を表現するのに使えて、中身を工夫するとborder-styleでは表現できなかった事もできちゃったりしますね^^ 今回は、そんなborder-imageならではの枠線を考えてみました。 枠線３種 コード とりあえず３種、ですが 枠線３種 ぼやけた角丸枠 トリプル角丸枠線 縦に虹色 コード <div s
【CSS】border-radius（角丸）ってこんな事もできたんだ！【今更】 - Little Strange Software
どうも！LSSです！！ 今までさんざんborder-radiusを使っていましたが、今さらになって新たに見つけた事がありました！！ ほんと今更ｗｗｗ サンプル コード その他サンプル サンプル かなり今更感がありますが、border-radius（角丸）って縦横別々に指定できるんですね！ そうすると、こんな変わった形状の枠も作れます^^ コード <p style="background-color: #eedddd; border-radius: 35%/20px; padding: 25px;"> かなり今更感がありますが、border-radius（角丸）って縦横別々に指定できるんですね！<br /><br /> そうすると、こんな変わった形状の枠も作れます^^ </p> border-radiusの指定の中に「/」（スラッシュ）を入れると、「角丸の横半径/角丸の縦半径」を別々に指定で
【オシャレすぎ】春日部市のボーダーカフェ（BORDER CAFE）に行ってきた - ミニマリストのび太の無印良品大好きブログ
「春日部市のボーダーカフェに行ってきました 2021年の2月の21日 お昼の12時30分ぐらいです」 混み具合は 7割程度席が埋まっていたという感じになります 越谷のボーダーカフェが閉店して春日部市に移転したそうです 春日部駅から歩いて5分くらいのところにあります youtu.be 【外観】春日部市のボーダーカフェ（BORDER CAFE） 【店内】春日部市のボーダーカフェ（BORDER CAFE） 【注文したもの】春日部市のボーダーカフェ（BORDER CAFE） 【メニュー】春日部市のボーダーカフェ（BORDER CAFE） 【テイクアウトメニュー】春日部市のボーダーカフェ（BORDER CAFE） 【フリーWi-Fi】春日部市のボーダーカフェ（BORDER CAFE） 【駐車場】春日部市のボーダーカフェ（BORDER CAFE） 【店舗情報】春日部市のボーダーカフェ（BORDER C
【CSS】虹色の枠線（border） - Little Strange Software
どうも！LSSです！！ little-strange.hatenablog.com に続き、虹色の枠線（border）を考えてみました。 虹色の枠線 コード borderの太さに準じて虹の太さも変わります！ border-imageを使用しています 虹色の枠線 虹色の枠線ができました^^ border-imageはやはり手強いですが、だいぶ分かってきた…かも？ コード <style> .bdimg{ border:50px solid; border-image:radial-gradient(at 50% 50%,transparent 14%,purple 15% 19%,blue 20% 24%,lightblue 25% 29%,green 30% 34%,yellow 35% 39%,orange 40% 44%,red 45% 49%,transparent 50%) 49%;
CSS border animations Stay organized with collections Save and categorize content based on your preferences. Setting borders There are a few methods available to set a border on an element: border, outline, and box-shadow. As detailed in The 3 CSS Methods for Adding Element Borders by Stephanie Eckles, each approach comes with its own advantages and disadvantages–especially when it comes to animat
【CSS】変なborder-radiusとbox-shadowを合わせてみました【小ネタ】 - Little Strange Software
どうも！LSSです！！ ふと思いついて、これまでに試した２つの小ネタを合体させてみました。 小ネタ＋小ネタ＝あわせても小ネタ、って感じですがｗ こんな枠、どうでしょう？ コード 元ネタ CSS部分ちょこっと解説 あとがき こんな枠、どうでしょう？ と、単なる枠に対する装飾なので、使い方は自由自在！ スマホで見るとまたちょっと形の印象が違うかもです。 コード <p style="box-shadow: 0px 0px 18px 0px lightgreen inset,-8px -8px 18px 0px lightgreen inset,5px 5px 15px 0px #888888; border-radius: 30%/10%; width: 100%; height: 400px; padding: 28px;">中に入れる文章</p> 元ネタ 上記２つの記事で使ったネタを併用して
【CSS】border-imageとconic-gradient【実験】 - Little Strange Software
どうも！LSSです！！ ちょっとまた、border-imageを試してみました。 border-style:outset;で盛り上がったような枠線になりますが、それよりもborder-colorを四辺別々に設定した方が角が四つとも切れ目が生じてかっこいい！ …のを更に、conic-gradientを用いると四辺の中で更にグラデーション変化を入れる事ができます。 ついでに背景色をアニメーションで変化させて、様々な色に合う事を確認しています。 border-imageとconic-gradient コード outsetの場合 四辺別々に色設定した場合 ただし、今回のconic-gradient版には欠点が… border-imageとconic-gradient こんな風になります。 よく見ると４つの辺の中でも明るさがグラデーション変化していますね。 コード <style> @keyframe
【CSS】borderによく似た、outlineというCSSプロパティを試してみます【実験】 - Little Strange Software
どうも！LSSです！！ 以前からちょっと気になっていたCSSプロパティ「outline」を試してみます。 これまでもよく使ってきた「border」とよく似ていますが、ちょっと違う？らしく、本の説明を見てもイマイチよく分からないものでｗ そういう時は、試してみるに限りますね^^ ちなみに手元の本には、「borderは線の太さの分、要素が大きくなり、レイアウトに影響」「outlineは線を引いても要素の大きさは変わらず、レイアウトも変わらない」てな事が書かれています。 まずはテスト用のボックスを用意します borderを装飾用にしてみます borderをoutlineに変えてみます borderとoutlineを同時に適用してみます 空行を開けずに３つ続けて置いてみると… なるほどね ただし、borderはborderで あとがき まずはテスト用のボックスを用意します てすと コード <div
【CSS・border】borderで三角形が作れる！？という事に今更びっくりした話 - Little Strange Software
どうも！LSSです！！ ↑こんな三角形が、CSSの、それもborderで描ける、というのを知ってびっくりした話です。 これ最初に見つけた人凄いな…！！ 実はこの三角、あちこちのブログで使用されています 三角形のコード 順を追って解明していきます まず、縦横50pxの黄色い四角形を作ってみます その四角形の上下左右に幅15pxのborderをつけてみます 上下左右のborderの色を変えてみます 下だけ残し、上左右のborderの色をtranparent（透明）にしてみます。 要素自体のwidthとheightを0pxにし、背景色指定を削ります border-topの指定を削り、border-bottomの幅を大きくしてみます なお、border-imageとは組み合わせられないようです 実はこの三角、あちこちのブログで使用されています CSSで吹き出しを表現されているのをよく見かけますが、
【CSS】変形border-radiusに各種border-styleを組み合わせてみました【実験】 - Little Strange Software
どうも！LSSです！！ 先日の記事で、 を試した際に、double（二重線）で指定した枠線部分も奇妙に歪んだりしていました。 枠線の種類は solid double dotted dashed inset outset ridge groove と多数ありますが、この変わったborder-radiusと組み合わせた場合にそれぞれどんな風に表示されるのか？を試してみる記事となります。 あまり奇妙にならないものが囲み枠として使いやすいかと思いますが、果たして…？ solidの場合 doubleの場合 dottedの場合 dashedの場合 insetの場合 outsetの場合 ridgeの場合 grooveの場合 あとがき solidの場合 変わった形のborder-radiusと、各種border-styleの組み合わせを試してみました。 border-styleの種類は solid dou
BORDER／物語の物語 - knoriのブログ
日本ドラマの「BORDERボーダー」をみたよ。 わたしはどうしたって不思議で不思議で。ここ最近、ずっと囚われている、中国ドラマが何故、あんなにも鷹揚な豊かさを持った物語を生み出すのか？ 数十年前に読んだ、もう古い記憶、使い物にならないかもしれない道具を引っ張り出して、(ボーダーから派生する)印象をまとめる。 わたしが暮らすこの社会は、とうの昔に、権威とか絶対的なものが崩れた。いろんな言い方があるだろうが、意味を見失って寄るべない感じだ。 物語を駆動する感情ってなんだろう？恐怖や畏敬、不条理、葛藤…？ ともかく、現在、不条理さに葛藤するような大きな物語は成立が難しい。 この「ボーダー」というドラマでは、刑事である主人公が殺人の原因にコミットしていく。 原因は、「羅生門」のように真実とは別のところのものをそれぞれの人物に物語らせるものだ。原因を語れば、それは物語になる。 韓ドラの「梨奏院クラス
【CSS】border（枠線）のグラデーション - Little Strange Software
どうも！LSSです！！ CSSでborderをグラデーション色付け、なんとなく分かりました^^ 成功例 サンプル コード 失敗例 サンプル コード 失敗する要因 コード解説 border: 15px solid; border-image: linear-gradient(135deg, red,blue); border-image-slice: 1; 作成例 サンプル コード やってみて気づいたんですが border-image-sliceがとても難解でした^^; 成功例 サンプル てすと コード <div style="border: 15px solid; border-image: linear-gradient(135deg, red,blue); border-image-slice: 1;">てすと</div> 必要最小限の指定は↑こんな感じです。 失敗例 サンプル てすと
【CSS】画像を使った枠線（border-imageとborder-image-slice使用） - Little Strange Software
どうも！LSSです！！ 前回の記事で、border-imageとborder-image-sliceを使ってグラデ―ションの枠線を描きましたが、border-imageはその他に「画像ファイルを枠線として使う」という事もできます。 できます、というより、多分、おそらく、そっちの方がメインの用途なんじゃないか？という気がします。 今回は、その「画像を使った枠線」を扱うCSSをやってみた話です。 画像を使用したborder-image 使用した画像 サンプル コードと解説 テストその１ width: 300px; height: 200px; border: 20px solid; border-image: url('画像ファイルのURL'); border-image-slice: 20; テストその５ border-image: url('画像ファイルのURL') 20; コピペする場合
A while ago, I was inspecting facebook.com home page feed to learn and see how they build things out. I’m always curious to see how people write CSS. I noticed a very, very interesting border-radius value for the card component in the main feed. I shared the following tweet about this little discovery. Then, I received this reply from Miriam Suzanne: is it always 8px? That math looks like a toggle
The Complex But Awesome CSS border-image Property — Smashing Magazine
The CSS border-image property is one of those properties you undoubtedly know exists but may not have ever reached for. Or maybe you have reached for it but found all of its slicing logic difficult and cumbersome. That’s because it is! But the property is also capable of some really interesting things if we take the time to understand its syntax. In this article, Temani Afif demonstrates different
前回の記事に続き、IE11でのflexbox関連のバグについてのメモです。たくさんあるflexbox関連のバグ ですが、自分なりに1つ1つ整理していこうと思います。 今回はbox-sizing: border-box;関連のflexboxのバグです。ぱっと見では気付きにくい可能性があるので注意が必要なバグです。 バグの詳細 IE11ではbox-sizing: border-box;が指定されていても、flex-basisに指定した値がbox-sizing: content-box;をベースに計算されてしまいます。そのため、flexアイテムにborderやpaddingが指定されていると想定通りのレイアウトになりません。 対処法1 当該のflexアイテムにmax-widthを指定する。 flex: 1 1 75%; max-width: 75%; padding: 0 4rem 0 0; 対
Today I visited the blog site - shoptalkshow, and it was very interesting to see such a style: I think its style is unique, especially some of the bezels. So, in this article we will use CSS to create a variety of wonderful border effects. CSS Border property When it comes to borders, the first thing that comes to mind border is that the most commonly used one is solid, dashed which appears in the
高度に発達した医学は魔法と区別がつかない - 津田彷徨/瀧下信英 / 第１話 Ｄｏｃｔｏｒ Ｗｉｔｈｏｕｔ Ｂｏｒｄｅｒ． | モーニング・ツー
高度に発達した医学は魔法と区別がつかない 津田彷徨/瀧下信英 医学 VS. 魔法。異世界に転生した医師は、異世界の住人を治療できるのか。
【CSS】borderのグラデに失敗した話 - Little Strange Software
どうも！LSSです！！ マーカーを作るのに使った、background-image:lineargradient。 ボックスの背景に対する指定でしたが、同類に、 border-image:lineargradient というのがあり、border＝枠線にグラデーションをかけられるようなので試みてみました。 失敗例 失敗例のコード 全体を囲む枠線をグラデさせたかったんですが 失敗例 てすと 失敗例のコード <div style="border: 15px solid; border-image: linear-gradient(135deg,red 0%,blue 100%);">てすと</div> 全体を囲む枠線をグラデさせたかったんですが これだけでは、四隅にだけ、指定したグラデーションの四角が出るだけみたいです。 色々試みてて、一瞬だけ期待通りのものが出たのですが、調整しているうちにま
最新のニュースに登場した時事英語を紹介するこのコーナーでは、世界のニュースに出てくるキーワードを学ぶと同時に、ビジネスの場や日常会話のなかでも役立つ単語やフレーズを取り上げていきます。1日1フレーズずつクイズ感覚で学び、英語に触れる習慣をつくっていきましょう。語彙力の向上には、日々の積み重ねが大事です。 今日の時事英語 2024年8月11日（日）の「CNN」に次の一文がありました。 Ukrainian President Volodymyr Zelensky has confirmed Kyiv’s troops are fighting inside Russia, days into the surprise Ukrainian cross-border incursion into Russia’s Kursk region that has become a major embar
去年、障害のある一人の男性が就職することになりました。山崎拓弥さん、３４歳。脊髄損傷で、首から下が動きません。山崎さんはどうやって働けるようになったのか、その壁を打ち破ったのは遠隔で操作できる「分身ロボット」という最新技術でした。半年間におよぶ取材を元に、山崎さんの言葉で伝えていきます。 分身ロボットとの出会い 私の名前は山崎拓弥。島根県に住む３４歳で、趣味は漫画。週刊漫画雑誌は毎週かかさず読んでいる。 ５年前、私はベランダから誤って転落してしまい、首から下を動かすことができなくなってしまった。なので大好きな漫画は、口にくわえている特製のスティックで、スマホを操作して読んでいる。 事故によって、私の生活は一変してしまった。事故の前は、居酒屋で主任を務めていたが、その仕事も辞めざるをえなくなった。ずっとこのままの生活を想像したが、希望が持てなくなってしまった。とても耐えられそうになかった。
The border was marked out by stone markers which have remained in place A farmer in Belgium has caused a stir after inadvertently redrawing the country's border with France. A local history enthusiast was walking in the forest when he noticed the stone marking the boundary between the two countries had moved 2.29m (7.5ft).
Russian Forces Appear to Move Military Equipment to Finland Border in Video
Russian forces appear to have moved military vehicles near the country's border with Finland in unverified footage. The unconfirmed footage, shared online on Monday, showed at least two Russian military vehicles moving towards the border with Finland. In the clip, shared on Twitter by user OSINTdefender, the vehicles appear to be K-300P Bastion-Ps, which are coastal defense missile systems. Toward
【CSS】borderにグラデーションをかける方法！たった3行だけで簡単にボーダーをカラフルにできる！ - ディレイマニア
CSSだけでデザインできることが増えてきて、昔なら画像を使っていた場面でもCSS数行でできちゃうので手軽でいいですよね。 backgroundにグラデをかける手法は使わないサイトはないくらい多用してるんですが、borderにもかけられるので、その方法についてコピペで使えるソースコード付きでご紹介します。
新生活様式と言われても…そこで７つの提案です | Border Break ～打ち破れ！ その境界～ | ちかさとナビ | NHK
買い物はひとりで、仕事はテレワークで…いま「新しい生活様式」が広がっています。 しかし、視覚や聴覚に障害がある人たちは、この生活様式に戸惑いを感じています。「マスクをして」、「触らないように」、求められる新しい生活が、日常で大きな問題になるのです。 みんなにわかってほしいこと、障害がある人たちが“７つの提案”をまとめました。 触ることは重要な情報源 スーパーなどでむやみに商品を手に取らないようになど、「触る」という行為は、新型コロナウイルスへの感染防止のため、できるだけ控えるよう呼びかけられています。しかし、視覚に障害がある大胡田誠さんにとって、「触ること」は、それが何かを判断したり状況を把握したりするための重要な手段のひとつです。 例えば、エレベーターに乗るとき、ボタンに書かれている点字を指でなぞって、行き先の階を選択します。ただ、すぐに目的のボタンを押すことができるかというとそれは難し
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】borderを使って、三角形作るのはやめませんか？ - Qiita
新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
レスポンシブ対応にメディアクエリなしで、CSSの関数で定義！border-radiusの値を変えるテクニック
CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
CSSで画像にオーバーレイを与えるときは、border-imageプロパティを使うと簡単で美しく実装できます
USED Ralph Lauren border tee - 赤い羽BLOG
Hundreds of migrants killed by Saudi border guards - report
CSS border animations | Articles | web.dev
Conditional Border Radius In CSS
IE11でflex-basisの値にbox-sizing: border-boxが効かないバグ
Fantastic CSS border animation
【時事英語】“Cross-border incursion”ってどういう意味？ | ニュースの「キーワード」で語彙力を身につける
分身ロボットで私も働ける | Border Break ～打ち破れ！ その境界～ | ちかさとナビ | NHK
Belgian farmer accidentally moves French border
ameblo.jp/nishihara-dc
repotama.com
blog.truestar.co.jp
zenn.dev/orch_canvas
gigazine.net
grapee.jp