CSSで改行させる・改行させないを指定する方法 | okuden-labo
レスポンシブサイトで、文字を指定の位置で改行させる為に<br>で改行すると、PCでは問題無くても、スマホの表示では不自然な改行になり、困ったことはないでしょうか？ レスポンシブサイトで文字を改行させたり、改行させないを指定する方法は、通常の改行に比べて少し手間がかかりますが、今回はCSSを使って改行の指定をする方法を３つご紹介します。改行の指定方法に応じて使い分けてください。 word-breakで単語の途中で改行させない inline-blockで改行したくない文字を指定 media queriesでデバイスに応じて細かい指定 word-breakで単語の途中で改行させない 文字を単語の途中で改行させたくない場合は、CSSのword-break:keep-allが有効です。 //css is-wbka{ word-break:keep-all; } //html <h3 class="i
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1：CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け アメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog
プロが選ぶ！本当に使える日本語フォント | それからデザイン スタッフブログ
世の中には無料のものから有料のものまでさまざまなフォントがあります。フォント制作ソフトも手軽に使えるようになった影響か、最近では日本語のフリーフォントもかなり増えており、フリーフォントの投稿サイト「フォントフリー」には2016年10月現在で300を超えるフォントが登録されています。 これだけフォントがあると、選択肢は無限大と言ってもよく、選ぶだけでも一苦労です。 そこで今回はそれからデザインのデザイナーが普段よく使っているフォントについてアンケートを取ってみました。 実制作で「本当に使える」フォントとは一体なんなのか。選んだ理由と合わせて聞いてみました。それでは早速見てみましょう！ 見出ゴMB31（みだしゴエムビーさんいち）｜モリサワ モリサワのスタンダードなフォントとして外せないフォントかなと思いチョイスしました。 シャープなフォントなので、テイストを選ばずいろんな場面で使用しています。
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！
JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
SANKOU! | Webデザインギャラリー･参考サイト集
コーポレートサイト ブランドサイト･サービスサイト ECサイト･オンラインショップ キャンペーン･特設･プロモーションサイト ポータルサイト･メディア･情報サイト プラットフォーム･コミュニティサイト 採用サイト･採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある･作り込まれている イラストを使用 3D表現･3Dイラストを使用 シズル感･訴求力のある写真･動画使用 写真少なめ･写真以外のビジュアル表現 さりげない動き･動きなし やや動きあり ダイナミック･印象的･細やかな動き 日本語メイン ノーコードツール｢STUDIO｣で制作 スマホ特化･モバイルファースト Web･IT･AI･デジタル･テクノロジー･通信関連 サービス･アプリ･ツール 病院･クリニック･歯医者･医療･薬 学校･教育･幼稚園･保育園･スクール 金融･投資･保険･士業 カフェ･飲食店･
ファーストビューの動きが面白いWebサイト20
2019年1月13日 JavaScript, Webデザイン 近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、今回はWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介します。 ↑私が10年以上利用している会計ソフト！ JavaScriptライブラリー 実例紹介の前に、素敵アニメーションを利用するための便利なライブラリーをいくつか紹介します。 three.js ドキュメント｜サンプル集 揺れ動く布や、画面いっぱいに浮かぶ球体など、様々な3D表現を可能にするJavaScriptライブラリー。ホームでは実際に利用しているWebサイトが数多く紹介されています。豊富なサンプル集も必見です。 GreenSock ドキュメント｜サンプル集 ア
【2020年版】Webデザイナーが覚えておきたいWebデザインの横幅サイズを解説！ | ELEMENT, INC.
Webサイトのデザインをする時に、どのサイズで作成すればいいか迷うことがありますよね。最近はスマートフォンのサイズにも対応したレスポンシブのサイトでなければいけません。 今回はパソコンとスマートフォンのそれぞれのWebサイトの適切なサイズについて解説をしていきます。これからWebサイトのデザインをする人は是非参考にしてみてください。 Webサイトのサイズを知ることから始める Webサイトのデザインを行うには、適正なサイズを知ることから始まります。適当な大きさでは上手く画面に表示ができないこともあります。現在ではスマートフォンが普及しているので、スマートフォンのサイズに合ったレスポンシブデザインも必要です。 Webデザイナーとして仕事をしていく上で、まずサイズを正確に知ることが大切です。 日本のパソコンとスマートフォンのサイズ(解像度) 日本で使われているパソコンやスマートフォンのサイズはど
STUDIO | Web制作を、ノーコードで。
コードやテンプレートに縛られずに、 誰でも自由自在にデザイン可能。 作成したサイトは、1クリックで世界に公開。 そう、必要なのはSTUDIOだけです。
【コピペOK】img透過・hover時ゆっくり変化させるCSS
ゆっくり変化させるとそれだけでリッチに見えます。 リンクにhoverを追加してそれをゆっくり変化させるCSSをご紹介。 文字リンクをゆっくり変化させる a{ color:#006898; text-decoration:none; color:#006898; text-decoration:none; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } 画像をゆっくり変化させる a:hover img { opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.
Box全体にリンクを効かせるのはaタグで囲まなくてもCSSの設定で可能 | web(K)campus|WEBデザイナーのための技術系メモサイト
コラム一覧や商品一覧でよく見るこんなページ PCサイトなら、「詳しくを見る」部分だけがリンク領域でも問題なさそうだけど、スマホサイトの場合はBOX全体がリンク領域である必要があります。 【HTML】 <li> <img src="img.jpg" alt="" /> <h2>タイトル</h2> <span>説明が入ります。<br /> 説明が入ります。<br /> 説明が入ります。<br /> 説明が入ります。 </span> <a href="">詳しく見る</a> </li> HTMLだけで考えれば、＜li＞タグのすぐに＜a＞タグを入れればいんでしょうが、通常＜a＞タグはインライン要素なので、中に＜h＞や＜p＞のブロック要素を入れてはいけません。 なので、CSSで設定するのが一般的です。 CSSのpositionを使ってリンク領域をBOX全体に 【HTML】 <li> <img src
jQueryスライダー『slick.js』 設置方法解説と設定オプション一覧
SNS X Facebook Ｂ! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 webサイトのトップページなどに多くみられる、画像やコンテンツを左右に切り替える、スライダー slider(カルーセル carouselとも）。 jQueryプラグインとしてさまざまなスライダーが公開・提供されていますが、中でも設定の簡単さとオプションの充実度からお勧めしたいのが今回解説する『slick』です。 今回はその設置手順とサンプルを交えた使い方と各種オプションの詳細をデモを交えて解説していこうと思います。 『slick』の主な機能と特徴 まずはslickの主な機能と特徴をピックアップ。 レスポンシブ対応ブレイクポイントごとの設定振り分けが可能タッチデバイスに対応IE8以
【jQuery】スライダープラグイン「slick」の使い方を詳しく解説
前回、「超簡単！CDNのjQueryを読み込む方法」というのを書きましたが、Web制作をする上では、様々なjQueryのプラグインも使用する機会が多いと思います。jQuery本体と同様に、プラグインも毎回ダウンロードしてサーバーへアップして、、、というのは面倒です。そこで便利なのが「jsDelivr」というサイトです。プラグイン全て、というわけにはいきませんが、かなりの数のプラグインをホストしていますし、よく使うCDNをコレクションして一括でソースコードをコピーして貼り付けられたり超便利です。ぜひ使ってみましょう。jsDelivr&... 設置するファイル ajax-loader.gif fonts（フォルダ） slick-theme.css slick.css slick.min.js HTML <link href="js/slick-theme.css" rel="styleshee
外部ページを表示するのに「target=”_blank”」は必要ないと気づいた日
昨日、ブログ記事を書いていたときに、ふとある事に気づきました。 これまでは外部ページへリンクさせるのに「target=”_blank”」を記載していたのですが、この「target=”_blank”」は、もう記載する必要がないのではないかと。 「target=”_blank”」をつけていた理由 この「target=”_blank”」属性は、リンクをクリックして外部ページに遷移するときにページの開き方を指定するものです。 その「target=”_blank”」を記載しなければ、同じページ内で外部リンクを開き、記載すれば別ページとして開くようになります。 Google ChromeなどのPC用ブラウザの方が理解しやすいのですが、「target=”_blank”」をリンクのソースコードに記載しておくと、リンクをクリックした時に新しいタブを自動で追加してページを開きます。 そして指定していないと、今
【第3弾】少しのコードで実装可能な15のCSS小技集
2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 スムーズスクロール スクロールスナップ スクロールすると要素を固定 画像をトリミング CSSで計算式を書く テキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避する テキストに波線を引く テキストの上に記号を表示 表のセルの幅を統一する 入れ子になったリストもカウントする フォームのプレースホルダーの文字色を変更 しましまのライン メディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
Canvasで波のアニメーションを描画する | スターフィールド株式会社
(function () { var unit = 100, canvas, context, canvas2, context2, height, width, xAxis, yAxis, draw; /** * Init function. * * Initialize variables and begin the animation. */ function init() { canvas = document.getElementById("sineCanvas"); canvas.width = document.documentElement.clientWidth; //Canvasのwidthをウィンドウの幅に合わせる canvas.height = 300; context = canvas.getContext("2d"); height = canvas.heigh
Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
実は、bootstrapの知識だけでは足りません（涙） 本気でweb制作を仕事にしたいなら、現場で通用する実践的なスキルを「短期集中」で身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら Bootstrap、使ってますか？ 便利ですよね。その便利さを物語るように、本当にいろいろなサイトで利用されてます。 ネットで配布されてるWordPressのテーマやHTMLテンプレートのベースに使われていることも多いです。気づいてないうちに使ってしまっているひとも、たくさんいることでしょう。 今回は、便利なのだけど、使いこなすには少し理解が難しい「bootstrapのグリッドシステム」について解説します。bootstrapでレスポンシブデザインを作るとき、欠かせないテクニックです。 グリッドシステムは、頭で理解しようとせず、目で見て
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://morobrand.net/mororeco/web/jquery/lity/
Loading...
